このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
バイナリーデータの送受信
バイナリーデータの受信
XMLHttpRequest オブジェクトのresponseType プロパティで、サーバーに期待するレスポンスの種類を変更することができます。設定可能な値は空文字列 (既定),"arraybuffer","blob","document","json","text" です。response プロパティにはエンティティの本体がresponseType に応じてArrayBuffer,Blob,Document,JSON または文字列で格納されます。リクエストが不完全であったり成功しなかった場合はnull になります。
このサンプルでは画像をバイナリーファイルとして読み込み、生のバイト列から 8 ビット符号なし整数値の配列を作成します。なお、これは画像をデコードしてピクセルを読み取ることは行いません。これらはImageDecoder インターフェイスで実現できます。
const req = new XMLHttpRequest();req.open("GET", "/myfile.png", true);req.responseType = "arraybuffer";req.onload = (event) => { const arrayBuffer = req.response; // Note: not req.responseText if (arrayBuffer) { const byteArray = new Uint8Array(arrayBuffer); byteArray.forEach((element, index) => { // do something with each byte in the array }); }};req.send(null);responseType プロパティに"blob" という文字列を設定すると、バイナリーファイルをBlob として読み取ることもできます。
const req = new XMLHttpRequest();req.open("GET", "/myfile.png", true);req.responseType = "blob";req.onload = (event) => { const blob = req.response; // …};req.send();バイナリーデータの送信
XMLHttpRequest のsend メソッドが拡張され、ArrayBuffer、Blob、File オブジェクトを受け付けることでバイナリーデータの送信が容易になりました.
続くサンプルはその場で作ったテキストファイルをPOST メソッドで "file" をサーバーに送信します。このサンプルはプレインテキストを使っていますが、代わりにデータがバイナリーファイルだとイメージする事も出来ます。
const req = new XMLHttpRequest();req.open("POST", url, true);req.onload = (event) => { // Uploaded};const blob = new Blob(["abc123"], { type: "text/plain" });req.send(blob);バイナリーデータとして型付き配列を送信
同等にバイナリーデータとして JavaScript の型付き配列を送信することもできます。
// Create a new array with fake data (Consecutive numbers (0 - 255), looping back to 0)const array = new Uint8Array(512).map((v, i) => i);const xhr = new XMLHttpRequest();xhr.open("POST", url, false);xhr.send(array);これは 8 ビット整数の 512 バイトの配列を構築して送信します。勿論、好きな任意のバイナリーデータで使えます。
フォーム送信とファイルアップロード
FormData を参照してください。