Отправка и приём двоичных данных

Свойство responseType объекта XMLHttpRequest может быть установлено для изменения ожидаемого типа ответа от сервера. Возможные значения — пустая строка (по умолчанию), "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);

Вы также можете прочитать двоичный файл как Blob, установив строку "blob" в свойство responseType.

const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

req.send();

Метод send объекта XMLHttpRequest был расширен, чтобы обеспечить лёгкую передачу двоичных данных, принимая объект ArrayBuffer, Blob или File.

В следующем примере создаётся текстовый файл на лету, и используется метод POST для отправки «файла» на сервер. В этом примере используется обычный текст, но можно представить, что данные — это двоичный файл.

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

Здесь создаётся массив из 512 байтов 8-битных целых чисел и отправляется; конечно, вы можете использовать любые двоичные данные.

См. FormData.