ajax（Asynchronous JavaScript and XML）是一種用于創建快速、動態網頁的技術。它可以在不刷新整個頁面的情況下，從服務器獲取數據并更新頁面的內容。這對于用戶體驗來說非常重要，因為它使得頁面加載更加快速和流暢。在本文中，我們將通過舉例說明如何使用ajax來實現自動更新頁面的功能。

假設我們有一個在線聊天室的網頁應用程序，用戶可以在這個應用程序中發送和接收消息。為了使聊天室保持實時更新，并將新消息顯示在頁面上，我們可以使用ajax。

首先，我們需要編寫一個JavaScript函數，用于獲取服務器上的新消息。以下是一個簡單的例子：

function getNewMessages() {
// 使用ajax發送GET請求到服務器
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getNewMessages', true);
xhr.send();
// 監聽xhr的onreadystatechange事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 當請求完成且成功時，更新頁面的消息
var response = xhr.responseText;
var messages = JSON.parse(response);
// 更新頁面的消息
for (var i = 0; i < messages.length; i++) {
var message = messages[i];
var messageElement = document.createElement('div');
messageElement.textContent = message.text;
document.getElementById('messages-container').appendChild(messageElement);
}
}
}
}

在上述代碼中，我們使用XMLHttpRequest對象創建了一個GET請求，發送到服務器的“/getNewMessages”端點。當請求完成并成功時，我們會得到服務器返回的響應，并將其作為JSON解析。然后，我們會循環遍歷消息數組，并創建包含消息文本的HTML元素，并將其附加到頁面上的一個容器中。

接下來，我們需要定期調用getNewMessages函數，以便在頁面上顯示新的消息。這可以使用JavaScript中的setInterval函數來實現。以下是一個例子：

// 每5秒鐘調用一次getNewMessages函數
setInterval(getNewMessages, 5000);

使用上述代碼，getNewMessages函數將每5秒鐘從服務器獲取新消息，并將其添加到頁面上的消息容器中。這樣，用戶就可以實時地看到其他用戶發送的消息。

在這個例子中，我們使用ajax技術實現了頁面的自動更新。對于實時聊天室這樣的應用程序，這種功能非常重要和有用。它使得用戶不需要手動刷新頁面，就能夠實時地看到其他用戶發送的新消息。通過定期調用getNewMessages函數，我們可以保持頁面始終與服務器上的最新數據同步。

總結一下，ajax可以通過發送異步請求和處理服務器響應來實現頁面的自動更新。我們可以使用XMLHttpRequest對象發送GET或POST請求，并在請求完成時更新頁面的內容。對于實時應用程序，定期調用ajax函數可以保持頁面與服務器的數據同步，并實現即時的更新。通過ajax的自動頁面更新功能，我們可以提供更好的用戶體驗，使用戶能夠更流暢地使用網頁應用程序。