JavaScript第七章：Ajax

Ajax的优势在于：对于页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容，而不会打断用户的浏览体验。

1.XMLHttpRequest对象

这个对象充当着浏览器的脚本（客户端）与服务器之间的中间人的角色。JavaScript通过这个对象可以自己发送请求，同时自己处理响应。

①不同浏览器实现XMLHttpRequest对象的方式不一样，需要些不同的代码分支。

  <!DOCTYPE html>
  <head>
    <meta charset="utf-8"/>
    <title>Ajax</title>
  </head>
  <body>
     <div id="new"></div>
     <script src="scripts/addLoadEvent.js"></script>
     <script src="scripts/getHTTPObject.js"></script>
     <script src="scripts/getNewContent.js"></script>
  </body>
  </html>

微软在IE5中以ActiveX对象形式实现了名为XMLHTTP的对象，在IE中创建新的对象要使用下列代码：

 var request=new ActiveXObject("Msxml2.XMLHTTP.3.0");

其他浏览器则基于XMLHttpRequest来创建对象：

 var request=new XMLHttpRequest();

不同IE版本中使用的XMLHTTP对象也不完全相同。因此getHTTPObject函数要这样写：

function getHTTPObject(){
    if(typeof XMLHttpRequest=="undefined")
      XMLHttpRequest=function(){
         try{
            return new ActiveXObject("Msxml2.XMLHTTP.6.0");
           }catch(e){}
         try{
            return new ActiveXObject("Msxml2.XMLHTTP.3.0");
           }catch(e){}
         try{
           return new ActiveXObject("Msxml2.XMLHTTP");
          }catch(e){}
      return false;
     }
    return new XMLHttpRequest();
  }

②XMLHttpRequest方法

XMLHttpRequest对象有许多方法，最常用的就是open方法。它用来指定服务器上将要访问的文件，指定请求类型：GET、POST或SEND。第三个参数是用来指定请求是否以异步的方式发送和处理。

  function getNewContent(){
     var request=getHTTPObject();
     if(request){
        request.open("GET","example.txt",true);
     //页面加载完成后，会发出一个GET请求，请求与ajax.js位于同一目录的example.txt
        request.onreadystatechange=function(){
        if(request.readyState==4){
               var para=document.createElement("p");
               var txt=document.createTextNode(request.responseText);
               para.appendChild(txt);
               document.getElementById('new').appendChild(para);
             }
       };
  /*onreadyStatechange是一个事件处理函数，会在服务器给XMLHttpRequest对象送回响应时
  被触发执行  */   
     request.send(null);
  /* 指定了请求的目标和如何处理响应，就可以用send方法发送请求了 */
   }else{
     alert('Sorry,your browser doesn\'t support XMLHttpRequest');
   }
}

addLoadEvent(getNewContent);

服务器在向XMLHttpRequest对象发回响应时，该对象有许多属性可用。浏览器会在不同阶段更新readyState属性的值，它有五个值：

0表示未初始化
1表示正在加载
2表示加载完毕
3表示正在交互
4表示完成

只要readyState属性的值变成了4，就可以访问服务器发送回来的数据。

访问服务器发送回来的数据要通过两个属性完成，一个是responseText属性，这个属性用于保存文本字符串形式的数据。另一个是responseXML属性，用于保存Content-Type头部中指定为“text/xml”的数据，其实是一个DocumentFragment对象。而是用各种DOM方法来处理这个对象。

③异步请求

异步请求的一个容易被忽略的问题是异步性，就是脚本在发送XMLHttpRequest请求，仍会继续执行，不会等待响应返回。

为了证明这点，可以在request.onreadystatechange处理函数中和getNewContent函数的最后各添加一个警告框。

function getNewContent(){
     var request=getHTTPObject();
     if(request){
        request.open("GET","example.txt",true);
        request.onreadystatechange=function(){
        if(request.readyState==4){
               alert("Reponse Received")
               var para=document.createElement("p");
               var txt=document.createTextNode(request.responseText);
               para.appendChild(txt);
               document.getElementById('new').appendChild(para);
             }
       };  
     request.send(null);
   }else{
     alert('Sorry,your browser doesn\'t support XMLHttpRequest');
   }
  alert("Function Done");
}

加载下页面，很可能Function Done的警告框会先于Response Received的警告框出现。这就证明了脚本不会等待send的响应，而是会继续执行。

2.渐进增强与Ajax

能通过Ajax实现的应用一定能通过非Ajax技术来实现。

如果一开始设计就以Ajax为起点，那么以后很难把它从成品站点中剥离出来，再额外提供一个不适用Ajax的版本。但是，如果一开始应用就是基于老式的页面刷新机制构建的，那么就可以在既有框架上，用Ajax拦住发送到服务器的请求，并将请求转交给XMLHttpRequest对象处理。这种情况下，Ajax功能就扮演了一个位于常规站点之上的层。

因此，构建Ajax网站的最好办法，也是先构建一个常规的网站，然后Hijax它。