XHR2那些事儿

XMLHttpRequest Level 2

使用AJAX好多年了吧，相信创建一个请求监听什么状态都驾轻就熟了，还有什么好说的呢。问题来源于最近公司在优化图片上传的接口。所以来总结以下XMLHttpRequest Level 2的一些东西。

Formdata

AJAX 操作往往用来传递表单数据。为了方便表单处理，HTML 5新增了一个 FormData 对象，可以用于模拟表单。

1
var formData = new FormData(form)

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。

1
2
3
4
5
var input = document.getElementById("input"),
    formData = new FormData();
formData.append("file",input.files[0]); // file名称与后台接收的名称一致
xhr.open('POST', form.action);
xhr.send(formData);

Progress

XHR 对象提供了一系列 API，用于监听进度事件，progress表示请求的传输中状态：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var xhr = new XMLHttpRequest();
xhr.open('GET','/resource');
xhr.timeout = 5000; // 设置超时时间
xhr.addEventListener('load', function() { ... }); // 传输成功监听
xhr.addEventListener('error', function() { ... }); // 传输错误监听
var onProgressHandler = function(event) {
  if(event.lengthComputable) {
    var progress = (event.loaded / event.total) * 100; // 传输中监听回掉函数
    ...
  }
}
xhr.upload.addEventListener('progress', onProgressHandler); // 上传传输中监听
xhr.addEventListener('progress', onProgressHandler); // 下载传输中监听
xhr.send();

知道progress可以干啥了吧。只要event.lengthComputable为true，就能拿到传输数据的进度啦。

当然XHR2还有以下特征:

  • 可以设置HTTP请求的超时时间。
  • 可以使用FormData对象管理表单数据。
  • 可以上传文件。
  • 可以请求不同域名下的数据（跨域请求）。
  • 可以获取服务器端的二进制数据。
  • 可以获得数据传输的进度信息。

好好玩吧~