编写ajax同用工具代码以及案例分析_JAVA_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
最新资讯 | 百度新闻 | GOOGLE地图 | RSS订阅 | 更多
热搜：
更多>>
 
您所在的位置： 程序员俱乐部 > 编程开发 > JAVA > 编写ajax同用工具代码以及案例分析

编写ajax同用工具代码以及案例分析

 2013/12/19 13:09:14  AILIKES  程序员俱乐部  我要评论(0)
  • 摘要：1.初始化XMLHttpRequest对象模版functioncreateXmlHttpRequest(){varxmlHttp;try{//Firefox,Opera8.0+,SafarixmlHttp=newXMLHttpRequest();}catch(e){try{//InternetExplorerxmlHttp=newActiveXObject("Msxml2.XMLHTTP");}catch(e){try{xmlHttp=newActiveXObject("Microsoft
  • 标签：工具 Ajax 代码 案例分析 分析
    class="dp-xml" style="border: none; color: #5c5c5c; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; line-height: 26px; margin-bottom: 1px !important; margin-left: 45px !important;">
  1. 1.?初始化XMLHttpRequest对象模版??
  2. function???createXmlHttpRequest(){??
  3. ???var?xmlHttp;??
  4. ???try{????//Firefox,?Opera?8.0+,?Safari??
  5. ???????????xmlHttp=new?XMLHttpRequest();??
  6. ????}catch?(e){??
  7. ???????????try{????//Internet?Explorer??
  8. ??????????????????xmlHttp=new?ActiveXObject("Msxml2.XMLHTTP");??
  9. ????????????}catch?(e){??
  10. ??????????????????try{??
  11. ??????????????????????????xmlHttp=new?ActiveXObject("Microsoft.XMLHTTP");??
  12. ??????????????????}catch?(e){}????
  13. ???????????}??
  14. ????}??
  15. ???return?xmlHttp;??
  16. ?}??
  17. 2.手动编写ajax通用工具代码??
  18. //通过id获取dom对象??
  19. function?$(id)?{??
  20. ????return?document.getElementById(id);??
  21. }??
  22. ??
  23. //?ajax技术必须创建XMLHTTPRequest对象?，获取XMLHTTPRequest对象的操作??
  24. function?createXHR()?{??
  25. ????var?xhr;??
  26. ????var?aVersion?=?[?"MSXML2.XMLHttp.5.0",?"MSXML2.XMLHttp.4.0",??
  27. ????????????"MSXML2.XMLHttp.3.0",?"MSXML2.XMLHttp",?"Microsoft.XMLHttp"?];??
  28. ????try?{??
  29. ????????//?高版本ie、firefox、opera等浏览器直接new出ajax对象??
  30. ????????xhr?=?new?XMLHttpRequest();??
  31. ????}?catch?(e)?{??
  32. ????????//?低版本的IE,ie6以下版本需要通过以下操作创建ajax对象??
  33. ????????for?(?var?i?=?0;?i?<?aVersion.length;?i++)?{??
  34. ????????????try?{??
  35. ????????????????xhr?=?new?ActiveXObject(aVersion[i]);??
  36. ????????????????return?xhr;??
  37. ????????????}?catch?(e)?{??
  38. ????????????????continue;??
  39. ????????????}??
  40. ????????}??
  41. ????}??
  42. ????return?xhr;??
  43. }??
  44. 3.ajax处理分页技术案例??
  45. window.onload?=?function()?{??
  46. ????//?获取按钮对象??
  47. ????var?queryBtnDom?=?$("queryBtn");??
  48. ??
  49. ????//?给按钮设置点击事件操作??
  50. ????queryBtnDom.onclick?=?function()?{??
  51. ??
  52. ????????var?content?=?"pagination.nowPage="?+?1;??
  53. ????????var?url?=?"./csdn/UserAction_query.action?time="?+?new?Date().getTime();??
  54. ????????//?调用ajax处理过的请求发送操作??
  55. ????????sendPost(content,?url,?managerSuccess,?managerFail);??
  56. ??
  57. ????????//?处理成功的方法??
  58. ????????function?managerSuccess(xhr)?{??
  59. ????????????//?创建出XML?dom对象??
  60. ????????????var?XMLDom?=?xhr.responseXML;??
  61. ????????????//?创建xml的跟对象??
  62. ????????????var?root?=?XMLDom.documentElement;??
  63. ????????????//?获取跟对象的子节点??
  64. ????????????var?users?=?root.getElementsByTagName("user");??
  65. ????????????//?显示数据操作??
  66. ????????????showUsers(users);??
  67. ??
  68. ????????????//?分页操作??
  69. ????????????//?首页??
  70. ????????????$("firstPage").onclick?=?function()?{??
  71. ????????????????//?给请求的数据重新设一下值，然后重新发送一回请求??
  72. ????????????????content?=?"pagination.nowPage="?+?1;??
  73. ????????????????sendPost(content,?url,?managerSuccess,?managerFail);??
  74. ????????????};??
  75. ????????????//?上一页??
  76. ????????????$("backPage").onclick?=?function()?{??
  77. ????????????????//?给请求的数据重新设一下值，然后重新发送一回请求??
  78. ????????????????content?=?"pagination.nowPage="??
  79. ????????????????????????+?eval(root.getAttribute("nowPage")?+?"-"?+?1);??
  80. ????????????????sendPost(content,?url,?managerSuccess,?managerFail);??
  81. ??
  82. ????????????};??
  83. ????????????//?下一页??
  84. ????????????$("nextPage").onclick?=?function()?{??
  85. ????????????????//?给请求的数据重新设一下值，然后重新发送一回请求??
  86. ????????????????content?=?"pagination.nowPage="??
  87. ????????????????????????+?eval(root.getAttribute("nowPage")?+?"+"?+?1);??
  88. ????????????????sendPost(content,?url,?managerSuccess,?managerFail);??
  89. ??
  90. ????????????};??
  91. ????????????//?末页??
  92. ????????????$("lastPage").onclick?=?function()?{??
  93. ????????????????//?给请求的数据重新设一下值，然后重新发送一回请求??
  94. ????????????????content?=?"pagination.nowPage="??
  95. ????????????????????????+?root.getAttribute("countPage");??
  96. ????????????????sendPost(content,?url,?managerSuccess,?managerFail);??
  97. ????????????};??
  98. ????????}??
  99. ??
  100. ????????function?managerFail(xhr)?{??
  101. ????????????alert("处理失败");??
  102. ????????}??
  103. ??
  104. ????};??
  105. };??
  106. ??
  107. //?封装一个创建Element元素的方法??
  108. function?CE(tag)?{??
  109. ????return?document.createElement(tag);??
  110. }??
  111. //?封装一个创建文本节点的方法??
  112. function?CT(t)?{??
  113. ????return?document.createTextNode(t);??
  114. }??
  115. ??
  116. //?发送请求的方法??
  117. function?sendPost(content,?url,?success,?fail)?{??
  118. ????var?xhr?=?createXHR();??
  119. ????//?触发器??
  120. ????xhr.onreadystatechange?=?function()?{??
  121. ????????if?(xhr.readyState?==?4)?{??
  122. ????????????if?(xhr.status?==?200?||?xhr.status?==?304)?{??
  123. ????????????????success(xhr);??
  124. ????????????}?else?{??
  125. ????????????????fail(xhr);??
  126. ????????????}??
  127. ????????}??
  128. ????};??
  129. ????//?打开请求??
  130. ????xhr.open("POST",?url,?true);??
  131. ????//?设置类型??
  132. ????xhr.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");??
  133. ????//?发送请求??
  134. ??
  135. ????xhr.send(content);??
  136. ????//?};??
  137. }??
  138. ??
  139. //?显示数据的方法??
  140. function?showUsers(users)?{??
  141. ????//?获取tbody的dom对象??
  142. ????var?tbodyDom?=?$("showUsers");??
  143. ????//?清空数据??
  144. ????if?(tbodyDom.hasChildNodes())?{??
  145. ????????for?(?var?jj?=?0;?jj?<?tbodyDom.childNodes.length;)?{??
  146. ????????????tbodyDom.removeChild(tbodyDom.childNodes[jj]);??
  147. ????????}??
  148. ????}??
  149. ??
  150. ????//?遍历添加数据??
  151. ????for?(?var?i?=?0;?i?<?users.length;?i++)?{??
  152. ????????var?user?=?users[i];??
  153. ????????if?(user.nodeType?==?1)?{??
  154. ????????????//?创建tr元素节点??
  155. ????????????var?tr?=?CE("tr");??
  156. ??
  157. ????????????//?创建td元素节点??
  158. ????????????//?创建一个复选框节点??
  159. ????????????var?td1?=?CE("td");??
  160. ????????????var?input?=?CE("input");??
  161. ????????????//?为td1设置属性??
  162. ????????????input.setAttribute("type",?"checkbox");??
  163. ????????????input.setAttribute("value",?user.getAttribute("id"));??
  164. ??
  165. ????????????var?td2?=?CE("td");??
  166. ????????????var?td3?=?CE("td");??
  167. ????????????var?td4?=?CE("td");??
  168. ????????????var?td5?=?CE("td");??
  169. ????????????var?td6?=?CE("td");??
  170. ????????????var?td7?=?CE("td");??
  171. ??
  172. ????????????//?将文本节点追加到td上;这里要注意不能使用方法链追加，否则界面会让你很难受??
  173. ????????????td1.appendChild(input);??
  174. ????????????td2.appendChild(CT(user.getAttribute("id")));??
  175. ????????????td3??
  176. ????????????????????.appendChild(CT(user.getElementsByTagName("name")[0].firstChild.nodeValue));??
  177. ????????????td4??
  178. ????????????????????.appendChild(CT(user.getElementsByTagName("sex")[0].firstChild.nodeValue));??
  179. ????????????td5??
  180. ????????????????????.appendChild(CT(user.getElementsByTagName("email")[0].firstChild.nodeValue));??
  181. ????????????td6??
  182. ????????????????????.appendChild(CT(user.getElementsByTagName("birthday")[0].firstChild.nodeValue));??
  183. ??
  184. ????????????//?将td追加到tr上??
  185. ????????????tr.appendChild(td1);??
  186. ????????????tr.appendChild(td2);??
  187. ????????????tr.appendChild(td3);??
  188. ????????????tr.appendChild(td4);??
  189. ????????????tr.appendChild(td5);??
  190. ????????????tr.appendChild(td6);??
  191. ????????????tr.appendChild(td7);??
  192. ????????????//?将tr节点添加到tbody中??
  193. ????????????tbodyDom.appendChild(tr);??
  194. ????????}??
  195. ????}??
  196. }??
  197. ??
  198. 用户名注册时使用ajax验证处理??
  199. window.onload=function(){??
  200. ????//根据id获取需要用ajax技术处理的数据的dom对象，util.js和reg.js位于同一包下，固可以相互引用??
  201. ????var?uNameDom?=?$("userName");??
  202. ????//为uNameDom注册失去焦点的事件??
  203. ????uNameDom.onblur=function(){??
  204. ????????//将获取到的用户名名称封装成请求数据??
  205. ????????var?content?=?"uName="+uNameDom.value;??
  206. ????????//设置请求路径，并通过时间戳的形式产生唯一url??
  207. ????????var?url?=?"./csdn/UserAction_checkName.action?time="+new?Date().getTime();??
  208. ????????//创建ajax对象??
  209. ????????var?xhr?=?createXHR();??
  210. ??????????
  211. ????????//这里状态为0，状态吗的默认值是0，说明从0变1时才触发onreadystatechange事件??
  212. ????????//alert(xhr.readyState);??
  213. ????????//为xhr对象设置一个触发器事件，改事件服务器自己处理??
  214. ????????xhr.onreadystatechange=function(){??
  215. ????????????//alert(xhr.readyState);状态从1-4执行??
  216. ????????????if(xhr.readyState==4){??
  217. ????????????????if(xhr.status==200||xhr.status==304){??
  218. ????????????????????$("name").innerHTML=xhr.responseText;??
  219. ????????????????}??
  220. ????????????}??
  221. ????????};??
  222. ????????//打开请求??
  223. ????????xhr.open("POST",url,true);??
  224. ????????//如果是post请求需要进行如下操作，告诉浏览器正在发送符合url编码的数据;括号内一个单词不能错，错一个就不能将数据传给servlet了??
  225. ????????xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");??
  226. ????????//发送数据??
  227. ????????xhr.send(content);??
  228. ????};??
  229. };??
  230. ??
  231. Action处理代码??
  232. package?www.csdn.project.action;??
  233. ??
  234. import?java.io.IOException;??
  235. import?java.io.PrintWriter;??
  236. import?javax.servlet.http.HttpServletResponse;??
  237. import?org.apache.struts2.ServletActionContext;??
  238. import?www.csdn.project.domain.User;??
  239. import?www.csdn.project.service.UserService;??
  240. import?www.csdn.project.service.UserServiceImpl;??
  241. import?www.csdn.project.utils.Pagination;??
  242. ??
  243. import?com.opensymphony.xwork2.ActionSupport;??
  244. ??
  245. public?class?UserAction?extends?ActionSupport?{??
  246. ??????
  247. ????private?String?uName;??
  248. ??????
  249. ????//分页的当前页属性,这里一定要指明泛型所指向的类型，否则就会出错??
  250. ????private?Pagination<User>?pagination;??
  251. ??????
  252. ????//声明一个事务对象??
  253. ????private?UserService?service?=?new?UserServiceImpl();??
  254. ??
  255. ????//?通过ServletActionContext类获取response对象，将在action中的操作转向servlet的操作??
  256. ????private?HttpServletResponse?response?=?ServletActionContext.getResponse();??
  257. ??????
  258. ????//声明一个输出对象??
  259. ????private?PrintWriter?out;??
  260. ??????
  261. ??????
  262. ??????
  263. ??
  264. ????public?Pagination<User>?getPagination()?{??
  265. ????????return?pagination;??
  266. ????}??
  267. ??
  268. ????public?void?setPagination(Pagination<User>?pagination)?{??
  269. ????????this.pagination?=?pagination;??
  270. ????}??
  271. ??
  272. ????public?String?getUName()?{??
  273. ????????return?uName;??
  274. ????}??
  275. ??
  276. ????//一定要注意命名规范，set注入方法和get获值的方法首字母一定要大写，否则不起作用切记??
  277. ????public?void?setUName(String?uName)?{??
  278. ????????this.uName?=?uName;??
  279. ????}??
  280. ??????
  281. ??????
  282. ????//登录操作??
  283. ????public?String?login(){??
  284. ????????return?SUCCESS;??
  285. ????}??
  286. ??
  287. ????//检查名字??
  288. ????public?String?checkName()?{??
  289. ??????????
  290. ????????response.setContentType("text/html;charset=utf-8");??
  291. ??????????
  292. ????????//实例化out对象??
  293. ????????try?{??
  294. ????????????out?=?response.getWriter();??
  295. ????????}?catch?(IOException?e)?{??
  296. ????????????e.printStackTrace();??
  297. ????????}??
  298. ??????????
  299. ????????User?entity?=?service.getObjectByName(uName);??
  300. ??
  301. ????????if?(entity?!=?null)?{??
  302. ????????????out.print("用户名已经存在");??
  303. ????????}?else?{??
  304. ????????????out.print("用户名可以使用");??
  305. ????????}??
  306. ????????out.flush();??
  307. ????????out.close();??
  308. ????????return?"reg";??
  309. ????}??
  310. ??????
  311. ??????
  312. ????//查找所有??
  313. ????public?String?query(){??
  314. ??????????
  315. ????????response.setContentType("text/xml;charset=utf-8");??
  316. ????????System.out.println(pagination.getNowPage()+"====================");??
  317. ????????pagination?=?new?Pagination<User>(User.class,pagination.getNowPage());??
  318. ????????//实例化out对象??
  319. ????????try?{??
  320. ????????????out?=?response.getWriter();??
  321. ????????}?catch?(IOException?e)?{??
  322. ????????????e.printStackTrace();??
  323. ????????}??
  324. ??
  325. ????????//拼出xml文件，用来存放从数据库取出的数据??
  326. ????????out.println("<?xml?version='1.0'?encoding='UTF-8'?>");??
  327. ????????out.println("<users?nowPage='"+pagination.getNowPage()+"'?countPage='"+pagination.getCountPage()+"'?countRecond='"+pagination.getCountRecond()+"'>");??
  328. ????????//遍历??
  329. ????????for(User?entity:?pagination.getEntities()){??
  330. ????????????out.print("<user?id='"+entity.getId()+"'>");??
  331. ????????????out.print("<name>");??
  332. ????????????out.print(entity.getName());??
  333. ????????????out.print("</name>");??
  334. ????????????out.print("<sex>");??
  335. ????????????out.print(entity.getSex());??
  336. ????????????out.print("</sex>");??
  337. ????????????out.print("<birthday>");??
  338. ????????????out.print(entity.getBirthday());??
  339. ????????????out.print("</birthday>");??
  340. ????????????out.print("<email>");??
  341. ????????????out.print(entity.getEmail());??
  342. ????????????out.print("</email>");??
  343. ????????????out.print("</user>");??
  344. ????????}??
  345. ????????out.println("</users>");??
  346. ??????????
  347. ????????//刷新out对象，使数据不把缓存中存，直接显示??
  348. ????????out.flush();??
  349. ????????out.close();??
  350. ????????return?"xml";??
  351. ????}??
  352. ??
  353. }??
  354. ??
  355. 分页显示界面??
  356. <%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%>??
  357. <%@?taglib?uri="/struts-tags"?prefix="s"%>??
  358. <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??
  359. <html>??
  360. <head>??
  361. <title>用户管理界面</title>??
  362. ??
  363. <script?type="text/javascript"??
  364. ????src="${?pageContext.request.contextPath?}/js/util.js"></script>??
  365. ??
  366. <script?type="text/javascript"??
  367. ????src="${?pageContext.request.contextPath?}/js/user/query.js"></script>??
  368. </head>??
  369. ??
  370. <body>??
  371. ????<div?align="center">??
  372. ????????<div>??
  373. ????????????<h3>用户管理界面</h3>??
  374. ????????????<input?type="button"?value="会员管理"?id="queryBtn"?/>??
  375. ????????</div>??
  376. ????????<hr>??
  377. ????????<div>??
  378. ????????????<!--?显示从数据库提取的信息然后放到一个xml中再取出遍历的数据?-->??
  379. ????????????<h3>显示数据</h3>??
  380. ????????????<table?bordercolor="teal"?border="1px"?cellspacing="0"??
  381. ????????????????cellpadding="0"?width="800px">??
  382. ????????????????<thead>??
  383. ????????????????????<tr>??
  384. ????????????????????????<th>选择</th>??
  385. ????????????????????????<th>序号</th>??
  386. ????????????????????????<th>姓名</th>??
  387. ????????????????????????<th>性别</th>??
  388. ????????????????????????<th>邮箱</th>??
  389. ????????????????????????<th>生日</th>??
  390. ????????????????????????<th>操作</th>??
  391. ????????????????????</tr>??
  392. ????????????????</thead>??
  393. ????????????????<tbody?id="showUsers"></tbody>??
  394. ????????????</table>??
  395. ????????????<div>??
  396. ??????????????<input?type="button"?value="首页"?id="firstPage"/>??
  397. ??????????????<input?type="button"?value="上一页"?id="backPage"/>??
  398. ??????????????<input?type="button"?value="下一页"?id="nextPage"/>??
  399. ??????????????<input?type="button"?value="末页"?id="lastPage"/>??
  400. ????????????</div>??
  401. ????????</div>??
  402. ????</div>??
  403. </body>??
  404. </html>??
  405. ??
  406. 首界面??
  407. <%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%>??
  408. <%@?taglib?uri="/struts-tags"?prefix="s"%>??
  409. ??
  410. ??
  411. <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??
  412. <html>??
  413. <head>??
  414. ??
  415. ??
  416. <title>My?JSP?'index.jsp'?starting?page</title>??
  417. <meta?http-equiv="pragma"?content="no-cache">??
  418. <meta?http-equiv="cache-control"?content="no-cache">??
  419. <meta?http-equiv="expires"?content="0">??
  420. <meta?http-equiv="keywords"?content="keyword1,keyword2,keyword3">??
  421. <meta?http-equiv="description"?content="This?is?my?page">??
  422. ??
  423. ??
  424. <!--??
  425. ????不能在同一个界面引用多个ajax判断的js，如果这样做会只让下面的js起作用，上面引用的js不在判断，??
  426. ????但是可以在上面js没有window.onload方法的情况可以同存，并且还可以调用它??
  427. ????-->??
  428. ??
  429. ??
  430. <script?type="text/javascript"??
  431. ????src="${?pageContext.request.contextPath?}/js/util.js"></script>??
  432. ??
  433. <script?type="text/javascript"??
  434. ????src="${?pageContext.request.contextPath?}/js/user/reg.js"></script>??
  435. </head>??
  436. ??
  437. <body>??
  438. ????<div?align="center">??
  439. ????????<div>??
  440. ????????????<h3>后台管理登陆界面</h3>??
  441. ??
  442. ????????????<s:form?action="UserAction_login"?namespace="/csdn"?theme="simple">??
  443. ????????????????<table>??
  444. ????????????????????<tr>??
  445. ????????????????????????<td>用户名：</td>??
  446. ????????????????????????<td><s:textfield?id="userName"?name="userName"?/></td>??
  447. ????????????????????????<td?style="color:?red;?font-size:?10px;"?id="name"></td>??
  448. ????????????????????</tr>??
  449. ????????????????????<tr>??
  450. ????????????????????????<td>密码：</td>??
  451. ????????????????????????<td><s:password?id="userPass"?name="userPass"?/></td>??
  452. ????????????????????????<td></td>??
  453. ????????????????????</tr>??
  454. ????????????????????<tr>??
  455. ????????????????????????<td>邮箱：</td>??
  456. ????????????????????????<td><s:textfield?id="userEmail"?name="userEmail"?/></td>??
  457. ????????????????????????<td></td>??
  458. ????????????????????</tr>??
  459. ????????????????????<tr>??
  460. ????????????????????????<td?colspan="3"><s:submit?value="登录【注册】"?/>??
  461. ????????????????????????</td>??
  462. ????????????????????</tr>??
  463. ????????????????</table>??
  464. ????????????</s:form>??
  465. ????????</div>??
  466. ??
  467. ????</div>??
  468. </body>??
  469. </html>
上一篇： 右侧MENU划屏代码 下一篇： Facebook： 2013年度热门签到地点和热门话题回顾
编写ajax同用工具代码以及案例分析
右侧MENU划屏代码
24岁黑客本月推出谷歌眼镜人脸识别工具
MacBook摄像头遭黑成窥探工具 一女生被偷拍裸照泄露
Java 开源工具 Apache Common Lang

发表评论
用户名: 匿名

最新文章
Servlet + Freemarker 入门练习
Servlet..
Java 开源工具 Apache Common Lang
Java 开源..

最新标签
  • 高手
  • 回溯
  • 循环
  • SWT
  • class
  • instance
  • 摄像头
  • NullPointerException
  • 二维码
  • 二进制

    • 今日热点

    推荐文章
    unable to find valid certification path to requested target 的简单解决办法
    unable ..
    老三携剑出山，Swing法力无边
    老..