How to send and receive binary bytes of data with Ajax

This time I will show you how Ajax sends and receives binary byte data. What are the precautions for Ajax to send and receive binary byte data? The following is a practical case. Let’s take a look. .

HTML5 Ajax 2.0 standard has enhanced many functions of Ajax, including sending FormData data,

uploadingdataProgress bar and many other functions. But in fact, Ajax can send binary data by bytes.

Send binary data

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

or

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

Receive binary data

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

Of course, the above setting can only be for text type. If it is Blob type, then the following can be done

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

or

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

If you are using an old version Browser, then loading the binary can be as follows

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

Note: x-user-defined tells the browser not to parse the data

I believe you have mastered the method after reading the case in this article, please pay attention for more exciting things Other related articles on php Chinese website!

Recommended reading:

How does JSONP handle Ajax cross-domain access

Global monitoring of ajax operation, how to handle user session failure deal with

The above is the detailed content of How to send and receive binary bytes of data with Ajax. For more information, please follow other related articles on the PHP Chinese website!