XMLHttpRequest的相关属性介绍
作者:互联网
XMLHttpRequest是ajax核心技术,是页面实现不属性请求的利器。带领我们前端从一个可有可无的尴尬局面走向完全独立职位的引路者。现在让我们来介绍一下XMLHttpQuest的相关属性。
1、DOMString
作为XMLHttpRequest的元老之一,DOMString类型的返回值类似于String类型,XMLHttpRequest在请求成功后通过responseText返回。MDN官方解释其为UTF-16的字符串,官方网址为:https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString
实例如下:
2、Document
这里的Document实际是responseText返回的XML结果,如上关于Document对象的解释,近似的可以看成是Document的类型,也是XMLHttpRequest的元老之一。
下面讲解的是XMLHttpRequest在HTML5之后新增的属性,包括file, formData, ArrayBuffer, blob.
3、File
这里的file,指文件,是通过<input type="file" />选择文件后返回的fileList对象,也可以是拖拽操作生成的DataTransfer对象,file是特殊的blob对象,继承自Blob。所以Blob对象的方法和属性也同样适用于file对象。
file的属性:
1、File.name 只读返回当前 File 对象所引用文件的名字。
2、File.size 只读
3、File.type 只读返回文件的 多用途互联网邮件扩展类型(MIME Type)
file的方法:
1、slice()方法:返回一个新的 Blob 对象,它包含源 Blob 对象中指定范围内的数据。
2、可以使用FileRender异步读取FIle或Blob对象指定的文件,FileRender对象包含了以下方法:
2.1、FileReader.readAsArrayBuffer() 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象
2.2、FileReader.readAsDataURL() 开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
2.3、FileReader.readAsText() 开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。
2.4、FileReader.readAsBinaryString() 已弃用
4、FormData
FormData对象的主要作用是将需要提交的数据转为以键值对拼接的形势。类似于jQuery的serialize()方法生成的字符串,长成这样“foo=1&bar=2”。
FormData实例化函数为new FormData(form),可以直接通过form表单来进行实例化,返回一个list对象并能通过ajax进行异步提交。
通过append()方法为FormData添加key/value键值对,该方法有两种形式:
1、append(name, blobValue, [可选]filename)
2、append(name, value)
第一种形式可以增加二进制对象的数据,filename可选,表示传给服务器的文件名称, 当一个Blob或File被作为第二个参数的时候,Blob对象的默认文件名是"blob"。File对象的默认文件名是该文件的名称。
注意: 如果你指定一个 Blob 作为数据添加到 FormData 对象中, 文件名会被放在 "Content-Disposition" 头部(常常会根据浏览器变化而变化)传给服务器。
如下所示:
第二种比较常规,直接使用字符串代替即可:
myFormData.append('token', 'sdfsdfdsfgg'),这样后台即可收到token的值'sdfsdfdsfgg'
5、ArrayBuffer
ArrayBuffer包含两点解释:
1、ArrayBuffer表示二进制数据的缓存区,该缓存区用于存储各种类型化数组数据
2、ArrayBuffer是一种固定长度的二进制容器,这里的固定长度是指ArrayBuffer存储的类型化数组的长度固定,通常使用byteLength来获取。
那么, ArrayBuffer到底是用来做什么的呢?ArrayBuffer主要是用来在内存种缓存数据的,即:将数据提前按固定的长度写入内存中,当需要用到时直接从内存中读取而不是请求。这个缓存的二进制数据可以按8位,16位,32位进行转换,值依然不变。但是ArrrayBuffer对象不能直接对缓存的数据进行操作,需要借助类型数组(TypedArray)或DataView对象来进行操作。
类型化数组,作为访问二进制数据而设计的一组数据类型。它包括:
名称 |
大小 (以字节为单位) |
说明 |
Int8Array |
1 |
8位有符号整数 |
Uint8Array |
1 |
8位无符号整数 |
Int16Array |
2 |
16位有符号整数 |
Uint16Array |
2 |
16位无符号整数 |
Int32Array |
4 |
32位有符号整数 |
Uint32Array |
4 |
32位无符号整数 |
Float32Array |
4 |
32位浮点数 |
Float64Array |
8 |
64位浮点数 |
在本质上ArrayBuffer和TypedArray是一样的,只不过ArrayBuffer只能做数据源,而TypedArray可以进行读写操作,他俩的本质可以通过以下的例子来说明:
var b = new ArrayBuffer(8)
// 创建一个指向b的视图v1,使用int32类型,开始于默认的字节索引0,直至缓冲区的末尾
var v1 = new Int32Array(b)
// 创建一个指向b的视图v2,使用uint8类型,开始于默认的字节索引2,直至缓冲区的末尾
var v2 = new Uint8Array(b, 2)
// 创建一个指向b的试图v3,使用int16类型,开始于默认的字节索引2,字节长度为2
var v3 = new int16Array(b, 2, 2)
上面代码里的数据结构如下所示:
变量 |
索引 |
|||||||
|
字节(不可索引 |
|||||||
b= |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
|
类型数组 |
|||||||
v1= |
0 |
1 |
||||||
v2= |
0 |
1 |
2 |
3 |
4 |
5 |
||
v3= |
|
0 |
1 |
|
TypedArray直接访问固定内存中的数据,因此速度很快。对于XMLHttpRequest2,canvas,WebGL有着天然的速度优势。
DataView:
DataVIew可以在ArrayBufer的任意位置读取和写入不同类型的二进制数据。
语法如下:
var dv = new DataView(buffer [, byteOffset [, byteLength]])
其中: buffer就是ArrayBuffer
byteOffset 可此 DataView 对象的第一个字节在 buffer 中的字节偏移。如果未指定,则默认从第一个字节开始。
byteLength 可此 DataView 对象的字节长度。如果未指定,这个视图的长度将匹配buffer的长度。
最后,ArrayBuffer也可以直接实例化,即 new ArrayBuffer(length),它的实例包含了byteLength属性,表示实例化后对象的字节长度,不可改变。如:
var arrayBuffer = new ArrayBuffer(10)
console,log(arrayBuffer)
blob
一个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某mm的图片(重点查看图片url生成部分):
var xhr = new XMLHttpRequest();
var eleAppend = document.querySelector('body')
var imgSrc = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp06%2F2006292003305493-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637486285&t=89f366eb49e3587b29d79bb6d4b7d6b9'
xhr.open("get", imgSrc, 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);
console.log(img.src, 'blob::', blob)
eleAppend.appendChild(img);
}
}
xhr.send();
上述代码涉及XMLHttpRequest 2一些重要知识点,以及window.URL相关技术,都是可以深入挖掘学习的部分。
但是,并不是所的图片都能以Blob形式请求,因为,毕竟是Ajax请求嘛,还是有一定的跨域限制。XMLHttpRequest 2虽然支持跨源资源共享(CORS),但是,还是需要对Access-Control-Allow-Origin的设置,允许来自那个域名的这类请求,例如,允许本人的站点Blob请求你服务器上的图片资源,你可以设置:
Access-Control-Allow-Origin: http://zhangxinxu.com
要允许任何域向您提交请求,可以设置:
Access-Control-Allow-Origin: *
我们都知道CSS3的font-face属性,在Firefox浏览器下,如果字体文件跨域(包括跨子域),是显示不出来的,也是通过
Access-Control-Allow-Origin: *
设置解决。其实,本质是一样的。
属性
Blob.size 只读
Blob 对象中所包含数据的大小(字节)。
Blob.type 只读
一个字符串,表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知,则该值为空字符串。
构造函数
与FormData对象类似,Blob也有一个构造函数用法。语法如下:
Blob Blob(
[可选] Array parts,
[可选] BlobPropertyBag properties
)
);
例如:
var myBlob= new Blob(arrayBuffer);
其中,两个参数的含义是:
parts一个数组,包含了将要添加到Blob对象中的数据。数组元素可以是任意多个的ArrayBuffer, ArrayBufferView(typed array), Blob, 或者DOMString对象。properties一个对象,设置Blob对象的一些属性。目前仅支持一个type属性,表示Blob的类型
方法
Blob对象有个很重要的方法-slice(),作用是,可以实现文件的分割!
这个slice()有一段不堪回首的历史,不过现在大家不要关心。目前的slice()方法已经跟JS中数组啊,字符串的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,也就是不包含任何数据。
需要继续探索的知识点:window.URL TypedArray, FIleRender,XMLHttpRequest 2 Canvas, WebGL
参考链接
https://developer.mozilla.org/zh-CN/docs/DOM/DOMString
https://developer.mozilla.org/en-US/docs/Web/API/document
https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/FormData
https://developer.mozilla.org/zh-CN/docs/DOM/Blob
https://developer.mozilla.org/en-US/docs/Web/API/File
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
http://technet.microsoft.com/zh-cn/ie/br212474
https://developer.mozilla.org/en-US/docs/Web/API/ArrayBuffer
http://blog.csdn.net/hfahe/article/details/7421203
https://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/
标签:XMLHttpRequest,字节,对象,ArrayBuffer,介绍,Blob,var,属性 来源: https://www.cnblogs.com/zhangjs/p/15440231.html