一、创建 ajax 对象

在 IE 中可能会遇到三种不同版本的 XHR 对象，即 MSXML2.XMLHttp 、MSXML2.XMLHttp.3.0 和 MXSML2.XMLHttp.6.0 。所以在创建对象时，有兼容问题：

<xmp>
var xhr = new XMLHttpRequest();   //for ie6 以上
var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6
</xmp>

合并上面的代码：

<xmp>
var xhr= null;
if(window.XMLHttpRequest){
    xhr= new XMLHttpRequest();
}else{
    xhr= new ActiveXObject('Microsoft.XMLHTTP');
}
</xmp>

二、连接服务器

在使用 XHR 对象时，要调用的第一个方法是 open() ，open() 方法有三个参数，第一个参数是连接方法即 GET 和 POST，第二个参数是 URL 即所要读取数据的地址，第三个参数是否异步，它是个布尔值，true 为异步，false 为同步。

<xmp>
xhr.open("get", "example.php", true);
</xmp>

三、发送请求

要发送特定的请求，必须像下面这样调用 send() 方法：

<xmp>
xhr.send(null);
</xmp>

这里的 send() 方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null ，因为这个参数对有些浏览器来说是必需的。

四、接收返回值

当请求被发送到服务器时，我们需要执行一些基于响应的任务。onreadystatechange 事件。检测 XHR 对象的 readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

参数	描述
0	未初始化,尚未调用 open() 方法。
1	启动,已经调用 open() 方法，但尚未调用 send() 方法。
2	发送,已经调用 send() 方法，但尚未接收到响应。
3	接收,已经接收到部分响应数据。
4	完成,已经接收到全部响应数据，而且已经可以在客户端使用了。

在接收到响应后，第一步是检查 status 属性，以确定响应已经成功返回。
200 => 成功
304 => 资源并没有被修改
为确保接收到适当的响应，应该像下面这样检查上述这两种状态代码：

<xmp>
xhr.open("get", "example.txt", false);
xhr.send(null);
if (xhr.status === 200 || xhr.status == 304){
    alert("Request was successful: " + xhr.status);
} else {
    alert("Request was faild: " + xhr.responseText);
}
</xmp>

五、HTTP头部信息

每个 HTTP 请求和响应都会带有相应的头部信息:

参数	描述
Accept	浏览器能够处理的内容类型。
Accept-Charset	浏览器能够显示的字符集。
Accept-Encoding	浏览器能够处理的压缩编码。
Accept-Language	浏览器当前设置的语言。
Connection	浏览器与服务器之间连接的类型。
Cookie	当前页面设置的任何 Cookie。
Host	发出请求的页面所在的域 。
Referer	发出请求的页面的 URI。注意，HTTP 规范将这个头部字段拼写错了，而为保证与规范一致，也只能将错就错了。（这个英文单词的正确拼法应该是 referrer。）
User-Agent	浏览器的用户代理字符串。

六、进度事件

参数	描述
loadstart	在接收到响应数据的第一个字节时触发。
progress	在接收响应期间持续不断地触发。
error	在请求发生错误时触发。
abort	在因为调用 abort() 方法而终止连接时触发。
load	在接收到完整的响应数据时触发。
loadend	在通信完成或者触发 error 、 abort 或 load 事件后触发。

<xmp>
var xhr = createXHR();
xhr.onload = function(){
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
  } else {
    alert("Request was unsuccessful: " + xhr.status);
  }
};
xhr.open("get", "altevents.php", true);
xhr.send(null);
</xmp>

七、AJAX函数整合封装

<xmp>
function ajax(url, fnSucc, fnFaild){
    //1.创建对象
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
      
    //2.连接服务器  
    xhr.open('GET', url, true);   //open(方法, url, 是否异步)
      
    //3.发送请求  
    xhr.send(null);
      
    //4.接收返回
    xhr.onreadystatechange = function(){  //OnReadyStateChange事件
        if(xhr.readyState == 4){  //4为完成
            if(xhr.status == 200 || xhr.status==304){    //200为成功
                fnSucc(xhr.responseText) 
            }else{
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    };
}

//调用
ajax('abc.txt',function(str){
   oCon.innerHTML = str;
});
</xmp>