在現代網頁開發中，Ajax是一種強大的技術，它使得網頁能夠在后臺與服務器進行異步通信，實現無刷新的頁面更新。本文將介紹如何使用Ajax進行查詢并顯示頁面內容。以一個簡單的電商網站為例，我們希望用戶能夠在搜索框輸入關鍵字，通過Ajax進行實時查詢并顯示相關商品列表。通過這個例子，我們將了解到Ajax的基本原理以及如何實現查詢結果的展示。 首先，我們需要在網頁中創建一個搜索框，并監聽用戶的輸入。當用戶輸入關鍵字時，我們將收集到的輸入內容發送到服務器進行查詢。這個過程可以通過以下的Ajax代碼實現：

const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', function() {
const keyword = searchInput.value;
// 創建Ajax請求
const xhr = new XMLHttpRequest();
const url = 'http://example.com/search?keyword=' + keyword;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
// 處理查詢結果
displayResults(response);
}
};
xhr.open('GET', url, true);
xhr.send();
});
function displayResults(results) {
const resultContainer = document.getElementById('search-results');
resultContainer.innerHTML = '';
results.forEach(function(result) {
const resultItem = document.createElement('div');
resultItem.innerText = result.title;
resultContainer.appendChild(resultItem);
});
}

上述代碼中，我們使用addEventListener函數監聽輸入框的input事件。每次用戶輸入內容時，都會觸發input事件，并獲取輸入內容的關鍵字。然后，我們通過Ajax發送GET請求到服務器的搜索接口，并將關鍵字作為參數傳遞。當服務器返回數據時，我們使用displayResults函數來處理查詢結果，并將結果展示在頁面上。 在服務器端，我們可以根據關鍵字進行商品查詢，并將查詢結果以JSON格式返回給前端。例如，我們假設服務器的搜索接口返回以下JSON數據：

[
{ "title": "iPhone 12", "price": 6999 },
{ "title": "AirPods Pro", "price": 1799 },
{ "title": "MacBook Pro", "price": 10999 }
]

在前端，我們使用displayResults函數來處理查詢結果。首先，我們獲取存放查詢結果的容器元素（例如id為"search-results"的div元素），并清空容器的內容。然后，我們遍歷查詢結果數組，為每個結果創建一個新的div元素，并將結果的標題顯示在頁面上。 通過這個簡單的例子，我們可以看到Ajax的查詢和展示過程。用戶在輸入框中輸入關鍵字時，頁面實時發送請求到服務器進行查詢，并將查詢結果動態地展示在頁面上。這種無刷新的體驗大大提升了用戶的交互體驗，使得網頁更加靈活和高效。 除了查詢顯示頁面的功能，Ajax還可以用于各種其他場景，例如表單提交、數據加載等等。通過合理的使用Ajax，我們可以在不刷新整個頁面的情況下，實現更加流暢和高效的網頁交互效果。 總結起來，Ajax是一種強大的技術，可以使網頁在后臺與服務器進行異步通信，實現無刷新的頁面更新。在查詢顯示頁面的場景中，我們可以利用Ajax實時發送請求到服務器進行查詢，并動態地展示查詢結果。這種無刷新的體驗大大提升了用戶的交互體驗，使得網頁更加靈活和高效。通過不斷學習和運用Ajax，我們可以為用戶提供更好的網頁體驗。