XMLHttpRequest异步

//创建XMLHttpRequest对象
function createXMLHttpRequest(){
	var xmlHttp=false;
	if (window.ActiveXObject){// 判断是否支持ActiveX控件,在IE浏览器中创建XMLHttpRequest对象
		try{ // 尝试按新版InternetExplorer方法创建
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e){
			try{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//code for IE5 and IE6 
			}
			catch(ee){
				xmlHttp=false;
			}
		}
    }
	else if (window.XMLHttpRequest){//判断是否把XMLHTTPRequest实现为一个本地javascript对象,在非IE浏览器中创建XMLHttpRequest对象
		try{
			xmlHttp = new XMLHttpRequest();                      
		}
		catch(e){
			xmlHttp=false;
		}
    }
    return xmlHttp;
} 	

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'XMlHttp.jsp' starting page</title>
    <script type="text/javascript" src="/js/xmlhttp.js"></script>
    <script>
    var xmlHttp=false;
    //---解析文本
    function txtParse(){
		xmlHttp=createXMLHttpRequest();   //调用创建XMLHttpRequest对象的方法
		xmlHttp.onreadystatechange=callbackTxt;   //设置回调函数
		xmlHttp.open("post","Ajax.txt",true);      //向服务器端发送请求,true:按异步方式发送,可省略
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");//需要加
		xmlHttp.send(null);	
}	
  function callbackTxt(){//回调函数
		if(xmlHttp.readyState==4){//数据接受成功
			if(xmlHttp.status==200){//请求成功
               var data=xmlHttp.responseText;//解析中文有乱码
               var pNode=document.getElementById("displayTxt");
               // alert(pNode.firstChild);null
               pNode.innerHTML="<font color=red>"+data+"</font>"; //var test=document.createTextNode(data);pNode.appendChild(test);
			}
		}		
	}
	//---解析xml
	function xmlParse(){
		xmlHttp=createXMLHttpRequest();    //调用创建XMLHttpRequest对象的方法
		xmlHttp.onreadystatechange=callbackXml;   //设置回调函数
		xmlHttp.open("get","Ajax.xml");      //向服务器端发送请求
		xmlHttp.send(null);	
	//以表格形式列出
	function callbackXml(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
               var xmlDoc = xmlHttp.responseXML;
               var stus = xmlDoc.getElementsByTagName("student");
               var rowSize=stus.length;
               var tab=document.createElement('table');//创建表格[在FireFox有问题]
               tab.setAttribute("width", "250");
               tab.setAttribute("border", "1");
               tab.insertRow(0); //0行
               tab.rows[0].insertCell(0); //列0
               tab.rows[0].cells[0].innerHTML="姓名";
               tab.rows[0].insertCell(1); //列1
               tab.rows[0].cells[1].innerHTML="性别";
               tab.rows[0].insertCell(2); //列2
               tab.rows[0].cells[2].innerHTML="年龄";
               for(var i=1;i<=rowSize;i++){ 
               tab.insertRow(i); //行
               for(var n=0;n<3;n++){ 
                     var data=stus[i-1].childNodes[n].firstChild.nodeValue;//获取数据firstChild.data
                     tab.rows[i].insertCell(n); //列
                     tab.rows[i].cells[n].innerHTML=data; 
                } 
              } 
              var divNode=document.getElementById("displayXml");
              divNode.appendChild(tab);
               
			}
		}		
	}
}
//--验证用户名
      function validateName(val){
			var url="isExistName.jsp?name="+val;
				url=encodeURI(encodeURI(url)); //必须进行两次转码,兼容IE、FireFox 
				sendRequest(url);
      }
  //发送客户端的请求
  var XMLHttpReq=false;
      function sendRequest(url) {
          	XMLHttpReq=createXMLHttpRequest(); 
            XMLHttpReq.open("get", url, true);
            //XMLHttpReq.abort();
            //指定响应函数
            XMLHttpReq.onreadystatechange = handleResponse;
            // 发送请求
            XMLHttpReq.send(null); 
       }
      //处理服务器响应结果
       function handleResponse() {
        // 判断对象状态
        if (XMLHttpReq.readyState == 4) { 
            // 信息已经成功返回,开始处理信息
           if (XMLHttpReq.status == 200) { 
               //var res = XMLHttpReq.responseXML;
               // var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;
               //document.getElementById("nameResult").innerHTML = response;
              document.getElementById("nameResult").innerHTML=XMLHttpReq.responseText;
               }
         }
       }
   </script>
  </head>
  <body>
    <center>
       <button onclick="txtParse()">解析文本</button>
       <div id="displayTxt" align="center"></div>
       <hr width="100%" size="1" noshade style="border:1px dashed #cccccc;"/> 
        <button onclick="xmlParse()">解析Xml</button>
       <div id="displayXml" align="center"></div>
       <hr width="100%" size="1" noshade style="border:1px dashed #cccccc;"/> 
       <input type="button" value="检测用户名" onClick="validateName('我是帅哥');" /><br> 
       <font color="red"><span id="nameResult"></span></font>  
    </center>
  </body>
</html>


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'isExistName.jsp' starting page</title>
  </head>
  <body>
    <% 
    	String name = request.getParameter("name");
		name = java.net.URLDecoder.decode(name,"UTF-8");
        out.print(name);
    %>
  </body>
</html>

你可能感兴趣的:(jsp,Ajax,浏览器,IE,firefox)