Ajax を使用してバイナリ バイトのデータを送受信する方法

今回は、Ajax がバイナリ バイト データを送受信する方法と、Ajax がバイナリ バイト データを送受信する際の 注意事項 を​​説明します。実際のケースを見てみましょう。

HTML5 Ajax 2.0 標準は、FormData データの送信、

データのアップロード、プログレス バー、その他多くの機能を含む、Ajax の多くの機能を強化しました。しかし実際には、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-define はブラウザにデータを解析しないよう指示します

この記事の事例を読んだ後の方法は、さらに興味深いものです。php中国語ウェブサイトの他の関連記事にもご注目ください。

推奨読書:

JSONP が Ajax クロスドメイン アクセスを処理する方法

ajax 操作のグローバル監視、ユーザー セッションの失敗を処理する方法

以上がAjax を使用してバイナリ バイトのデータを送受信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。