ajax

前端之家收集整理的这篇文章主要介绍了ajax前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
ajax(全称:Asynchronous JavaScript and XML--非同步JavaScript与XML)     一:页面ajax代码流程(String传输): .创建引擎             IE6浏览器创建ajax引擎方式:                 if(window.XMLHttpRequest){                       xmlreq = new XMLHttpRequest();                   } else if(window.ActiveXObject){                       xmlreq = new ActiveXObject("Microsoft.XMLHttp");                   }               IE8+,FF8+浏览器穿件ajax引擎方式:                   var xmlhttp = new XMLHttpRequest(); .设置请求参数:1,设置传送方式(get,post).2,设置url.3,设置是否异步传送               get:                   xmlhttp.open("get","${pageContext.request.contextPath }/login.do?userName="+document.getElementById("userName").value,true);               post:                   xmlhttp.open("post","${pageContext.request.contextPath }/login.do",true);                   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); .设置服务器的回应处理: .onreadystatechange:可以监听到服务器的响应状态,以便于客户端浏览器实时监听到交互 .xmlhttp.readyState:交互状态  1,准备交互.2,开始交互.3,服务器运算中.4,处理结束 .xmlhttp.status:200,成功.404,资源未找到 .关羽XMLRequest引擎对象返回值问题:xmlhttp.responseText:普通文本.xmlhttp.responseXML:接收XML               xmlhttp.onreadystatechange = function () {                   if(xmlhttp.readyState == 4){                       if(xmlhttp.status == 200){                           document.getElementById("userNameSpan").innerText = xmlhttp.responseText;                           }                       }else{                           alert("服务器出错...");                       }                   }                   else{                       alert("数据处理中");                   }               }; .传送数据:               get:                   xmlhttp.send(null);               post:                   xmlhttp.send("userName="+document.getElementById("userName").value);             例子:         function aMethod(){               //1.创建Ajax引擎               var xmlhttp = new XMLHttpRequest();               //2.设置请求参数               xmlhttp.open("post",true);               xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");               //3.设置服务器的回应处理               xmlhttp.onreadystatechange = function () {                   if(xmlhttp.readyState == 4){                       if(xmlhttp.status == 200){                           var msg = xmlhttp.responseText;                           document.getElementById("userNameSpan").innerText = msg;                       }else{                           alert("服务器出错...");                       }                   }               };               //4.发送数据               xmlhttp.send("userName="+document.getElementById("userName").value);           }           页面中文本域挂失焦点事件:<input type="text" name="userName" onblur="aMethod()" id="userName"/>           后台Action类中传送数据逻辑:               boolean isOk = false;             if("scott".equalsIgnoreCase(userName)){                 isOk = true;             }             response.getWriter().print(isOk);                 二:xml传送数据:         页面代码:(解析xml格式数据)              <script type="text/javascript">                   function aMethod(){                       var xmlhttp = new XMLHttpRequest();                       xmlhttp.open("post","${pageContext.request.contextPath }/xml.do",true);                       xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");                       xmlhttp.onreadystatechange = function(){                           if(xmlhttp.readyState == 4){                               if(xmlhttp.status == 200){                                   //如果传回的是xml格式的数据,要使用responseXML进行接收,此时接到的数据为xml对象                                   var msg = xmlhttp.responseXML;                                   //取得根元素                                 var rootElement = msg.documentElement;                                 //取得子元素方式:元素对象.getElementsByTagName("tagName");                                 var childElements = rootElement.getElementsByTagName("test");                                 //取得tbody                                 var tbody = document.getElementById("tbodyId");                                 //循环,取得每个元素--元素.getAttribute("");                                 for(var i=0;i<childElements.length;i++){                                     var childElement = childElements[i];                                     var id = childElement.getAttribute("id");                                     var name = childElement.getAttribute("name");                                     var age = childElement.getAttribute("age");                                     var sex = childElement.getAttribute("sex");                                     var birthday = childElement.getAttribute("birthday");                                                                         var tr = document.createElement("tr");                                     tr.align = "center";                                     var td1 = document.createElement("td");                                     var td2 = document.createElement("td");                                     var td3 = document.createElement("td");                                     var td4 = document.createElement("td");                                     var td5 = document.createElement("td");                                                                         td1.innerHTML = id;                                     td2.innerHTML = name;                                     td3.innerHTML = age;                                     td4.innerHTML = sex;                                     td5.innerHTML = birthday;                                                                         tr.appendChild(td1);                                     tr.appendChild(td2);                                     tr.appendChild(td3);                                     tr.appendChild(td4);                                     tr.appendChild(td5);                                                                         tbody.appendChild(tr);                                 }                               }                           }                       };                       xmlhttp.send("1=1");                   }              </script>              <body onload="aMethod()">                   <table border="2" cellspacing="0" bgcolor="blue" width="60%" align="center">                       <thead>                           <tr align="center">                               <td>编号</td>                               <td>姓名</td>                               <td>年龄</td>                               <td>性别</td>                               <td>生日</td>                           </tr>                       </thead>                       <tbody id="tbodyId">                       </tbody>                   </table>              </body>         后台Action类中:             String xmlHeader = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";             xmlHeader +="<tests>";             for(Test l : list){                 String test = "<test id='"+l.getId()+"' name='"+l.getName()+"' age='"+l.getAge()+"' sex='"+l.getSex()+"' birthday='"+l.getBirthday()+"' ></test>";                 xmlHeader += test;             }             xmlHeader +="</tests>";             //发送数据:response.setContentType("application/xml;charset=utf-8");--以xml形式发送,设置编码utf-8             response.setContentType("application/xml;charset=utf-8");             response.getWriter().print(xmlHeader);             response.getWriter().flush();

猜你在找的Ajax相关文章