前端多媒体(2)—— xhr异步接收处理二进制数据
2017-06-24 21:04
423 查看
有时我们需要把远程的视频、图片数据异步下载下来,然后在js里进行特殊处理。比如把VR的图片特殊处理,把不同封装格式的视频做一次
转封装处理等等,这类操作都要先获取二进制数据,然后特殊处理。
这个时候就需要用到
XMLHttpRequest2.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
相关文章推荐
- 前端多媒体(3)—— 处理二进制数据
- C#网络Socket的数据发送与接收处理(利用异步)的模板(模式)
- c#网络通信框架networkcomms内核解析之六 处理接收到的二进制数据
- 异步Socket接收数据后缓存处理问题
- C#网络Socket的数据发送与接收处理(利用异步)的模板(模式)
- mscomm控件接收二进制数据后的处理
- c#网络通信框架networkcomms内核解析之六 处理接收到的二进制数据
- 前端通过AJAX提交数据,后台PHP处理数据实现异步操作基本流程
- .net C# 异步socket ,监听和接收数据时可能会引起的 无法访问已释放的对像异常.捕捉处理.
- 14 利用XHR来接收与处理XML数据
- C#异步数据接收串口操作类
- 接前一篇数据的接收与处理,源码篇
- 网络数据流接收处理过程分析
- 数据接收中粘包及半包的处理
- 数据接收中粘包及半包的处理
- 用JAVA处理文本与二进制数据混合大文件
- 利用ASP发送和接收XML数据的处理方法与代码
- 应用消息队列异步处理数据存储
- 数据接收中粘包及半包的处理
- 基于AJAX的异步请求对多数据处理页面的优化