本文將介紹Ajax如何請求圖片數據。

在前端開發中，經常會遇到需要請求圖片數據的情況。例如，當用戶需要查看相冊中的某張照片時，我們需要通過Ajax從服務器獲取該照片的數據并在頁面上展示出來。

首先，我們需要創建一個XMLHttpRequest對象，用于發送請求并接收響應。代碼示例如下：

var xhr = new XMLHttpRequest();

接下來，我們需要指定請求的URL。假設我們的照片數據存儲在一個名為photos的API中，并且每張照片都有一個唯一的id。我們可以通過拼接URL的方式來獲取指定id的照片數據：

var photoId = 123;
var url = 'https://example.com/api/photos/' + photoId;

然后，我們需要指定請求的方法和是否異步。對于獲取圖片數據，我們可以使用GET方法，并將異步設置為true：

xhr.open('GET', url, true);

接下來，我們需要監聽xhr對象的load事件，以獲取響應數據。在load事件的回調函數中，我們可以將響應的二進制數據轉換為圖片對象，并在頁面上展示出來：

xhr.onload = function() {
if (xhr.status === 200) {
var blob = xhr.response;
var img = document.createElement('img');
img.src = URL.createObjectURL(blob);
// 將img元素添加到頁面中
document.body.appendChild(img);
}
};

最后，我們需要發送請求：

xhr.send();

通過以上步驟，我們可以使用Ajax請求圖片數據，并在頁面上展示出來。讓我們通過一個具體的例子來說明：

假設我們有一個相冊頁面，用戶可以點擊某張照片來查看大圖。當用戶點擊照片時，我們可以使用以下代碼來請求并展示相應的圖片：

var photoId = 123; // 假設用戶點擊的照片id為123
var xhr = new XMLHttpRequest();
var url = 'https://example.com/api/photos/' + photoId;
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
var blob = xhr.response;
var img = document.createElement('img');
img.src = URL.createObjectURL(blob);
// 將img元素添加到頁面中
document.body.appendChild(img);
}
};
xhr.send();

以上代碼中，我們通過點擊照片將其id傳遞給photoId變量，并根據id拼接URL請求對應的照片數據。然后，我們通過XMLHttpRequest對象發送GET請求，并設置響應類型為blob。在load事件的回調函數中，我們將響應的二進制數據轉換為img元素的src，并將其添加到頁面中。這樣，用戶就能夠看到所點擊照片的大圖了。

綜上所述，Ajax可以通過XMLHttpRequest對象請求圖片數據，并在頁面上展示出來。通過以上介紹和示例，希望讀者對于如何使用Ajax請求圖片數據有一定的了解。