Ajax是一種基于JavaScript和XML的網絡技術，它通過異步方式，實現了頁面內容的無刷新更新。在網頁設計中，經常需要在不刷新整個頁面的情況下，更新某個特定的區域。本文將通過一個示例，演示如何使用Ajax實現異步刷新div并顯示圖片的效果。

假設我們有一個網頁，包含一個按鈕和一個div容器。初始時，div為空，當點擊按鈕時，我們希望通過Ajax從服務器獲取一張圖片，并將其顯示在div中。

<button id="refreshBtn">點擊刷新圖片</button>
<div id="imageContainer"></div>
<script>
document.getElementById('refreshBtn').addEventListener('click', function () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var imageUrl = xhr.responseText;
document.getElementById('imageContainer').innerHTML = '';
}
};
xhr.open('GET', 'api/getImage.php', true);
xhr.send();
});
</script>

上述代碼中，我們通過addEventListener為按鈕添加了一個點擊事件監聽器。當按鈕被點擊時，會執行一個AJAX請求。使用XMLHttpRequest對象創建一個異步請求，并設置onreadystatechange回調函數，每當請求狀態改變時都會觸發該函數。

在回調函數中，我們首先判斷請求的readyState和status屬性是否已經完成，readyState等于4代表請求已經完成，status等于200代表請求成功。一旦滿足這兩個條件，我們就可以通過xhr.responseText獲取服務器返回的圖片URL。

最后，我們將圖片URL通過innerHTML屬性賦值給div容器，這樣div中就會顯示出這張圖片。

由于Ajax是異步的，因此當點擊按鈕時，網頁并不會發生刷新，用戶可以立即看到圖片的更新效果。這種無刷新更新頁面內容的方式可以提升用戶體驗，特別是在需要頻繁更新某個區域的情況下。

不僅僅是圖片，通過類似的方式，我們還可以實現其他類型的內容異步刷新。例如，我們可以通過Ajax從服務器獲取最新的新聞標題，并將其顯示在新聞滾動欄中；或者從數據庫獲取用戶評論，并實時更新到頁面中。這些應用都能夠通過Ajax提供更流暢、響應更及時的用戶體驗。

在實際應用中，我們還可以對Ajax的性能進行優化，例如使用緩存來避免重復請求，或者使用Promise對象來管理異步操作的鏈式調用。通過合理利用Ajax技術，我們可以為用戶打造更加流暢、動態的網頁體驗。