Ajax 简明教程
AJAX - Handling Binary Data
二进制数据是格式为二进制而不是文本的。它包括图像、音频、视频和其他非纯文本文件。我们可以使用 XMLHttpRequest 对象在 AJAX 中发送和接收二进制数据。在 AJAX 中使用二进制数据时，设置一个正确的容器类型和响应类型标头非常重要。因此，要设置标头，我们使用“Content-Type”标头，此处我们将正确的 MIME 类型设置为发送二进制数据，并将“responseType”属性设置为“arraybuffer”或“blob”，表示接收二进制数据。
Sending Binary Data
要发送二进制数据，我们使用 XMLHttpRequest 的 send() 方法，该方法可以使用 ArrayBuffer、Blob 或 File 对象轻松传输二进制数据。
Example
在以下程序中，我们创建了一个将从服务器接收二进制数据的程序。所以当我们单击按钮 getBinaryData() 函数触发器时。它使用 XMLHttpRequest 对象利用 GET 方法从给定 URL 获取数据。在此函数中，我们将 responseType 属性设置为 arraybuffer，它告诉浏览器我们只需要在响应中接受二进制数据。请求完成后，将调用 onload() 函数，在此函数中，我们检查请求的状态，如果响应成功，则响应被视为 arraybuffer。然后，使用 Unit8Array() 函数将 arraybuffer 转换成 Uint8array。它访问二进制数据的各个字节。之后，我们将在 HTML 页面上显示数据。
<!DOCTYPE html>
<html>
<body>
<script>
function getBinaryData() {
// Creating XMLHttpRequest object
var myhttp = new XMLHttpRequest();
// Getting binary data
myhttp.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
// Set responseType to arraybuffer.
myhttp.responseType = "arraybuffer";
// Creating call back function
myhttp.onload = (event) => {
// IF the request is successful
if (myhttp.status === 200){
var arraybuffer = myhttp.response;
// Convert the arraybuffer into array
var data = new Uint8Array(arraybuffer);
// Display the binary data
document.getElementById("example").innerHTML = data;
console.log("Binary data Received");
}else{
console.log("Found error");
}
};
// Sending the request to the server
myhttp.send();
}
</script>
<div id="example">
<p>AJAX Example</p>
<button type="button" onclick="getBinaryData()">Click Here</button>
</div>
</body>
</html>