在 Web 開發中，經常會遇到需要獲取圖片并在頁面上進行顯示的需求。傳統的方式是通過刷新頁面來獲取圖片，但這樣會對用戶體驗造成不必要的影響。幸運的是，使用 Ajax 技術可以實現在不刷新頁面的情況下獲取并顯示圖片，為用戶提供更流暢、更友好的瀏覽體驗。

Ajax 是一種利用 JavaScript 在后臺與服務器進行異步通信的技術。它可以通過 XMLHttpRequest 對象發送請求，并接收服務器返回的數據。對于獲取和顯示圖片來說，我們可以通過在服務器上建立一個專門的接口處理圖片的請求，然后在頁面上使用 Ajax 技術調用該接口獲取圖片的路徑，最后將圖片顯示在頁面上。

接下來，我們來看一個具體的例子。假設我們有一個網站，在某個頁面上需要獲取并顯示一張貓的圖片。首先，我們需要在服務器上創建一個接口來處理圖片的請求。接口的代碼如下：

<?php
// 通過接口傳遞圖片的路徑
$imagePath = "images/cat.jpg";
// 將圖片的路徑以 JSON 格式輸出
echo json_encode($imagePath);
?>

在頁面的 JavaScript 代碼中，我們可以使用 Ajax 技術來調用這個接口，并將返回的圖片路徑賦值給一個 img 元素的 src 屬性，從而實現圖片的顯示。代碼如下：

<script>
// 創建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 發送異步請求到接口
xhr.open("GET", "image-api.php", true);
xhr.send();
// 監聽請求的狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 獲取返回的圖片路徑
var imagePath = JSON.parse(xhr.responseText);
// 將圖片顯示在頁面上
var img = document.createElement("img");
img.src = imagePath;
document.body.appendChild(img);
}
};
</script>

在上面的代碼中，我們使用 XMLHttpRequest 對象發送了一個 GET 請求到指定的接口。在接收到服務器返回的數據后，我們首先通過 JSON.parse 方法將 JSON 字符串轉換為 JavaScript 對象，然后使用該對象的屬性將圖片顯示在頁面的 body 元素中。

使用 Ajax 技術獲取并顯示圖片具有非常廣泛的應用。例如，在一個相冊網站中，用戶可以通過 Ajax 在不離開當前頁面的情況下預覽不同圖片；在一個商品展示頁面中，用戶可以通過 Ajax 在不刷新頁面的情況下查看不同顏色或款式的商品圖片。通過使用 Ajax 技術，我們可以為用戶提供更流暢、更高效的圖片瀏覽體驗。

總之，使用 Ajax 技術可以實現在不刷新頁面的情況下獲取并顯示圖片。通過調用服務器上的接口，我們可以獲取圖片的路徑，并將其顯示在頁面上，從而提供更流暢、更友好的瀏覽體驗。不論是預覽相冊中的圖片，還是查看商品展示頁面中的不同款式，Ajax 都是一個非常重要且實用的技術。