前端多媒体（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
