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[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="检查" onclick="check()">
  <table id="userTable" border="1" width="50%" cellspacing="0" cellpadding="0">
  </table>
 
</body>
</html>

你可能感兴趣的:(jquery,Ajax,xml,struts,Microsoft)