AJAX的核心对象是XMLHttpRequest, 这个对象在目前的所有浏览器都支持，只是IE6 和 IE5的写法不一样而已。

使用AJAX一般按照下面 4个步骤 使用即可。

一. 步骤1：创建XMLHttpRequest对象

​ 这个对象从IE5开始支持，后来各大浏览器都进行了跟进。IE7+和chrome、firefox写法一样，IE6以前的浏览器一种写法。实际开发中，一般使用如下的兼容写法。

function createXHR() {
  if(window.XMLHttpRequest) {
    //标准浏览器创建XMLHttpRequest对象的方式
      return new XMLHttpRequest();
  }else{
    //IE5和IE6的创建方式
     return new ActiveXObject("Microsoft.XMLHTTP");
  }
}

二. 步骤2：调用open方法

/*调用open方法
* 参数1：请求方法，一般是get或post
* 参数2：请求是url
* 参数3：是否为异步。true表示异步，默认是true异步。
*/
xhr.open("GET", "msg.json", true);

注意：

• URL相对于执行代码的当前页面（当然也可以使用绝对路径）；
• 调用 open() 方法并不会真正发送请求，而只是启动一个请求以备发送。
• 如果使用绝对路径,则一定要和当前页面的协议、主机和端口完全一致，否则会出现错误。

三. 步骤3：监听请求状态(onreadystatechange)

​xhr.onreadystatechange监听请求状态，根据状态来确定数据获得之后要做的事情。

xhr.readyState的值保存了xhr的状态。一共有5种状态，每个状态用1个整数来表示

• 0 未初始化。对象new出来了，但是还没有调用open方法
• 1 启动。 已经调用open，但是还没有调用send方法
• 2 发送。 已经send方法，但是还没有接收到相应
• 3 接收。 已经开始接收数据，但是还没有完全接收。
• 4 完成。 已经完全接收数据。

作为开发者，我们一般只关注 第4种 状态。

//监听状态
xhr.onreadystatechange = function () {
      // 如readyState的值为4，表示已经接收完数据，可以开始对数据处理。
    if(xhr.readyState == 4){
          // xhr.status 保存了服务的响应码，  200表示正常响应  
        if(xhr.status == 200){
            alert(xhr.responseText);
        }
    }
}

注意：步骤2和步骤3可以调换顺序。

四. 步骤4：调用send方法发送请求

//send方法才是真的的发起网络请求。 参数：请求的时候向服务区传递的参数。 如果是get请求，直接传入null即可。
xhr.send(null);