AJAX（Asynchronous JavaScript and XML）是一種實現客戶端與服務器異步通信的技術，其主要用途之一是通過AJAX從服務器請求數據并將其展示在網頁上。通過使用AJAX，用戶可以在不刷新整個頁面的情況下獲取數據，提升了用戶體驗和網站性能。本文將介紹如何使用AJAX進行頁面的數據查詢，并舉例說明其實際應用。

假設我們有一個電商網站，頁面上有一個商品列表，用戶可以選擇不同的排序方式來查看商品。傳統的方式是每次用戶選擇不同的排序方式后，頁面會刷新，服務器重新返回已排序的商品列表。使用AJAX可以避免頁面刷新，提供更流暢的用戶體驗。

function sortByPrice() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var sortedItems = JSON.parse(xhr.responseText);
renderItems(sortedItems);
}
};
xhr.open("GET", "/api/sortByPrice", true);
xhr.send();
}
function renderItems(sortedItems) {
// 渲染已排序的商品列表
}

上述代碼是一個使用AJAX進行排序的示例。當用戶選擇按價格排序時，JavaScript代碼會通過AJAX發送一個GET請求到服務器的"/api/sortByPrice"接口。服務器會根據排序要求處理請求，并返回已排序的商品列表。在JavaScript代碼中，我們通過XMLHttpRequest對象的onreadystatechange事件監聽器來處理服務器響應。當服務器返回響應并成功時（狀態碼為200），我們解析返回的JSON數據并調用renderItems函數來渲染已排序的商品列表。

除了排序，AJAX還可以用于其他類型的數據查詢。假設我們的網站還有一個搜索功能，用戶可以輸入關鍵字來搜索商品。傳統的方式是用戶輸入關鍵字后，頁面會刷新，服務器根據關鍵字進行搜索，并返回匹配的商品列表。使用AJAX，我們可以實現實時搜索功能，用戶在輸入關鍵字的同時，網頁會實時展示匹配的結果，無需刷新頁面。

function searchItems(keyword) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var matchedItems = JSON.parse(xhr.responseText);
renderItems(matchedItems);
}
};
xhr.open("GET", "/api/search?keyword=" + keyword, true);
xhr.send();
}

上述代碼是一個使用AJAX進行搜索的示例。當用戶輸入關鍵字時，JavaScript代碼會通過AJAX發送一個GET請求到服務器的"/api/search"接口，并將關鍵字作為參數傳遞給服務器。服務器根據關鍵字進行搜索，并返回匹配的商品列表。JavaScript代碼解析返回的JSON數據并調用renderItems函數來渲染匹配的商品列表。

總結來說，AJAX是一種強大的技術，可以使頁面的數據查詢更加高效和流暢。通過在網頁上實時獲取數據，用戶可以獲得更好的體驗，并且能夠提高網站的性能。通過以上的示例，我們可以看到AJAX在電商網站中的實際應用，不僅可以用于排序功能，還可以實現實時搜索等功能。隨著更多的網站開始采用AJAX技術，我們可以期待更多創新的應用和更好的用戶體驗。