AJAX - 處理二進位制資料

二進位制資料是指以二進位制格式而非文字格式存在的資料。它包括影像、音訊、影片以及其他非純文字檔案。我們可以使用 XMLHttpRequest 物件在 AJAX 中傳送和接收二進位制資料。在 AJAX 中處理二進位制資料時，設定正確的 content-type 和 responseType 頭部資訊非常重要。因此，為了設定頭部資訊，我們使用 "Content-Type" 頭部，在這裡我們設定正確的 MIME 型別來發送二進位制資料，並將 "responseType" 屬性設定為 "arraybuffer" 或 "blob"，這表示接收二進位制資料。

傳送二進位制資料

要傳送二進位制資料，我們使用 XMLHttpRequest 的 send() 方法，該方法可以使用 ArrayBuffer、Blob 或 File 物件輕鬆傳輸二進位制資料。

示例

在下面的程式中，我們建立一個程式，該程式將從伺服器接收二進位制資料。因此，當我們單擊按鈕時，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>

輸出

結論

這就是我們處理二進位制資料的方法。為了處理二進位制資料，我們需要將二進位制資料轉換為適當的資料格式。我們也可以以檔案、字串、ArrayBuffer 和 Blob 的形式傳送二進位制資料。在下一篇文章中，我們將學習如何使用 AJAX 提交表單。

列印頁面