AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下更新網頁內容的技術。它通過與服務器進行異步通信，可以使網頁實現更加流暢和用戶友好的交互體驗。本文將介紹一個使用AJAX修改頁面內容的案例，通過舉例和代碼演示，說明如何利用AJAX技術實現頁面內容的動態更新。

假設我們有一個簡單的網站，上面展示了不同類型的產品。我們希望在用戶點擊不同的產品類別時，能夠通過AJAX技術動態加載該類別下的產品，并實時顯示在頁面上，而不需要整個頁面重新加載。我們先來看一下頁面的基本結構：

<div id="products">
<ul id="categories">
<li><a href="#" onclick="loadProducts('shoes')">鞋子</a></li>
<li><a href="#" onclick="loadProducts('clothes')">衣服</a></li>
<li><a href="#" onclick="loadProducts('accessories')">配飾</a></li>
</ul>
<div id="content"></div>
</div>

在上面的代碼中，我們創建了一個包含產品展示區域以及產品類別的容器。當用戶點擊某個類別的鏈接時，我們將會執行一個名為loadProducts()的函數，該函數通過AJAX技術從服務器獲取相應類別的產品，并將其展示在content區域內。

接下來，我們來看一下loadProducts()函數的具體實現：

function loadProducts(category) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("content").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "getProducts.php?category=" + category, true);
xhr.send();
}

在上述代碼中，我們首先創建了一個XMLHttpRequest對象，用于發送HTTP請求。接著，我們定義了一個回調函數onreadystatechange，當xhr對象的狀態改變時，該函數將會被觸發。

在回調函數中，首先判斷xhr.readyState和xhr.status，確保請求已經完成并且服務器返回的狀態碼為200（表示一切正常）。然后，我們通過document.getElementById("content").innerHTML將服務器返回的響應內容，即該類別下的產品列表，插入到content區域中。

最后，我們通過xhr.open("GET", "getProducts.php?category=" + category, true)和xhr.send()，向服務器發送一個GET請求，并將請求參數category設置為當前選擇的類別。這里假設服務器使用getProducts.php腳本來處理獲取產品的請求。

代碼執行完成后，我們可以在網頁上點擊不同的類別鏈接，觸發loadProducts()函數，即可通過AJAX技術實現頁面內容的動態更新。舉個例子，當用戶點擊了“鞋子”類別的鏈接后，loadProducts('shoes')函數會向服務器發送一個GET請求，獲取該類別下的產品，并將產品列表實時展示在content區域內。

通過以上的案例演示，我們可以看到，AJAX技術能夠在不刷新整個頁面的情況下，實現頁面內容的動態更新。這極大地提升了用戶體驗，使得網站更加流暢、高效和友好。無論是產品展示還是其他類型的網頁交互，AJAX都能為我們提供便捷而強大的開發工具。