FormData、Blob、File、ArrayBuffer数据类型
XMLHttpRequest 1.0
1.0 中xmlhttpRequest有2个重要的返回属性，reposeText,reposeXml。下面的数据类型都是2.0新增的
FormData对象
我们应该都用过jQuery，其中有个方法叫做serialize(), 作用就是表单序列化，也就是以查询字符串形式获得类表单post/get的数据给Ajax请求，例如：userid=123&username=zxx.
FormData对象的作用就类似于这里的serialize()方法，不过FormData是浏览器原生的，且支持二进制文件
实际使用是作为构造函数，如下：
new FormData ([可选]HTMLFormElement)
HTMLFormElement这个参数可选，可有可无。表示form表单元素，就是我们要序列化，要提交的那个表单元素。
var newFormData = new FormData(someFormElement);
newFormData就是someFormElement这个表单元素中所有键值对数据了。
Ajax send formData 的时候 Content-type 应该默认成multipart
<script>
var form=new FormData();
form.append("key","3333");
var xhttp=new XMLHttpRequest();
xhttp.open("POST","http://localhost:3000/",false);
xhttp.onreadystatechange=function () {
if(xhttp.readyState==4){
if(xhttp.status==200){
console.log(xhttp.responseText);
}
else{
console.log(xhttp.status,xhttp.statusText);
}
}
}
console.log(form.toString()); //[Object FormData]
// Content-type 应该默认成multipart，如果不设置默认是multipart. vue-resoure 插件，处理formdata： 如果发生data 是formData 类型就直接删除了 content-type
// xhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded");
xhttp.send(form);
</script>
FormData对象还有一个方法，为append()方法，可以人为的给当前FormData对象添加一个键/值对。
语法如下：
void append(DOMString 键, Blob 值, [可选] DOMString 文件名); void append(DOMString 键, DOMString 值);
Blob 这是用来表示二进制文件的，后面的文件名可选，据说，如果缺省，且传输的是Blob对象，则会使用"blob"代替。
Blob数据对象
一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob, 继承了Blob的功能，并且扩展支持了用户计算机上的本地文件。
创建Blob对象的方法有几种，可以调用Blob构造函数，还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象，还可以调用canvas对象上的toBlob方法。
举个例子，使用Blob从服务器上GET某个图片：
var xhr = new XMLHttpRequest(); xhr.open("get", "mm1.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); eleAppend.appendChild(img); } } xhr.send();
Blob对象有两个属性:
1.size:Blob对象中所包含数据的大小。字节为单位。 只读。
2.一个字符串，表明该Blob对象所包含数据的MIME类型。例如，上demo图片MIME类似就是”image/jpeg“. 如果类型未知，则该值为空字符串。 只读。
构造函数：
Blob也有一个构造函数用法。语法如下：
Blob Blob(
[可选] Array parts,
[可选] BlobPropertyBag properties
);
其中，两个参数的含义是：
parts- 一个数组，包含了将要添加到Blob对象中的数据。数组元素可以是任意多个的ArrayBuffer, ArrayBufferView(typed array), Blob, 或者DOMString对象。
properties- 一个对象，设置Blob对象的一些属性。目前仅支持一个
type属性，表示Blob的类型
方法
Blob对象有个很重要的方法-slice()，作用是，可以实现文件的分割
Blob slice( [可选] long long start, [可选] long long end, [可选] DOMString contentType };
start开始索引，可以为负数，语法类似于数组的slice方法。默认值为0.end结束索引，可以为负数，语法类似于数组的slice方法。默认值为最后一个索引。contentType新的Blob对象的MIME类型，这个值将会成为新的Blob对象的type属性的值，默认为一个空字符串。
显然，此方法返回的数据格式还是Blob对象，不过是指定范围复制的新的Blob对象。注意，如果start参数的值比源Blob对象的size属性值还大，则返回的Blob对象的size值为0，也就是不包含任何数据。
File对象
表示我们使用file控件(<input type="file">)选择的对象，或者是使用拖拽操作搞出的DataTransfer对象。
这里的File对象也是二进制对象，因此，从属于Blob对象，Blob对象的一些属性与方法，File对象同样适合，且推荐使用Blob对象的属性与方法。
属性
File.lastModifiedDate[只读]- 文件对象最后修改的日期
File.name[只读]- 文件对象的名称
Blob.size[只读]
Blob对象包含数据的字节大小
Blob.type[只读]
一个字符串，表明该Blob对象所包含数据的MIME类型
<script> function change(file){ console.dir(file.files[0]); } </script> <body> <input type="file" onchange="change(this)"> </body>
ArrayBuffer对象
ArrayBuffer表示二进制数据的原始缓冲区，该缓冲区用于存储各种类型化数组的数据。
ArrayBuffer是二进制数据通用的固定长度容器。
Blob可以append ArrayBuffer数据，也就是Blob是个更高一级的大分类，类似领导的感觉。ArrayBuffer则是具有某种恶魔果实的尖兵。
下一文章说一下，类型数组typedArray
