前端多媒体（2）—— xhr异步接收处理二进制数据

有时我们需要把远程的视频、图片数据异步下载下来，然后在js里进行特殊处理。比如把VR的图片特殊处理，把不同封装格式的视频做一次 转封装 处理等等，这类操作都要先获取二进制数据，然后特殊处理。

这个时候就需要用到 XMLHttpRequest 2.0 的 responseType 属性了。**XMLHttpRequest.responseType **属性是一个枚举值，通过它可以指定返回响应的类型。

常见的类型有

• arraybuffer: 二进制数据
• blob：二进制大对象，比如图片、视频
• document： xml数据类型
• json：返回数据会用被解析为JSON
• text （文本形式）

这里 ArrayBuffer 和 Blob 都是二进制数据，但是两者是不同的，ArrayBuffer和Blob创建后不能修改，除非新建另一个，但是 Blob 对象可以指定创MINE类型，ArrayBuffer可以作为Blob构造器的参数传。

readyState

值	状态	描述
0	UNSENT (未打开)	open()方法还未被调用.
1	OPENED (未发送)	send()方法还未被调用.
2	HEADERS_RECEIVED (已获取响应头)	send()方法已经被调用, 响应头和响应状态已经返回.
3	LOADING (正在下载响应体)	响应体下载中; responseText中已经获取了部分数据.
4	DONE (请求完成)	整个请求过程已经完毕.

responseType = 'text'

这种情况下返回的数据会以文本形式获得，并且xhr.responseText这个属性里获得数据

var xhr = new XMLHttpRequest();

xhr.open('GET', './assets/text');
xhr.responseType = 'text';
xhr.send();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4 && xhr.status == 200){
    alert(xhr.responseText);
  }
}

点击这里查看demo https://young-cowboy.github.io/gallery/XMLHttpRequest_responseType/response_document.html

responseType = 'document'

在这种事情况下了浏览器将返回的数据解析为xml形式。但是要注意http的response header 的 Content-Type:text/xml 否则浏览器无法识别这种数据格式。然后获得的数据会在 xhr.responseXML 里。

var xhr = new XMLHttpRequest();

xhr.open('GET', './assets/document.xml');
xhr.responseType = 'document';
xhr.send();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4 && xhr.status == 200){
    alert(xhr.response.getElementById('name').textContent)
  }
}

请求的数据为

<?xml version="1.0" encoding="utf-8"?>
<document>
  <name id="name">young cowboy</name>
</document>

点击这里查看demo https://young-cowboy.github.io/gallery/XMLHttpRequest_responseType/response_document.html

responseType = 'json'

这种情况下返回的数据会以json体现。数据会在xhr.response字段中。

var xhr = new XMLHttpRequest();

xhr.open('GET', './assets/json');
xhr.responseType = 'json';
xhr.send();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4 && xhr.status == 200){
    alert(JSON.stringify(xhr.response, null, 2))
  }
}

json

{"name": "yuoung cowboy"}

注意如果返回的数据不合法的话。是无法获取数据的。

demo点击这里https://young-cowboy.github.io/gallery/XMLHttpRequest_responseType/response_json.html

responseType = 'blob'

Blob这个概念是通用的计算机概念指的是大块的二进制数据，比如视频、图片。更多的例子和讲解会在后续的文章中体现。

在demo中我使用了一张图片，然后把它保存为一张没有扩展名的文件。

<img id="image">
<script type="text/javascript">
  var xhr = new XMLHttpRequest();

  xhr.open('GET', './assets/blob');
  xhr.responseType = 'blob';
  xhr.send();
  xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){
      console.log(xhr.response instanceof Blob); // true
      document.getElementById('image').src = URL.createObjectURL(xhr.response); // 这里设置一个张图片
    }
  }
</script>

注意，这里使用了一个API，URL.createObjectURL。它可以创建一个链接指向内存中的Blob对象。

demo 可以点击这里 https://young-cowboy.github.io/gallery/XMLHttpRequest_responseType/response_blob.html

responseType = 'arraybuffer'

ArrayBuffer 表示二进制数据的原始缓冲区，他指向内存中的一段数据。它的大小，通常是固定的，也就是在你初始化的时候就决定了。ArrayBuffer本身是不能读写的，需要借助类型化数组或DataView对象来解释原始缓冲区。

Typed Arrays JavaScript中新出现的一个概念，专为访问原始的二进制数据而生。更多关于ArrayBuffer 、 Blob等等处理二进制数据的方法的资料，请关注后续的博客。这里不再展开讲解。

还是和之前一样使用一张图片的二进制数据。只不过在返回的数据类型中，设置为arraybuffer。然后再说没有对数据进行做一次包装。

<img id="image">
<script type="text/javascript">
  var xhr = new XMLHttpRequest();

  xhr.open('GET', './assets/arraybuffer');
  xhr.responseType = 'arraybuffer';
  xhr.send();
  xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){
      var blob = new Blob([xhr.response], {type: 'image/png'});

      document.getElementById('image').src = URL.createObjectURL(blob); // 这里设置一个张图片
    }
  }
</script>

demo https://young-cowboy.github.io/gallery/XMLHttpRequest_responseType/response_arraybuffer.html

参考资料

• 理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
• XMLHttpRequest.responseType
• Blob