2015-06-15

XMLHttpRequest 2.0

在十几年前，一个称为Ajax的东西对前端行业造成了深远影响，不仅是javascript语言，而包括前端地位、职位兴起以及工作分工等。抛开IE早期的浏览器不谈，其他浏览器的Ajax实际上都是借助XMLHttpRequest实现的。
在XMLHttpRequest 1.0时代（暂时这么叫吧），XMLHttpRequest配套着DOMString和Document数据类型，所向披靡，无处不在。
关于DOMString和Document数据类型请猛戳。
DOMString和Document都是XMLHttpRequest 1.0时代的数据类型，元老级。我们这里主要谈一下XMLHttpRequest 2.0新增的！

FormData对象

XMLHttpRequest 2.0添加了一个新的接口FormData。利用FormData对象，我们可以通过JavaScript动态创建一个表单控件，还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”。比起普通的ajax, 使用FormData的最大优点就是我们可以异步上传一个二进制文件。

以上为官方的解释，很简洁。我们应该都用过jQuery，其中有个方法叫做serialize(), 作用就是表单序列化，也就是以查询字符串形式获得类表单post/get的数据给Ajax请求，例如：userid=123&username=ojz.
FormData对象的作用就类似于这里的serialize()方法，不过FormData是浏览器原生的，且支持二进制文件，这就是让人很惊喜的地方！兼容性：IE10+浏览器和其他主流浏览器。

用FormData替换页面form提交的代码示例：

document.querySelector("#formData").addEventListener("submit", function(event) {
    var myFormData = new FormData(this); // 用一个已有的 form 元素来初始化 FormData 对象，只需要把这个 form 元素作为参数传入 FormData 构造函数即可
    var xhr = new XMLHttpRequest();
    xhr.open(this.method, this.action);
    xhr.onload = function(e) {
        if (xhr.status == 200 && xhr.responseText) {
			document.querySelector("#msg").innerHTML = "欢迎你，" + xhr.responseText;
            this.reset();
        }
    }.bind(this);
    // 发送FormData对象数据
    xhr.send(myFormData);
    // 阻止默认的表单提交
    event.preventDefault();
}, false);

FormData对象还有一个append()方法，可以人为的给当前FormData对象添加一个键/值对，说白了就是添加表单中的text对象。
语法如下：

1 2	void append(DOMString键, Blob值, [可选]DOMString文件名); void append(DOMString键, DOMString值);

添加字段的值可以是一个 Blob 对象，File对象或者字符串，剩下其他类型的值都会被自动转换成字符串，具体示例代码如下：

var oMyForm = new FormData();
 
oMyForm.append("username", "test");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"
 
oMyForm.append("userfile", fileInputElement.files[0]); // fileInputElement中已经包含了用户所选择的文件
 
var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});
 
oMyForm.append("webmasterfile", oBlob);
 
var oReq = new XMLHttpRequest();
oReq.open("POST", "/submitform.php");
oReq.send(oMyForm);

Blob数据对象

1
2

一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob, 继承了Blob的功能，并且扩展支持了用户计算机上的本地文件。
创建Blob对象的方法有几种，可以调用Blob构造函数，还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象，还可以调用canvas对象上的toBlob方法。

以上为MDN上官方解释。实际上，Blob是计算机界通用术语之一，全称写作：BLOB (binary large object)，表示二进制大对象。MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。
在实际Web应用中，Blob更多是图片二进制形式的上传与下载，虽然其可以实现几乎任意文件的二进制传输。
举个例子，使用Blob从服务器上GET一张美女的图片：

var xhr = new XMLHttpRequest();    
xhr.open("get", "meinv.jpg", true);
xhr.responseType = "blob";
xhr.onload = function() {
    if (this.status == 200) {
        var blob = this.response;  // this.response也就是请求的返回就是Blob对象
        var img = document.createElement("img");
        img.onload = function(e) {
          window.URL.revokeObjectURL(img.src); // 清除释放
        };
        img.src = window.URL.createObjectURL(blob);
        document.querySelector("#div").appendChild(img);    
    }
}
xhr.send();

参考页面：
[1].理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
[2].[JS进阶] JS 之Blob 对象类型

感谢您的阅读，有不足之处请在评论为我指出！

yangyuji

一个屌丝，码农，程序猿

XMLHttpRequest 2.0

FormData对象

Blob数据对象