Ajax操作工具函数总结
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); }catch (e) {} }}if (!xmlHttp) alert("Error creating the XMLHttpRequest object");elsereturn 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; elsereturn 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; 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; 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; var id=node.getElementsByTagName("id").text; var name=node.getElementsByTagName("name").text; var password=node.getElementsByTagName("password").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>
页:
[1]