# Ajax 的使用步骤

<script>
  // 用这个接口地址来做示范
  const url = "https://api.vvhan.com/api/douban";
 
  // 首先Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，
  // XMLHttpRequest,它是一个构造函数,ajax异步网络请求，需要借助这个函数的一些方法
  const xhr = new XMLHttpRequest();

  // 准备发送请求xhr,open(), 里面三个参数, 第一个是请求方法, 第二个是请求的地址, 第三个是是否异步, true 代表异步
  xhr.open("get", url, true);
  // 准备好以后，开始发送,send() 的参数是通过请求体携带的数据
  xhr.send(null);
  // 当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理
  // 发送以后xhr开始处理响应
  //   readystatechange 事件监听 readyState 这个状态(readyState的状态不是http响应的状态码)的变化

  // 它的值从 0 ~ 4，一共 5 个状态

  // 0：未初始化。尚未调用 open()

  // 1：启动。已经调用 open()，但尚未调用 send()

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

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

4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了

我们只关心状态 4 */
xhr.onreadystatechange = () => {
    // 处理响应的第一步，首先看xhr的状态(readyState)如果不是4，直接返回
    if (xhr.readyState !== 4) {
      //
      return;
    }
    // 如果能走到这一步，再看状态码，2xx  304都可以，都是可以处理响应的
    // 等号不要漏了，不然报错
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      // 处理请求
      // 正常响应的数据, 会放在 xhr.responseText 里面
      console.log("已经接收到数据");
      console.log(xhr.responseText);
    }
  };
</script>

一般是xhr.send（）之前，先监听，所以把xhr.onreadystatechange(){}提到发送之前，修改代码如下

<script>
  // 用这个接口地址来做示范
  const url = "https://api.vvhan.com/api/douban";
 
  // 首先Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，
  // XMLHttpRequest,它是一个构造函数,ajax异步网络请求，需要借助这个函数的一些方法
  const xhr = new XMLHttpRequest();
  // 当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理
  // 发送以后xhr开始处理响应
  //   readystatechange 事件监听 readyState 这个状态(readyState的状态不是http响应的状态码)的变化

  // 它的值从 0 ~ 4，一共 5 个状态

  // 0：未初始化。尚未调用 open()

  // 1：启动。已经调用 open()，但尚未调用 send()

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

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

4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了

我们只关心状态 4 */
xhr.onreadystatechange = () => {
    // 处理响应的第一步，首先看xhr的状态(readyState)如果不是4，直接返回
    if (xhr.readyState !== 4) {
      //
      return;
    }
    // 如果能走到这一步，再看状态码，2xx  304都可以，都是可以处理响应的
    // 等号不要漏了，不然报错
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      // 处理请求
      // 正常响应的数据, 会放在 xhr.responseText 里面
      console.log("已经接收到数据");
      console.log(xhr.responseText);
    }
  };
  // 准备发送请求xhr,open(), 里面三个参数, 第一个是请求方法, 第二个是请求的地址, 第三个是是否异步, true 代表异步
  xhr.open("get", url, true);
  // 准备好以后，开始发送,send() 的参数是通过请求体携带的数据
  xhr.send(null);

</script>