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

时间:2023-02-12 22:27:46

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

参考资料