XMLHttpRequest Level2新特性

认识 XMLHttpRequest Level2

旧版 XMLHttpRequest 的缺点

1. 只支持文本数据的传输，无法用来读取和上传文件
2. 传送和接收数据时，没有进度信息，只能提示有没有完成

XMLHttpRequest Level2的新功能

1. 可以设置 HTTP 请求的时限
2. 可以使用 FormData 对象管理表单数据
3. 可以上传文件
4. 可以获得数据传输的进度信息

设置 HTTP 请求时限

有时，Ajax 操作很耗时，而且无法预知要多少时间。如果网速很慢，用户可能要等很久。新版本的 xhr 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限。

xhr.timeout = 3000

上面的语句将最长等待时间设为 3000 毫秒，过了这个时限就自动停止 HTTP 请求。与之配套的还有 timeout 事件，用来指定回调函数。

  let xhr = new XMLHttpRequest()
  // 请求时限
  xhr.timeout = 20
  // 超过时限的回调函数
  xhr.ontimeout = () => {
    alert('请求--失败--超时')
  }
  xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
  xhr.send()
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }

FormData 对象管理表单数据

Ajax 操作往往用来提交表单数据。为了方便表单处理，H5 新增了一个 FormData 对象，可以模拟表单操作。

  // 创建 FormData 实例
  let fd = new FormData()
  // 调用 append 函数
  fd.append('uname', 'zs')
  fd.append('upwd', '123456')

  let xhr = new XMLHttpRequest()
  xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata')
  xhr.send(fd)
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }

FormData 也可以用来获取网页表单的值。

  document.querySelector('#form').addEventListener('submit', e => {
    // 阻止默认行为
    e.preventDefault()

    // 获取表单数据
    let fd = new FormData(document.querySelector('#form'))

    // 创建
    let xhr = new XMLHttpRequest()
    // 配置
    xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata')
    // 发送
    xhr.send(fd)
    // 监听事件
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
      }
    }
  })

上传文件

新版 XMLHttpRequest 对象，还可以上传文件，实现步骤：

1. 定义 UI 结构
2. 验证是否选择了文件
3. 向 FormData 中追加文件
4. 使用 xhr 发起上传文件的请求
5. 监听 onreadystatechange 事件

  <!-- 页面UI -->
  <input type="file" id="file" />
  <button id="btnUpload">上传文件</button>
  <br />
  <img src="" id="img" width="800" />
  <script>
    let btn = document.querySelector('button')
    btn.addEventListener('click', () => {
      // 获取文件
      let files = document.querySelector('#file').files
      // 如果files的长度小于等于0那么就是没有选择要上传的文件
      if (files.length <= 0) return alert('选择要上传的文件')

      let fd = new FormData()
      // 将选择的文件添加到fd里
      fd.append('avatar', files[0])

      let xhr = new XMLHttpRequest()
      // 配置
      xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
      // 发送请求
      xhr.send(fd)
      // 监听 onreadystatechange 事件
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          // 如果返回数据的状态码等于200那么就是上传成功
          if (data.status === 200) {
            // 将图片地址赋值给img
            document.querySelector('img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            console.log('图片上传失败' + data.message);
          }
        }
      }
    })
  </script>

显示文件上传进度

新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取文件的上传进度。

let xhr = new XMLHttpRequest()
xhr.upload.onprogress = e => {
    if(e.lengthComputable){
        let precentComplete = Math.ceil((e.loaded / e.total) * 100)
    }
}

e.lengthComputable：是一个布尔值，表示当前上传的资源是否具有可计算的长度。

e.loaded：已传输的字节。

e.total：需要传输的总字节。