使用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()'>× </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>

Ajax操作工具函数总结