AJAX - 处理二进制数据
二进制数据是二进制格式而不是文本格式的数据。 它包括图像、音频、视频和其他非纯文本的文件。 我们可以使用 XMLHttpRequest 对象在 AJAX 中发送和接收二进制数据。 在 AJAX 中处理二进制数据时,设置正确的内容类型和响应类型标头非常重要。 因此,为了设置标头,我们使用"Content-Type"标头,这里我们设置正确的 MIME 类型来发送二进制数据,并将"responseType"属性设置为"arraybuffer"或"blob",表示接收到二进制数据。
发送二进制数据
为了发送二进制数据,我们使用 XMLHttpRequest 的 send() 方法,它可以使用 ArrayBuffer、Blob 或 File 对象轻松传输二进制数据。
示例
在下面的程序中,我们创建一个将从服务器接收二进制数据的程序。 所以当我们点击按钮时getBinaryData()函数就会触发。 它使用 XMLHttpRequest 对象通过 GET 方法从给定的 URL 获取数据。 在此函数中,我们将responseType属性设置为arraybuffer,这告诉浏览器我们必须只接受响应中的二进制数据。 当请求完成时,将调用 onload() 函数,在该函数内,我们检查请求的状态(如果响应成功),然后将响应作为数组缓冲区进行访问。 然后使用 Unit8Array() 函数将 arraybuffer 转换为 Uint8array。 它访问二进制数据的各个字节。 之后,我们将在 HTML 页面上显示数据。
<!DOCTYPE html> <html> <body> <script> function getBinaryData() { // 创建 XMLHttpRequest 对象 var myhttp = new XMLHttpRequest(); // 获取二进制数据 myhttp.open("GET", "https://jsonplaceholder.typicode.com/posts", true); // Set responseType to arraybuffer. myhttp.responseType = "arraybuffer"; // 创建回调函数 myhttp.onload = (event) => { // 如果请求成功 if (myhttp.status === 200){ var arraybuffer = myhttp.response; // 将数组缓冲区转换为数组 var data = new Uint8Array(arraybuffer); // 显示二进制数据 document.getElementById("example").innerHTML = data; console.log("Binary data Received"); }else{ console.log("Found error"); } }; // 发送请求到服务器 myhttp.send(); } </script> <div id="example"> <p>AJAX Example</p> <button type="button" onclick="getBinaryData()">Click Here</button> </div> </body> </html>
输出
结论
这就是我们处理二进制数据的方式。 为了处理二进制数据,我们需要将二进制数据转换为适当的数据格式。 我们还可以发送文件、字符串、ArrayBuffer 和 Blob 中的二进制数据。 在下一篇文章中,我们将学习如何使用 AJAX 提交表单。