Ajax（Asynchronous JavaScript and XML）是一種用于在頁面上實現異步通信的技術，它可以使網頁在不刷新的情況下更新特定部分的內容。本文將重點介紹如何使用Ajax實現在頁面直接顯示圖片的功能，通過舉例說明如何從服務器獲取圖片數據并動態加載到網頁上。

在傳統的網頁中，要顯示一張圖片，通常需要在HTML代碼中使用<img>標簽，并將圖片的路徑作為源屬性（src）的值，示例如下：

<img src="image.jpg" alt="圖片">

圖片會在網頁加載時被顯示出來，用戶只能通過刷新整個頁面或者跳轉到其他頁面來更新圖片。

使用Ajax，我們可以通過異步通信的方式從服務器獲取圖片數據，然后使用JavaScript將其動態加載到網頁上。首先，我們需要創建一個XMLHttpRequest對象，用于發送HTTP請求。然后，通過該對象的open()和send()方法發送請求，接收服務器返回的數據，并將其處理為圖片數據流。最后，通過JavaScript創建一個新的<img>元素，并將獲取到的圖片數據賦值給該元素的src屬性，從而在網頁中直接顯示圖片。

下面是一個使用Ajax實現在頁面直接顯示圖片的示例代碼：

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 發送HTTP請求
xhr.open('GET', 'image.jpg', true);
xhr.responseType = 'blob';
xhr.send();
// 處理服務器返回的數據
xhr.onload = function() {
if (xhr.status === 200) {
var blob = xhr.response;
var img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);
}
};

以上代碼首先創建一個XMLHttpRequest對象xhr，并使用open()和send()方法發送一個GET請求，請求的URL是服務器上存儲圖片的路徑。為了能夠正確處理圖片數據，我們將responseType屬性設置為'blob'，表示我們期望得到一個二進制數據流。

當服務器返回數據后，xhr對象的onload事件被觸發。在這個事件處理函數中，我們首先檢查服務器返回的狀態碼是否為200，表示請求成功。然后，我們將獲取到的圖片數據blob賦值給新創建的img元素的src屬性，并將該元素添加到頁面的body元素中。由于blob是一個二進制數據流，我們需要使用URL.createObjectURL()方法將其轉換為一個可以直接顯示的URL。

通過以上代碼，我們可以在頁面上直接顯示一張圖片。此外，我們還可以通過Ajax動態加載多張圖片，實現類似圖片輪播的效果。只需在頁面中創建一個容器元素，然后使用JavaScript動態創建多個img元素，并按照自定義的順序加載不同的圖片數據即可。

在本文中，我們通過介紹Ajax的基本原理和使用方法，以及通過示例代碼演示了如何使用Ajax實現在頁面直接顯示圖片的功能。通過Ajax，我們可以實現網頁內容的實時更新，提升用戶體驗，為網頁開發帶來更多可能。