AJAX 是一種在網頁中通過異步方式獲取數據的技術。它通過向服務器發送請求并在后臺處理響應，實現了在不刷新整個網頁的情況下更新部分頁面內容。在本文中，我們將探討如何使用 AJAX 來獲取網頁數據，并通過舉例說明其應用。

在使用 AJAX 獲取網頁數據之前，我們首先需要了解 AJAX 的基本原理。當用戶在網頁上觸發某個事件時（例如點擊按鈕），網頁通過 JavaScript 向服務器發送 HTTP 請求。服務器在接收到請求后，通常會讀取數據庫或執行相關處理，并將結果返回給網頁。網頁通過 JavaScript 處理服務器返回的數據，并將更新后的內容動態地顯示在頁面上，而無需刷新整個頁面。

舉例來說，假設我們有一個簡單的網頁，在頁面上顯示了一個按鈕和一個空的文本框。當用戶點擊按鈕時，我們希望從服務器上獲取一條隨機的笑話，并將其顯示在文本框中。

<button onclick="getJoke()">點擊獲取笑話</button>
<input type="text" id="jokeText" readonly>

首先，我們需要編寫一個函數來處理按鈕的點擊事件，發送 AJAX 請求并更新頁面上的文本框。以下是一個示例函數：

function getJoke() {
var httpRequest = new XMLHttpRequest();
var jokeText = document.getElementById("jokeText");
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
jokeText.value = httpRequest.responseText;
}
};
httpRequest.open("GET", "https://api.example.com/joke", true);
httpRequest.send();
}

在這個函數中，我們首先通過XMLHttpRequest對象創建了一個 HTTP 請求。然后，我們指定了一個回調函數onreadystatechange，該函數在服務器返回響應時被觸發。在回調函數中，我們檢查了請求的狀態和響應的狀態碼。如果請求成功并且狀態碼為 200，我們將服務器返回的數據存儲在文本框的值中。

要注意的是，我們在代碼中使用了異步請求（通過傳遞最后一個參數為 true），這意味著請求將在后臺發送，并且頁面不會被阻塞。如果希望使用同步請求，可以將最后一個參數設置為 false，但這樣可能會導致頁面在請求發送和響應完成之間出現卡頓。

通過這個簡單的例子，我們可以看到 AJAX 的一個重要優勢：在不刷新整個頁面的情況下，僅更新頁面的一部分內容。這種機制可以提升用戶體驗，減少網絡帶寬的使用，并降低服務器的負載。

總結起來，使用 AJAX 來獲取網頁數據需要以下步驟：發送 HTTP 請求、接收服務器的響應、處理響應的數據并更新頁面。通過巧妙地使用 JavaScript 和 AJAX，我們可以輕松地創建交互式的網頁，并提供更好的用戶體驗。