Ajax请求的步骤

1. 用 new XMLHttpRequest 创建异步对象

var xhr = new XMLHttpRequest()

2. 设置回调函数

xhr.onreadystatechange = callback

3. 使用open方法与服务器建立连接

//参数一：发送请求的方式：方式分别有post和get
//参数二：请求地址
//参数三：是否是异步提交true:异步，flase:同步提交

// get 方式
xhr.open("get", "test.php", true)

// post 方式发送数据 需要设置请求头
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

4. 用send方法向服务器发送数据

// get 不需要传递参数
xhr.send(null)

// post 需要传递参数
xhr.send("name=jay&age=18")

5. 在回调函数中针对不同的响应状态进行处理

请求状态readyState属性分为五种

• 0.未初始化：异步对象创建出来但是还没有打开连接，（即未调用open方法）

• 1.已初始化：异步对象已经创建并且打开了连接（调用了open方法），但是还没有发送请求（未调用send方法）

• 2.已发送数据：已经调用了send方法，但web服务器响应还未返回

• 3.正在接收：web服务器接收完数据并且处理完毕后，正在向客户端发送响应结果

• 4.接收完毕：当web服务器响应的数据全部接收完毕

代码

function callback() {
  // 判断异步对象的状态
  if(xhr.readyState == 4) {
    // 判断交互是否成功
    if(xhr.status == 200) {
      // 获取服务器响应的数据
      var res = xhr.responseText
      // 解析数据
      res = JSON.parse(res)
    }
  }
}