Ajax操作工具函数总结
编程技术 / houtizong 发布于 3年前 83
- 1.ajaxUtil.js
//定义并创建Ajax核心对象XMLHttpRequest var xmlHttp ; function createXMLHttpRequestObject() { try{ xmlHttp = new XMLHttpRequest(); }catch(e){ var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"); for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++){ try { xmlHttp = new ActiveXObject(XmlHttpVersions[i]); }catch (e) {} } } if (!xmlHttp) alert("Error creating the XMLHttpRequest object"); else return xmlHttp; } //装载字符串，将字符串组成XML的形式返回 function createXML(xmlString) { var xmldoc; try{ xmldoc = new ActiveXObject("Microsoft.XMLDOM"); if(!xmldoc) xmldoc = new ActiveXObject("MSXML2.DOMDocument.3.0"); } catch(e){} if(!xmldoc) { return null; }else { xmldoc.async = "false"; xmldoc.loadXML(xmlString); if(xmldoc.parseError.errorCode == 0) return xmldoc; else return null; }} 2. ajaxDemo.jsp
<%@ page contentType="text/html;charset=GBK" %><%@ taglib prefix="s" uri="/struts-tags" %><% request.setAttribute("path",request.getContextPath()); %><html><head><title>jquery ajax demo</title><link rel="stylesheet" href="${path}/css/nrmcs.css"><script src="${path}/js/jquery.js"></script><script src="${path}/js/ajaxUtil.js"></script><script> /************ajax的jquery版本示例**************************/ /* function check() { var user=document.all.userName.value; var pass=document.all.password.value; $.ajax({ url:"${path}/map/checkUser.action", type:"post", data:"userName="+user+"&password="+pass, success:handleResponse, async: false //异步或同步，默认为true同步，false为异步 }); alert("next"); //如果为异步，则必须等到handleResponse函数执行完毕后，才会执行alert("next"); } function handleResponse(data){ //alert(data); var xmlDoc= createXML(data); //将xml字符串转换为xml对象 var nodes=xmlDoc.selectNodes("datas/data"); var tab=document.getElementById("userTable"); var row,cell; var node; var id,name,pass; for(var i=0;i<nodes.length;i++) { node=nodes[i]; id=node.selectSingleNode("id").text; name=node.selectSingleNode("name").text; pass=node.selectSingleNode("password").text; row=tab.insertRow(); cell=row.insertCell(); cell.innerHTML=id; cell=row.insertCell(); cell.innerHTML=name; cell=row.insertCell(); cell.innerHTML=pass; } } */ /************ajax的原生版本示例**************************/ function check() { var user=document.all.userName.value; var pass=document.all.password.value; createXMLHttpRequestObject(); xmlHttp.open("POST","${path}/map/checkUser.action",false); //false为同步，true为异步 xmlHttp.onreadystatechange=handleResponse; xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("userName="+user+"&password="+pass); // alert("next"); //同步必须等到前面代码执行完后才能执行这一句 } function handleResponseForIE(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ //alert(xmlHttp.responseText); var xmlDoc= createXML(xmlHttp.responseText); //将xml字符串转换为xml对象 var nodes=xmlDoc.selectNodes("datas/data"); var tab=document.getElementById("userTable"); var row,cell; var node; var id,name,pass; for(var i=0;i<nodes.length;i++) { node=nodes[i]; id=node.selectSingleNode("id").text; name=node.selectSingleNode("name").text; pass=node.selectSingleNode("password").text; row=tab.insertRow(); cell=row.insertCell(); cell.innerHTML=id; cell=row.insertCell(); cell.innerHTML=name; cell=row.insertCell(); cell.innerHTML=pass; } } } } function handleResponse(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ alert(xmlHttp.responseText); var xmlDoc= createXML(xmlHttp.responseText); //将xml字符串转换为xml对象 var nodes=xmlDoc.getElementsByTagName("data"); for(var i=0;i<nodes.length;i++) { var node=nodes[i]; var id=node.getElementsByTagName("id")[0].text; var name=node.getElementsByTagName("name")[0].text; var password=node.getElementsByTagName("password")[0].text; alert(id+" "+name+" "+password); } } } } /*$(document).ready( function(){ //$("#userTable").hide(); // $("#userTable").show(); var iWidth = document.body.clientWidth; var iHeight = document.body.clientHeight; var div=document.createElement("div"); document.body.appendChild(div); div.id="myDiv"; div.style.position="absolute"; div.style.border="1px solid #a3bad9"; div.style.left=iWidth/2+298; div.style.top=iHeight/2+204; div.style.width="200"; div.style.height="100"; div.style.backgroundColor="#FFFFCC"; var span=document.createElement("div"); span.style.textAlign="right"; span.innerHTML="<a href='javascript:closeDiv()'>× </a>"; div.appendChild(span); } ); */ function closeDiv(){ document.getElementById("myDiv").style.display="none"; }</script></head><body> userName:<input type="text" name="userName"><br> password:<input type="password" name="password"><br> <input type="submit" value="检查" onclick="check()"> <table id="userTable" border="1" width="50%" cellspacing="0" cellpadding="0"> </table> </body></html> 请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
