Ajax中与服务器的通信【发送请求与处理响应】

一、发送请求

Ajax中通过XMLHttpRequest对象发送异步方式的后台请求时。通常有两种方式的请求，一种是GET请求，另一种是POST请求。发送请求一般要经过4个步骤分别是：

（1）初始化XMLHttpRequest对象

（2）为XMLHt指定一个返回结果的回调函数，用于返回结果的处理

（3）创建一个与服务器的连接。指定发送的请求是GET还是POST且是否采用异步方式发送请求

（4）向服务器发送请求。

 <script type="text/javascript">

     function checkBrowerType(){
         //第一步：初始化XMLHttpRequest对象
         var http_request = false;
         if(window.XMLHttpRequest){                  //非IE浏览器; 在调用window.ActiveXObject将返回一个对象，或是null（如果返回一个对象则为true，返回null则为false）
             http_request = new XMLHttpRequest();    //创建XMLHttpRequest对象

         }else if(window.ActiveXObject){
             try{
                 http_request = new ActiveXObject("Msxml2.XMLHTTP");    //创建XMLHttpRequest对象
             }catch(e){
                 try{
                     http_request = new ActiveXObject("Microsoft.XMLHTTP");    //创建XMLHttpRequest对象
                 }catch(e){

                 }
             }
         }
         if(!http_request){
             alert("不能创建XMLHttpRequest对象实例");
             return false;
         }
         //第二步：设置回调函数
         http_request.onreadystatechange = getResult;    //调用返回处理函数
         /*
             注意：如果XMLHttpRequest对象的onreadystatechange属性指定回调函数时，
             不能指定要传递的参数。如果要指定参数可以使用以下方法：
             http_request.onreadystatechange = function(){
             getResult(param)
         };
         */

         //第三步：创建一个与服务器的连接,（请求采用GET或POST请求方式，以及是否采用异步方式）
         http_request.open("GET",url,true);
         //第四步：向服务器发送请求
         http_request.send(null);
     }
     /*编写回调函数getResult（）*/
     function getResult(){

     }
 </script>

查看代码

小技巧：在建立与服务器的连接时，指定open(“method”，“url” ，async)中的url参数时，最好将一个时间戳追加到该url参数后面，这样可以防止因浏览器缓存结果而不能实时得到最新的结果。例如：可以这样指定url参数：String url="deal.jsp?nocache="+new Date().getTime();

二、处理服务器的响应

在处理服务器响应时需要通过XMLHttpRequest对象的onreadystatechange属性指定一个回调函数，用来处理服务器响应。在这个回调函数中，首先需要判断服务器的请求状态，保证请求已经完成；然后根据服务器的HTTP状态码，判断服务器对请求响应是否成功，如果成功，则获取服务器的响应反馈给客户。

XMLHttpRequest中提供了两种访问服务器响应的属性：一个是responseText属性，返回字符串响应；另一个是responseXML属性，返回XML响应。

（1）处理字符串响应

例如：

 function getResult(){
     if(http_request.readyState == 4){    //判断请求状态
         if(http_request.status == 200){    //请求成功，开始处理返回结果
             alert(http_request.responseText);    //显示判断结果
         }else{
             alert("请求的页面有错误！");
         }
     }
 }

（2）处理XML响应

如果在服务器端需要生成特别负责的响应，则就要应用XML响应。

例：保存图书信息到XML文档中，并且使用回调函数将XML中的信息读取出来。

①XML中的图书信息，代码如下：

 <?xml version="1.0" encoding="UTF-8"?>
 <mr>
     <books>
         <book>
             <title>Java Web程序开发</title>
             <publisher>人民邮电出版社</publisher>
         </book>
         <book>
             <title>Java从入门到精通</title>
             <publisher>人民邮电出版社</publisher>
         </book>
     </books>
 </mr>

②在回调函数中遍历保存图书信息的XML文档，并将其显示到页面中，代码如下：

 <script type="text/javascript">
         function getResult(){
             //判断请求状态
             if(http_request.readyState == 4){
                 //请求成功，开始处理响应
                 if(http_request.status == 200){
                     var xmldoc = http_request.responseXML;
                     var str = "";
                     for(int i=0;i<xmldoc.getElementsByTagName("book").length;i++){
                         var book = xmldoc.getElementsByTagName("book").item(i);
                         str = str + "《"+book.getElementsByTagName("title")[0].firstChild.data + "》 由“"
                             +book.getElementByTagName("publisher")[0].firstChild.data + "” 出版<br>";
                     }
                     document.getElementById("book").innerHTML = str;    //显示图书信息
                 }else{
                     alert("请求的页面有错误！");
                 }    

             }
         }
 </script>
 <div id="book"></div>