发送和接收二进制数据
接收二进制数据
XMLHttpRequest 对象的 responseType 属性可以设置,以更改来自服务器的预期响应类型。可能的值为空字符串(默认值)、"arraybuffer"、"blob"、"document"、"json" 和 "text"。response 属性将根据 responseType 包含实体主体,作为 ArrayBuffer、Blob、Document、JSON 或字符串。如果请求未完成或未成功,则此值为 null。
此示例将图像作为二进制文件读取,并从原始字节创建 8 位无符号整数数组。请注意,这不会解码图像并读取像素。这可以通过 ImageDecoder 接口完成。
js
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" 设置为 responseType 属性,将二进制文件读取为 Blob。
js
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 方法将此“文件”发送到服务器。此示例使用纯文本,但您可以想象数据是二进制文件。
js
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 类型化数组。
js
// 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。