How to send and receive binary bytes of data with Ajax-JS Tutorial-php.cn

How to send and receive binary bytes of data with Ajax

php中世界最好的语言

Release： 2018-04-04 14:49:52

Original

3004 people have browsed it

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!