Ajax（Asynchronous JavaScript and XML）是一種用于在Web頁面上對數據進行異步請求和交互的技術。通過使用Ajax，網頁能夠在不刷新整個頁面的情況下，動態地獲取并顯示服務器返回的數據。這種交互的方式為用戶提供了更流暢和優化的網頁體驗。本文將探討如何使用Ajax來查詢和展示數據，并通過舉例來說明其用法和優勢。 在許多網頁應用中，我們經常需要向服務器發送請求并獲取數據，然后將數據顯示在頁面上。而傳統的方式是通過刷新頁面或者跳轉到新的頁面來實現。然而，使用Ajax技術，我們可以在用戶與頁面進行交互的同時，向服務器發送請求，獲取數據并將其動態地顯示在網頁上，而不需要刷新或跳轉頁面。 假設我們正在開發一個在線商城，在商品列表頁面中，用戶可以使用搜索框來查找特定的商品。當用戶輸入關鍵字并點擊搜索按鈕時，我們可以使用Ajax發送異步請求到服務器，并根據搜索結果實時地顯示商品列表。這樣，用戶無需離開當前頁面就能獲得所需要的信息。 下面是一段使用Ajax查詢和展示數據的示例代碼：

頁面上的搜索框:

<input type="text" id="keyword" placeholder="輸入關鍵字">
<button onclick="search()">搜索</button>

使用Ajax發送請求:

function search() {
var keyword = document.getElementById("keyword").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 在這里處理返回的數據并更新頁面
document.getElementById("result").innerHTML = response;
}
};
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.send();
}

在頁面中顯示查詢結果:

<div id="result"></div>

在上面的示例中，當用戶輸入關鍵字并點擊搜索按鈕時，會觸發search()函數。該函數首先從頁面中獲取輸入的關鍵字，然后創建一個XMLHttpRequest對象，用于發送請求。接著，我們通過xhr.open()方法指定了請求的方法（GET），以及請求的URL（search.php?keyword=）。最后，通過xhr.send()方法發送請求。 當服務器返回響應時，會觸發xhr.onreadystatechange事件。在這個回調函數中，我們需要判斷請求的狀態和響應的狀態。只有在xhr.readyState為4（請求已完成）且xhr.status為200（請求成功）時，才表示獲取到了有效的數據。通過xhr.responseText屬性可以獲取到服務器返回的數據。 最后，我們將返回的數據通過innerHTML屬性更新到頁面上的div元素中，從而實現了動態展示查詢結果的功能。 通過使用Ajax技術，我們能夠實現在頁面上實時地查詢和展示數據，提供給用戶更流暢和用戶友好的網頁體驗。無論是在線商城、新聞網站還是社交媒體平臺，Ajax都是非常有用的技術，它能夠有效地減少頁面刷新和跳轉，提高用戶的操作效率和滿意度。 當然，Ajax還有更多的用途和功能。比如，可以通過Ajax實現表單的動態驗證和提交，實現數據的增刪改查操作，以及與服務器端進行長連接，實時接收數據更新等。總的來說，Ajax為我們提供了一種更為高效和靈活的方式來交互和處理數據，為網頁應用帶來了巨大的發展和創新空間。