在當今的 Web 開發中，Ajax 技術成為了不可或缺的一部分，它的強大之處在于能夠實現頁面無刷新的交互效果。其中一個常見的應用場景是，在用戶與服務器之間傳遞并動態加載圖片。當用戶與網頁交互時，無需重新加載整個頁面，只需請求服務器返回特定的圖片，并將其動態地顯示在頁面上。本文將介紹如何使用 Ajax 技術實現服務器返回圖片的功能，通過舉例說明來幫助讀者更好地理解。

首先，讓我們看一個簡單的示例。假設我們有一個網頁上的按鈕，當用戶點擊按鈕時，我們希望通過 Ajax 請求從服務器獲取一張圖片展示出來。下面是相關的代碼：

// HTML 代碼點擊加載圖片
// JavaScript 代碼
document.getElementById("load-image").addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "image.php", true);
xhr.responseType = "blob";
xhr.onload = function() {
if (this.status === 200) {
var blob = this.response;
var img = document.createElement("img");
var url = URL.createObjectURL(blob);
img.src = url;
document.getElementById("image-container").appendChild(img);
}
};
xhr.send();
});

在上述代碼中，我們使用 XMLHttpRequest 對象創建一個 GET 請求。在 onload 事件中，我們首先檢查服務器返回的狀態碼，確保請求成功。然后，我們創建了一個 Image 對象，利用 URL.createObjectURL 方法為該對象指定一個 URL 地址，最后將圖像對象插入到圖像容器中。

除了顯示一張單一的圖片外，我們還可以使用 Ajax 技術實現動態加載多張圖片。假設我們有一個網頁，當用戶點擊某個按鈕時，我們會請求服務器返回一組圖片，并將它們依次顯示在頁面上。下面是相應的代碼：

// HTML 代碼點擊加載圖片
// JavaScript 代碼
document.getElementById("load-images").addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "images.php", true);
xhr.onload = function() {
if (this.status === 200) {
var images = JSON.parse(this.responseText);
var container = document.getElementById("images-container");
images.forEach(function(imageUrl) {
var img = document.createElement("img");
img.src = imageUrl;
container.appendChild(img);
});
}
};
xhr.send();
});

在上述代碼中，我們執行了一個 GET 請求，并在 onload 事件中處理服務器返回的圖片鏈接。然后，我們將這些鏈接逐個創建為圖像對象并插入到圖像容器中。

通過以上兩個示例，我們展示了使用 Ajax 技術實現服務器返回圖片的功能。無論是加載單張圖片還是動態加載多張圖片，都可以通過 Ajax 和相關的 JavaScript 方法實現。這種方式不僅能提高用戶體驗，還可節省帶寬并加快頁面加載速度。因此，掌握 Ajax 技術對于實現高效的網頁交互至關重要。