標題：Ajax如何獲取接口的圖片

Ajax是一種在網頁中實現異步數據交互的技術，通過使用Ajax，我們能夠在無需重新加載整個頁面的情況下，獲取并顯示服務器上的數據。在本文中，我們將學習如何使用Ajax獲取接口中的圖片，并在網頁中進行顯示。

首先，我們需要了解如何通過Ajax發送HTTP請求來獲取接口中的圖片。在下面的示例中，我們使用JavaScript和jQuery來演示該過程。

$.ajax({
url: "https://example.com/api/images/123",
method: "GET",
responseType: "blob",
success: function(response) {
var imageUrl = URL.createObjectURL(response);
var imageElement = document.createElement("img");
imageElement.src = imageUrl;
document.body.appendChild(imageElement);
}
});

在上面的代碼中，我們使用了jQuery的$.ajax函數來發送GET請求。我們通過指定url參數指向接口中的圖片資源。設置responseType參數為"blob"，以便獲取二進制數據。當請求成功時，success函數會被調用，我們可以在其中將接收到的二進制數據轉換為圖片并在網頁中進行顯示。

讓我們進一步說明這個過程，假設我們的接口返回的是一張貓的圖片。當我們發出上述的Ajax請求時，接口會返回一個包含貓圖片數據的二進制對象。我們可以通過使用URL.createObjectURL函數將這個二進制數據轉換為一個圖片URL。然后，我們創建一個元素，并將剛剛創建的圖片URL賦值給其src屬性。最后，我們將這個元素添加到網頁的主體中。這樣，貓的圖片就會在我們的網頁中顯示出來。

除了使用jQuery，我們也可以通過純JavaScript來實現相同的效果。下面是使用純JavaScript的示例代碼：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/images/123", true);
xhr.responseType = "blob";
xhr.onload = function() {
if (xhr.status === 200) {
var imageUrl = URL.createObjectURL(xhr.response);
var imageElement = document.createElement("img");
imageElement.src = imageUrl;
document.body.appendChild(imageElement);
}
};
xhr.send();

在上面的代碼中，我們創建了一個XMLHttpRequest對象，并使用open方法指定了GET請求的URL和異步標志為true。我們同樣設置了responseType為"blob"。當請求完成時，onload函數會被調用，我們可以在其內部處理響應數據并在網頁中顯示圖片。你可能會注意到，在使用JavaScript時，我們沒有使用方便的jQuery庫，但是原理和實現方式與之前是一致的。

簡而言之，通過Ajax，我們可以輕松地與接口進行交互，并獲取其中的圖片資源。無論是使用jQuery還是純JavaScript，我們都可以通過發送HTTP請求來獲取圖片，并在網頁中展示這些圖片。