原生创建 XHR 过程

来源：高级程序设计第三版 571 页

/**
 * 封装原生 XHRHttpReqest 对象请求数据
 * @param { 请求路径 } url 
 * @param { 请求方法 } method 
 */
function request (url, method) {
  // 获取 XMLHttpRequest 对象的实例
  const xhr = new XMLHttpRequest()

  /**
   * open 方法 接收三个参数
   * 1、method 请求类型
   * 2、url 请求地址
   * 3、async 是否要异步发送请求，false 表示同步， true 表示异步
   *    同步时，Javascript 在发送请求后继续等待浏览器的响应，不做其他操作
   *    异步时，Javascript 在发送请求后会做其他操作，直到浏览器响应后，才
   *    继续请求那边的操作
   * 作用
   *    open 方法会启动一个针对 url 的请求
   *    但不会真正的发送请求，只是启动状态，以备发送 
   */
  xhr.open(method, url)

  /**
   * send 方法接收一个参数，该参数作为请求主体发送
   *      由于该参数对于某些浏览器是必须的，所以不想
   *      发送参数，可以传入 null
   */
  xhr.send(null)

  /**
   * XMLHttpRequest 对象的 readyState 属性
   *    表示请求/响应过程的当前活动阶段
   *    xhr.readyState 每次改变都会触发 onreadystatechange 事件
   *    0：未初始化，尚未调用 open 方法
   *    1：启动，已调用 open 方法，未调用 send 方法
   *    2：发送，已调用 send 方法，但尚未接收到响应
   *    3、接收，已接收到部分相应数据
   *    4、完成，已接收到全部的响应数据，且可以在浏览器端使用了 
   */

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      /**
       * http 状态码在 200 的区间都是请求成功的状态
       * 状态码 304 表示缓存文件
       */
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        console.log(xhr)
        console.log(JSON.parse(xhr.responseText))
      } else {
        console.log('request was unsuccessful:' + xhr.status)
      }
    }
  }
}

// 执行方法，请求数据
request('./index.json', 'get')

image.png