深入理解xhr responseType blob arrayBuffer document text json使用

客官°小女子只卖身不卖艺 2023-10-10 08:29 122阅读 0赞

一般的xhr请求

上面代码处理一般的xhr请求足够满足，即返回类型为DOMString的，但是处理视频下载并且存储后播放就会有问题，上面代码处理异步视频下载有两个bug

服务器端下载视频，存储到本地，然后再播放，下载存储后播放不了。debug后发现是responseType未正确设置。

认识responseType  
设置该值能够改变响应类型（关键这句话）。就是告诉服务器你期望的响应格式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96eWM4OC5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]

# responseType值的类型 #

XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。

当将responseType设置为一个特定的类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容呢?恭喜你，你会发现服务器返回的数据变成了null，即使服务器返回了数据。还有一个要注意的是，给一个同步请求设置responseType会抛出一个InvalidAccessError 的异常.

### DOMString ###

> **`DOMString `**是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 一个[`String`][String]。

也就是说，在Ajax中，DOMString就等同于JS中的普通字符串。

### ArrayBuffer(又称**类型化数组**) ###

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。`ArrayBuffer` 不能直接操作，而是要通过[类型数组对象][Link 1]或 [`DataView`][DataView] 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

用构造函数来创建一个指定字节长度的 ArrayBuffer 对象。　new ArrayBuffer()
    
    从本地文件读取， 利用FileReader.readAsArrayBuffer()，开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
    
    从base64 字符串获取
    通过ajax请求获取  设置responseType 为  ArrayBuffer 类型

二进制数组由三类对象组成。

（1）`ArrayBuffer`对象：代表内存之中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组接口，这意味着，可以用数组的方法操作内存。

（2）`TypedArray`视图：共包括9种类型的视图，比如`Uint8Array`（无符号8位整数）数组视图, `Int16Array`（16位整数）数组视图, `Float32Array`（32位浮点数）数组视图等等。

（3）`DataView`视图：可以自定义复合格式的视图，比如第一个字节是 Uint8（无符号8位整数）、第二、三个字节是 Int16（16位整数）、第四个字节开始是 Float32（32位浮点数）等等，此外还可以自定义字节序。

简单说，`ArrayBuffer`对象代表原始的二进制数据，TypedArray视图用来读写简单类型的二进制数据，`DataView`视图用来读写复杂类型的二进制数据。

TypedArray 视图支持的数据类型一共有9种（`DataView`视图支持除`Uint8C`以外的其他8种）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96eWM4OC5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1][]

详细介绍见如链接：

[https://blog.csdn.net/qiphon3650/article/details/78454273][https_blog.csdn.net_qiphon3650_article_details_78454273]

### Blob（Binary Large Object）： 二进制大数据对象 ###

blob的具体使用可参考如下两篇文章：

[https://segmentfault.com/a/1190000011563430][https_segmentfault.com_a_1190000011563430]

[https://www.cnblogs.com/hhhyaaon/p/5928152.html][https_www.cnblogs.com_hhhyaaon_p_5928152.html]

一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。

`Blob`** **对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。[`File`][File] 接口基于`Blob`，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

要从其他非blob对象和数据构造一个`Blob`，请使用 [`Blob()`][Blob] 构造函数。

要创建包含另一个blob数据的子集blob，请使用 [`slice()`][slice]方法。

要获取用户文件系统上的文件对应的`Blob`对象，请参阅 [`File`][File]文（`File` 对象是特殊类型的 `Blob）`

Blob对象可以看做是存放二进制数据的容器，但是是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上File是继承自Blob。此外还可以通过Blob设置二进制数据的MIME类型

构造函数创建blob：

var blob = new Blob(dataArr:Array<any>, options:{type:string})

Blob对象

Blob也是比较有意思，mdn上的解释是Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。

参数说明：

dataArray：数组，包含了要添加到Blob对象中的数据，数据可以是任意多个ArrayBuffer，ArrayBufferView， Blob，或者 DOMString对象。
    optons：可选项。
       type：默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。
       endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； "transparent"，表示会保持blob中保存的结束符不变。
    document：
    实际上就是XMLHttpRequest中数据返回属性之responseXML，也就是可以解析为XML的数据。因此，这里的Document数据类似你就可以近似看成XML数据类型。通过xhr.responseXML 获取

\_其实就是英文Binary large Object，mysql有此类型数据结构

let blog = new Blob(arrya, options);  
  
Blob() 构造函数返回一个新的 Blob 对象。

array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
    
    options 是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：

**type**，默认值为 ""，它代表了将会被放入到blob中的数组内容的**MIME**类型。
    
    ArrayBuffer涉及面比较广，ArrayBuffer代表内存之中的一段二进制数据，一旦生成不能再改。可以通过视图（TypedArray和DataView）进行操作。
    
    TypedArray数组只是一层视图，本身不储存数据，它的数据都储存在底层的ArrayBuffer对象之中, 所以通过同一个arraybuffer生成的TypedArray共享内存数据。

nodejs中的buffer是对Uint8Array的实现。

正确的video流打开方式  
还有一点xhr.responseText的类型为DOMString，只有当responseType为DOMString时才有正确数据，其他类型获取响应实体用xhr.response。因为一般我们都是获取json字符串，此处也需要注意下。  
so正确的代码如下：

项目中的video都存储在移动设备中，如果都放在blob中，会造成内存的大量占用，因是cordova的webapp形式，故采用插件cordova-plugin-file，  
相关写文件代码如下

读文件代码

## 使用JavaScript类型数组接受二进制数据[节][Link 2] ##

可以通过设置一个XMLHttpRequest对象的 `responseType`属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer", "blob", "document","json" 和 "text". `response属性的值会根据``responseType属性包含实体主体（entity body）`, 它可能会是一个 `ArrayBuffer`, `Blob`, `Document`,`JSON`, string,或者为`NULL(如果请求未完成或失败)`

下例读取了一个二进制图像文件,并且由该文件的二进制原生字节创建了一个8位无符号整数的数组.注意，这不会解码图像，但会读取像素。 你需要一个png解码库（[png decoding library][]）。

另一种方法是使用[`Blob`][Blob 1]接口直接构造一个接收arraybuffer 数据的 `Blob`。

var oReq = new XMLHttpRequest();
    oReq.open("GET", "/myfile.png", true);
    oReq.responseType = "arraybuffer";
    
    oReq.onload = function(oEvent) {
      var blob = new Blob([oReq.response], {type: "image/png"});
      // ...
    };
    
    oReq.send();

也可以通过给responseType属性设置为“blob”，将二进制文件读取为[`Blob`][Blob 1]类型的数据。

var oReq = new XMLHttpRequest();
    oReq.open("GET", "/myfile.png", true);
    oReq.responseType = "blob";
    
    oReq.onload = function(oEvent) {
      var blob = oReq.response;
      // ...
    };
    
    oReq.send();

## 在老的浏览器中接受二进制数据[节][Link 3] ##

下面的`load_binary_resource()方法`可以从指定的URL那里加载二进制数据,并将数据返回给调用者.

function load_binary_resource(url) {
      var req = new XMLHttpRequest();
      req.open('GET', url, false);
      //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
      req.overrideMimeType('text/plain; charset=x-user-defined');
      req.send(null);
      if (req.status != 200) return '';
      return req.responseText;
    }

最为奇妙的操作在第五行,该行重写了默认的MIME类型,强制浏览器将该响应当成纯文本文件来对待, 使用一个用户自定义的字符集.这样就是告诉了浏览器,不要去解析数据,直接返回未处理过的字节码.

var filestream = load_binary_resource(url);
    var abyte = filestream.charCodeAt(x) & 0xff; // 扔掉的高位字节(f7)

上例从请求回来的二进制数据中得到偏移量为x处的字节.有效的偏移量范围是0到`filestream.length-1`.

查看 [使用XMLHttpRequest下载文件][XMLHttpRequest] 了解详情,查看[下载文件][Link 4].

## 发送二进制数据[节][Link 5] ##

XMLHttpRequest对象的`send方法`已被增强,可以通过简单的传入一个[`ArrayBuffer`][ArrayBuffer], [`Blob`][Blob 1], 或者 [`File`][File]对象来发送二进制数据.

下例创建了一个文本文件,并使用`POST方法将该文件发送到了服务器上`.你也可以使用文本文件之外的其他二进制数据类型.

var oReq = new XMLHttpRequest();
    oReq.open("POST", url, true);
    oReq.onload = function (oEvent) {
      // 上传完成后.
    };
    
    var bb = new BlobBuilder(); // 需要合适的前缀: window.MozBlobBuilder 或者 window.WebKitBlobBuilder
    bb.append('abc123');
    
    oReq.send(bb.getBlob('text/plain'));

## 将类型数组作为二进制数据发送[节][Link 6] ##

你可以将JavaScript类型数组作为二进制数据发送出去.

var myArray = new ArrayBuffer(512);
    var longInt8View = new Uint8Array(myArray);
    
    for (var i=0; i< longInt8View.length; i++) {
      longInt8View[i] = i % 255;
    }
    
    var xhr = new XMLHttpRequest;
    xhr.open("POST", url, false);
    xhr.send(myArray);

上例新建了一个512字节的8比特整数的数组并发送它,当然,你也可以发送任意的二进制数据.

**注意:** 从Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)开始,添加了使用XMLHttpRequest发送 [`ArrayBuffer`][ArrayBuffer]对象的功能.

## Firefox私有方法[节][Link 7] ##

下面的例子使用了`POST`请求,用Firefox私有的非标准方法`sendAsBinary()`将二进制数据以异步模式传输了出去.

var req = new XMLHttpRequest();
    req.open("POST", url, true);
    // 这里应该设置适当的MIME请求头
    req.setRequestHeader("Content-Length", 741);
    req.sendAsBinary(aBody);

第四行将Content-Length请求头设置为741,表示发送的数据长度为741个字节.你应该根据你要发送的数据的大小改变这个值.

第五行使用`sendAsBinary()`方法发送这个请求.

你也可以通过将一个`nsIFileInputStream`对象实例传给[`send()`][send]方法来发送二进制内容,这样的话,你不需要自己去设置`Content-Length请求头`的大小,程序会自动设置:

// 新建一个文件流.
    var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                           .createInstance(Components.interfaces.nsIFileInputStream);
    stream.init(file, 0x04 | 0x08, 0644, 0x04); // file是一个nsIFile对象实例   
    
    // 设置文件的MIME类型
    var mimeType = "text\/plain";
    try {
      var mimeService = Components.classes["@mozilla.org/mime;1"]
              .getService(Components.interfaces.nsIMIMEService);
      mimeType = mimeService.getTypeFromFile(file); // file是一个nsIFile对象实例
    }
    catch (oEvent) { /* 丢弃异常,使用默认的text/plain类型 */ }
    
    // 发送    
    var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
                        .createInstance(Components.interfaces.nsIXMLHttpRequest);
    req.open('PUT', url, false); /* 同步模式! */
    req.setRequestHeader('Content-Type', mimeType);
    req.send(stream);

# #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96eWM4OC5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190924103409249.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly96eWM4OC5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[String]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/String
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
[DataView]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96eWM4OC5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190924105205576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly96eWM4OC5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_qiphon3650_article_details_78454273]: https://blog.csdn.net/qiphon3650/article/details/78454273
[https_segmentfault.com_a_1190000011563430]: https://segmentfault.com/a/1190000011563430
[https_www.cnblogs.com_hhhyaaon_p_5928152.html]: https://www.cnblogs.com/hhhyaaon/p/5928152.html
[File]: https://developer.mozilla.org/zh-CN/docs/Web/API/File
[Blob]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob
[slice]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#%E4%BD%BF%E7%94%A8JavaScript%E7%B1%BB%E5%9E%8B%E6%95%B0%E7%BB%84%E6%8E%A5%E5%8F%97%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE
[png decoding library]: https://github.com/devongovett/png.js/
[Blob 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#%E5%9C%A8%E8%80%81%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%8E%A5%E5%8F%97%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE
[XMLHttpRequest]: http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html
[Link 4]: https://developer.mozilla.org/zh-cn/Code_snippets/Downloading_Files
[Link 5]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#%E5%8F%91%E9%80%81%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE
[ArrayBuffer]: https://developer.mozilla.org/zh-cn/JavaScript_typed_arrays/ArrayBuffer
[Link 6]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#%E5%B0%86%E7%B1%BB%E5%9E%8B%E6%95%B0%E7%BB%84%E4%BD%9C%E4%B8%BA%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E5%8F%91%E9%80%81
[Link 7]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#Firefox%E7%A7%81%E6%9C%89%E6%96%B9%E6%B3%95
[send]: https://developer.mozilla.org/zh-cn/DOM/XMLHttpRequest#send%28%29