Ajax

1.XHR对象

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象要像下面这样使用XMLHttpRequest构造函数；

1 var xhr = new XMLHttpRequest();

假如你想支持IE的早期版本，XHR对象是通过MSXML库中的一个ActiveX对象来实现的。IE中可能遇到3中不同版本的XHR对象（MSXML2.XMLHttp.6.0, MSXML2.XMLHtt.3.0, MSXML2.XMLHttp），那么可以在createXHR()函数中加入原生XHR对象的支持：

 1  function createXHR(){
 2      //首先检测原生XHR对象是否存在，如果存在则返回它的新实例
 3             if (typeof XMLHttpRequest != "undefined"){
 4                 return new XMLHttpRequest();
 5             } else if (typeof ActiveXObject != "undefined"){
 6                  //如果原生对象不存在，则检测ActiveX对象
 7                 if (typeof arguments.callee.activeXString != "string"){
 8                     var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
 9                                     "MSXML2.XMLHttp"];
10           
11                     for (var i=0,len=versions.length; i < len; i++){
12                         try {
13                             var xhr = new ActiveXObject(versions[i]);
14                             arguments.callee.activeXString = versions[i];
15                             return xhr;
16                         } catch (ex){
17                             //skip
18                         }
19                     }
20                 }
21             
22                 return new ActiveXObject(arguments.callee.activeXString);
23             } else {
24                 throw new Error("No XHR object available.");
25             }
26         }

 var xhr = createXHR(); //在所有浏览器中建立xhr对象

2.XHR的用法:

1 xhr.open("get", "example.txt", "true");//启动一个请求以备发送
2 xhr.send(null);  //调用send()发送特定的请求

open()的3个参数：要发送请求的类型("get"、"post"等)、请求的URL和表示异步发送请求的布尔值(false:同步、true:异步)。

注意：一、URL相对于执行代码的当前页面（也可以使用绝对路径）；二、调用open()方法并不会真正发送请求，而只启动一个请求以备发送。

send()接受一个参数，座位请求主体发送的数据。如果不要通过请求主体发送数据，则必须传入null。

接收到响应后，第一部是检查status属性，以确定响应成功返回。HTTP状态代码为200表示成功，状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本。

 1  var xhr = createXHR();    //在所有浏览器中建立xhr对象
 2         
 3         //确保跨浏览器兼容性，必须在调用open()之前指定onreadystatechange事件处理程序
 4         xhr.onreadystatechange = function(){
 5              if (xhr.readyState == 4){
 6                 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
 7                     alert(xhr.responseText);
 8                 } else {
 9                     alert("Request was unsuccessful: " + xhr.status);
10                 }
11             }
12         };
13         
14         xhr.open("get", "example.txt", true);//启动一个请求以备发送
15         xhr.send(null);  //调用send()发送特定的请求

以上代码利用DOM0级方法为XHR对象添加事件处理程序，原因是并非所有的浏览器都支持DOM2级方法。

xHR的readystate属性表示请求/响应过程的当前活动阶段。可取值如下：

0：未初始化，尚未调用open()方法。

1：启动。已调用open()方法，尚未调用send()方法。

2：发送。已调用send()方法，但尚未接收到响应。

3：接收。已接收到部分响应数据。

4：完成。已接收到全部响应数据，而且已经可以再客户端使用。