AJAX（Asynchronous JavaScript and XML）是一種用于創建快速交互式網頁應用的前端技術。在傳統的網頁訪問方式中，每當用戶與網頁交互時，都會向服務器發送請求并刷新整個頁面。而使用AJAX，我們可以在不刷新整個頁面的情況下，通過發送異步請求，實現局部的數據更新和頁面回調函數的實現。本文將介紹如何使用AJAX實現頁面回調函數，并通過舉例說明其用法。

假設我們正在開發一個購物網站，用戶可以在網站上添加商品到購物車，并實時顯示購物車中商品的總價。傳統的做法是每當用戶點擊“添加到購物車”按鈕時，需要刷新整個頁面來更新購物車內商品的總價。這種方式會讓頁面體驗變得遲緩和不流暢。而使用AJAX，我們可以實現在不刷新整個頁面的情況下，更新購物車內商品總價。

首先，在購物車頁面的HTML代碼中，我們可以使用一個<div>元素來展示商品總價，例如：

<span class="code"><div id="total-price">0</div></span>

然后，我們可以使用JavaScript代碼來發送AJAX請求，并更新購物車總價的回調函數。例如：

<span class="code">function updateTotalPrice() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var totalPrice = xhr.responseText;
document.getElementById("total-price").innerHTML = totalPrice;
}
};
xhr.open("GET", "/api/getTotalPrice", true);
xhr.send();
}
</span>

在這段代碼中，updateTotalPrice()函數發送了一個異步GET請求到服務器的/api/getTotalPrice接口。當服務器返回響應時，onreadystatechange事件被觸發。如果服務器返回狀態碼為200，表示請求成功，那么我們可以從響應中獲取商品總價，并將其更新到購物車頁面中。

接下來，我們可以將這個回調函數綁定到一個按鈕的點擊事件上，例如：

<span class="code">document.getElementById("add-to-cart-button").addEventListener("click", updateTotalPrice);</span>

在這個例子中，當用戶點擊“添加到購物車”按鈕時，updateTotalPrice回調函數會被調用，異步發送AJAX請求，更新購物車商品總價的顯示。

除了綁定回調函數到按鈕點擊事件上，我們還可以使用定時器來定期自動刷新購物車商品總價的顯示。例如：

<span class="code">setInterval(updateTotalPrice, 5000);</span>

在這個例子中，updateTotalPrice函數會每隔5秒鐘被自動調用一次，發送AJAX請求并更新購物車商品總價的顯示。這樣，即使用戶沒有進行任何操作，總價也會實時更新。

總之，使用AJAX實現頁面回調函數是一種加強網頁交互性和用戶體驗的好方法。通過發送異步請求和處理服務器端響應，我們可以實現頁面局部的數據更新，避免了刷新整個頁面所帶來的延遲。無論是綁定回調函數到用戶事件上，還是使用定時器定期自動刷新，AJAX都極大地改善了網頁應用的交互方式。