本文將介紹使用 Ajax 獲取二進制數據流圖片的方法。在網絡應用開發中，有時候我們需要通過 Ajax 請求獲取服務器返回的圖片數據，然后在頁面上顯示出來。傳統的 Ajax 請求方式無法直接處理二進制數據流，但是我們可以通過一些技巧來實現這一功能。

舉個例子來說明這個問題。假設我們有一個圖片分享網站，在用戶登錄后，我們通過 Ajax 請求獲取該用戶的頭像圖片并在頁面上顯示。傳統的 Ajax 請求只能獲取文本數據，無法獲取圖片這樣的二進制數據。但是我們可以通過設置服務器響應頭，將圖片數據以二進制數據流的形式返回給客戶端，并在客戶端使用 Blob 對象進行處理。

<script>
function loadAvatar() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/getAvatar", true);
xhr.responseType = "blob";
xhr.onload = function(e) {
if (this.status == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src); // 釋放資源
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
};
xhr.send();
}
</script>

在上面的代碼中，我們通過 XMLHttpRequest 對象發送了一個 GET 請求，并將響應類型設置為 "blob"，表示要獲取一個二進制的 Blob 對象。在請求成功后，我們通過 URL.createObjectURL 創建了一個臨時鏈接，并賦值給 img 的 src 屬性，然后將其添加到頁面上進行顯示。

為了在服務器端正確返回二進制數據流圖片，我們需要在響應頭中設置相應的 Content-Type。下面是一個使用 Node.js 的例子：

const http = require('http');
const fs = require('fs');
function getAvatar(req, res) {
res.setHeader("Content-Type", "image/jpeg");
fs.createReadStream("path/to/avatar.jpg").pipe(res);
}
http.createServer(function(req, res) {
if (req.url === '/getAvatar') {
getAvatar(req, res);
}
}).listen(8080);

上面的代碼中，我們首先設置響應頭的 Content-Type 為 "image/jpeg"，表示要返回 JPEG 格式的圖片。然后使用 fs 模塊的 createReadStream 方法讀取位于 "path/to/avatar.jpg" 的圖片，并通過 pipe 方法將內容寫入響應流中，最終返回給客戶端。

通過以上的方法，我們可以實現通過 Ajax 獲取二進制數據流圖片的功能。無論是顯示用戶頭像、圖片預覽，還是其他需要獲取和展示圖片的場景，都可以通過類似的方法來實現。