Ajax 二进制字节流数据的发送和接收

前端之家收集整理的这篇文章主要介绍了Ajax 二进制字节流数据的发送和接收前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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",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",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",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',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

猜你在找的Ajax相关文章