Page 244 - Web性能权威指南

xhr.responseType = 'blob'; ➊
xhr.onload = function() {
if (this.status == 200) {
var img = document.createElement('img');
img.src = window.URL.createObjectURL(this.response); ➋
img.onload = function() {
window.URL.revokeObjectURL(this.src); ➌
}
document.body.appendChild(img);
}
};

xhr.send();

➊ 将返回数据类型设置为 Blob
➋ 基于返回的对象创建唯一的对象 URI 并设置为图片的源
➌ 图片加载完毕后立即释放对象

注意，这里我们在以原生格式传输一张图片，没有使用 base64 编码，也没有使用数
据 URI，而是在页面中添加了一个 <img> 元素。这样在 JavaScript 中处理接收到的
二进制数据不会产生任何网络传输开销和编码开销！ XHR API 让我们得以通过
脚本高效、动态地开发应用，无论操作什么数据类型都没问题，全部用 JavaScript
搞定！

这里的二进制大对象接口（Blob）属于 HTML5 的 File API，就像一个不
透明的引用，可以指向任何数据块（二进制或文本）。这个对象本身没有太
多功能，只能查询其大小、MIME 类型，或将它切分成更小的块。这个对
象存在的真正目的，是作为各种 JavaScript API 之间的一种高效的互操作
机制。

15.4 通过XHR上传数据

通过 XHR 上传任何类型的数据都很简单，而且高效。事实上，上传不同类型数据
的代码都一样，只不过最后在调用 XHR 请求对象的 send() 方法时，要传入相应的
数据对象。剩下的事就都由浏览器处理了：

var xhr = new XMLHttpRequest();
xhr.open('POST','/upload');
xhr.onload = function() { ... };
xhr.send("text string"); ➊
var formData = new FormData(); ➋

XMLHttpRequest ｜ 231