Ajax（Asynchronous JavaScript and XML）是一種用于改變網頁外部值的重要技術。通過使用Ajax，我們可以在不刷新整個網頁的情況下，通過與服務器進行異步通信，動態地更新網頁的內容。本文將探討Ajax如何實現這一功能，并通過舉例說明其工作原理。

假設我們有一個網頁上顯示當前時間的標簽，當用戶打開網頁時，標簽上顯示的時間是頁面加載的時間。當用戶希望更新時間時，可以點擊一個按鈕實現該功能。使用傳統的方法，點擊按鈕后，頁面會向服務器發起一個請求，然后刷新整個頁面，從而展示最新的時間。但使用Ajax，我們可以實現局部刷新，即僅更新時間而不刷新整個頁面。

首先，我們需要添加一個用于顯示時間的標簽和一個按鈕。HTML代碼如下：

<h1 id="time">頁面加載時間：2022-01-01 00:00:00</h1>
<button id="update-btn">更新時間</button>

接下來，我們需要編寫JavaScript代碼來處理按鈕的點擊事件，并使用Ajax來獲取最新的時間。代碼如下：

let timeLabel = document.getElementById('time');
let updateButton = document.getElementById('update-btn');
updateButton.addEventListener('click', function() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
timeLabel.innerText = '頁面加載時間：' + xhr.responseText;
}
};
xhr.open('GET', '/get-time', true);
xhr.send();
});

以上代碼中，我們通過addEventListener函數為按鈕添加了一個點擊事件監聽器。當按鈕被點擊時，會執行事件處理函數。在事件處理函數中，我們創建了一個XMLHttpRequest對象，用于發送Ajax請求。然后，我們定義了一個onreadystatechange事件處理函數，該函數會在Ajax請求狀態發生變化時被調用。

當onreadystatechange事件被觸發時，我們首先檢查請求狀態是否為4（請求已完成），并且響應狀態碼是否為200（請求成功）。如果滿足這兩個條件，說明我們成功地從服務器獲取到了最新的時間，并將其更新到時間標簽中。我們使用responseText屬性來獲取服務器返回的時間值，并將其設置為時間標簽的innerText。

最后，我們需要在服務器端提供一個接口來獲取最新的時間。以下是一個使用Node.js Express框架的示例代碼：

app.get('/get-time', function(req, res) {
let currentTime = new Date().toLocaleString();
res.send(currentTime);
});

在上述代碼中，我們定義了一個GET路由，當客戶端發送GET請求到"/get-time"時，會執行回調函數。回調函數利用Date對象獲取當前時間，并將其轉換為字符串。然后，使用res.send()函數將時間字符串作為響應發送給客戶端。

通過以上步驟，我們成功地實現了使用Ajax來更新頁面中時間標簽的內容。當用戶點擊更新按鈕時，頁面將使用Ajax來向服務器獲取最新的時間，并在收到響應后，將其更新到時間標簽中。整個頁面無需刷新，僅更新了時間標簽的內容。

通過這個示例，我們可以看到Ajax的強大之處。通過Ajax，我們可以實現頁面與服務器之間的異步通信，從而動態地改變頁面的外部值。這為用戶提供了更好的交互體驗，并降低了頁面加載時間。

總之，Ajax是一種強大的技術，能夠改變網頁外部值而無需刷新整個頁面。通過與服務器的異步通信，我們可以動態地更新頁面的內容。通過以上示例，我們可以看到如何使用Ajax來更新頁面中的時間標簽，實現局部刷新。相信通過進一步學習和實踐，我們可以掌握更多使用Ajax改變外部值的技巧和應用。