Ajax（Asynchronous JavaScript and XML）是一種在不重新加載整個頁面的情況下更新網頁的技術。它通過在后臺與服務器進行數據交換，使網頁能夠動態更新部分內容，而無需重新加載整個頁面。在本文中，我們將介紹一個使用Ajax的實際示例，以便更好地理解這一概念及其應用。

假設我們要構建一個電子商務網站，其中一個功能是用戶可以搜索商品并顯示相關的搜索結果。傳統的做法是用戶在搜索框中輸入關鍵詞，然后點擊"搜索"按鈕進行搜索，而后臺服務器接收到搜索請求后返回相關結果，整個頁面會刷新顯示搜索結果。

然而，在使用Ajax之后，我們可以實現實時搜索功能，用戶無需點擊按鈕，而是在輸入框中輸入關鍵詞時，后臺服務器將實時返回相關結果并動態更新網頁內容。這樣，用戶可以立刻看到與輸入關鍵詞相關的搜索結果，提高了用戶體驗。

下面是一個使用Ajax的搜索功能的示例代碼：

function getSearchResults(keyword) {
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置回調函數，處理返回的結果
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 處理返回結果
displaySearchResults(xhr.responseText);
} else {
// 處理錯誤
console.error("搜索失敗");
}
}
};
// 發送請求
xhr.open("GET", "/search?keyword=" + keyword, true);
xhr.send();
}
function displaySearchResults(results) {
// 將搜索結果顯示在頁面上
document.getElementById("searchResults").innerHTML = results;
}

首先，我們創建了一個名為getSearchResults的函數，它接收一個關鍵詞作為參數。在函數內部，我們創建了一個XMLHttpRequest對象，它用于與服務器進行通信。

然后，我們設置了一個回調函數xhr.onreadystatechange，它在獲取到服務器返回的結果時被調用。在回調函數中，我們首先檢查XMLHttpRequest的狀態是否為XMLHttpRequest.DONE，以確保已經接收到完整的響應。然后，我們檢查XMLHttpRequest的狀態碼是否為200，表示請求成功。如果請求成功，我們調用displaySearchResults函數來顯示搜索結果；如果請求失敗，我們輸出錯誤信息。

最后，我們定義了displaySearchResults函數，它接收一個結果作為參數，并將結果顯示在頁面上。在示例代碼中，我們將結果設置為一個具有特定id的HTML元素的內部HTML內容。

通過使用上述代碼，我們可以在用戶輸入關鍵詞時實時向服務器發送搜索請求，并將返回的結果動態更新到網頁上。這種實時搜索功能改善了用戶的體驗，提高了網站的交互性。

總之，Ajax使我們能夠通過與后臺服務器進行異步通信，實現動態加載內容而無需重新加載整個頁面。以上示例展示了一個使用Ajax的實際應用場景，即實時搜索功能。通過使用Ajax，我們可以通過動態更新網頁內容來提高用戶體驗，使用戶可以更快地獲得所需的信息。