手写实现AJAX

• ajax返回的状态(例如下面的 xhr.readyState)
  0 － （未初始化）还没有调用send()方法
  1 － （载入）已调用send()方法，正在发送请求

  2 － （载入完成）send()方法执行完成，已经接收到全部响应内容

  3 － （交互）正在解析响应内容

  4 － （完成）响应内容解析完成，可以在客户端调用了

• 简单流程

  // 实例化
  let xhr = new XMLHttpRequest()
  // 初始化
  xhr.open(method, url, async)
  // 发送请求
  xhr.send(data)
  // 设置状态变化回调处理请求结果
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText)
    }
  }
  

• 基于promise实现

  function ajax (options) {
    // 请求地址
    const url = options.url
    // 请求方法
    const method = options.method.toLocaleLowerCase() || 'get'
    // 默认为异步true
    const async = options.async
    // 请求参数
    const data = options.data
    // 实例化
    const xhr = new XMLHttpRequest()
    // 请求超时
    if (options.timeout && options.timeout > 0) {
      xhr.timeout = options.timeout
    }
    // 返回一个Promise实例
    return new Promise ((resolve, reject) => {
      xhr.ontimeout = () => reject && reject('请求超时')
      // 监听状态变化回调
      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4) {
          // 200-300 之间表示请求成功，304资源未变，取缓存
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            resolve && resolve(xhr.responseText)
          } else {
            reject && reject()
          }
        }
      }
      // 错误回调
      xhr.onerror = err => reject && reject(err)
      let paramArr = []
      let encodeData
      // 处理请求参数
      if (data instanceof Object) {
        for (let key in data) {
          // 参数拼接需要通过 encodeURIComponent 进行编码
          paramArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
        }
        encodeData = paramArr.join('&')
      }
      // get请求拼接参数
      if (method === 'get') {
        // 检测url中是否已存在 ? 及其位置
        const index = url.indexOf('?')
        if (index === -1) url += '?'
        else if (index !== url.length -1) url += '&'
        // 拼接url
        url += encodeData
      }
      // 初始化
      xhr.open(method, url, async)
      // 发送请求
      if (method === 'get') xhr.send(null)
      else {
        // post 方式需要设置请求头
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
        xhr.send(encodeData)
      }
    })
  }