博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax 二进制字节流数据的发送和接收
阅读量:6232 次
发布时间:2019-06-21

本文共 1861 字,大约阅读时间需要 6 分钟。

hot3.png

HTML5 Ajax 2.0标准中,增强了Ajax的许多功能,包括发送FormData数据,上传数据进度条等诸多功能。但实际上,Ajax可以字节发送二进制数据。

发送二进制数据

var oReq = new XMLHttpRequest();oReq.open("POST", url, true);oReq.onload = function (oEvent) {  // Uploaded.};var blob = new Blob(['abc123'], {type: 'text/plain'});oReq.send(blob);

或者

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);

接收二进制数据

var oReq = new XMLHttpRequest();oReq.open("GET", "/myfile.png", true);oReq.responseType = "arraybuffer";oReq.onload = function (oEvent) {  var arrayBuffer = oReq.response; // Note: not oReq.responseText  if (arrayBuffer) {    var byteArray = new Uint8Array(arrayBuffer);    for (var i = 0; i < byteArray.byteLength; i++) {          }  }};oReq.send(null);

当然,如上设置只能是文本类型,如果是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();

或者

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

如果你使用的是旧版本的浏览器,那么加载二进制可以如下

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;}

注意:x-user-defined告诉浏览器不要解析数据

参考:

http://www.tuicool.com/articles/iiuI7ff

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

 

转载于:https://my.oschina.net/ososchina/blog/680312

你可能感兴趣的文章
Java NIO系列教程(六) Selector
查看>>
Spring配置多数据源
查看>>
实验二
查看>>
ie兼容性问题 前传
查看>>
如何使用postman传数组数据
查看>>
蓝桥学院2019算法题2.6
查看>>
elasticsearch安装
查看>>
软件工程团队第一次作业
查看>>
饼图tooltip
查看>>
Java第二次作业
查看>>
python configparser
查看>>
motan源码分析五:cluster相关
查看>>
tomcat配置
查看>>
chd校内选拔赛题目+题解
查看>>
Python 字典
查看>>
视觉SLAM中的李群&李代数基础
查看>>
[转]谈谈Linux下动态库查找路径的问题
查看>>
α冲刺 (8/10)
查看>>
Unity shader(CG) 写一个 散色、折射、反射、菲涅尔、gamma、简单后期屏幕特效
查看>>
oracle在线迁移同步数据,数据库报错
查看>>