当前位置:首页 > 开发 > Web前端 > Ajax > 正文

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

发表于: 2013-12-19   作者:AILIKES   来源:转载   浏览次数:
摘要: 1. 初始化XMLHttpRequest对象模版   function   createXmlHttpRequest(){      var xmlHttp;      try{   
  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>

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
一个项目从搭建开始,开发的初期往往思路比较清晰,代码也比较清晰。随着时间的推移,业务越来越复
一个项目从搭建开始,开发的初期往往思路比较清晰,代码也比较清晰。随着时间的推移,业务越来越复
之前看ogitor ,第一次看到那么多代码~~不知道从哪里下手,而且好多东西都不会Ogre什么的都不是很清
作者:Justin 出处:http://justinw.cnblogs.com/ 原文如下: 从John Resig的Deep Tracing of Inter
Source-Navigator是原来redhat开发的一个源代码管理分析工具,它可以在Windows,Linux等多种平台下
Understand 2.0是一款源码阅读分析软件,功能强大。试用过一段时间后,感觉相当不错,确实能够大大
Understand 2.0是一款源码阅读分析软件,功能强大。试用过一段时间后,感觉相当不错,确实能够大大
Understand 2.0是一款源码阅读分析软件,功能强大。试用过一段时间后,感觉相当不错,确实能够大大
Understand 2.0是一款源码阅读分析软件,功能强大。试用过一段时间后,感觉相当不错,确实能够大大
http://www.ooso.net/archives/522 http://www.cnblogs.com/sunvince/archive/2011/04/07/2037616.h
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号