Ajax操作工具函数总结

penghuaiyi · 发表于 2013-1-23 02:45:31

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()'>×&nbsp;</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="检查" > <table id="userTable" border="1" width="50%" cellspacing="0" cellpadding="0"> </table> </body></html>

		自动登录	找回密码
密码			立即注册