AJAX（Asynchronous JavaScript and XML）是一種在Web頁面上進行異步請求和交互的技術。隨著互聯網的快速發展，越來越多的網頁需要從服務器動態獲取數據并實時刷新，這種交互方式異常高效和用戶友好。通過AJAX，我們可以在不刷新整個頁面的情況下，獲取并顯示數據。本文將介紹一個基于AJAX的異步查詢數據案例，通過舉例子來說明AJAX的強大功能。

在這個案例中，我們將使用AJAX來從服務器獲取一個城市的天氣數據。當用戶在輸入框中輸入城市名稱并點擊查詢按鈕時，頁面將異步向服務器發送HTTP請求，并通過AJAX獲取相應的天氣數據。然后，頁面將顯示該城市的天氣情況，無需刷新整個頁面。

// JS部分
function getWeather() {
var city = document.getElementById("cityInput").value;
var xhr = new XMLHttpRequest();
var url = "https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=" + city;
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var weather = response.current.condition.text;
document.getElementById("weatherOutput").innerHTML = "當前天氣：" + weather;
}
};
xhr.send();
}

如上所示，通過AJAX我們創建了一個getWeather函數，它首先從輸入框中獲取用戶輸入的城市名稱，然后使用XMLHttpRequest對象進行HTTP請求。請求使用了一個開放天氣API，通過在URL中傳入城市名稱和API密鑰來獲取相應的天氣數據。使用AJAX的異步請求可以避免頁面因為等待服務器響應而阻塞。

在響應onreadystatechange事件時，我們首先判斷了服務器返回的狀態，如果狀態碼為200則表示請求成功。然后，我們將服務器返回的JSON字符串解析為對象，并從中提取出天氣描述數據。最后，我們通過JavaScript方法修改頁面中指定的元素內容，將天氣描述數據顯示在頁面上。

在HTML部分，我們需要提供相應的輸入框和按鈕元素，以及用于顯示天氣數據的輸出元素。

<!-- HTML部分 -->
<input type="text" id="cityInput" placeholder="輸入城市名稱">
<button onclick="getWeather()">查詢</button>
<p id="weatherOutput"></p>

如上所示，用戶可以在輸入框中鍵入城市名稱，并點擊“查詢”按鈕。當用戶點擊按鈕時，JavaScript函數getWeather將被觸發，發起AJAX請求并顯示相應的天氣數據。

通過這個案例，我們可以看到AJAX可以使我們的頁面更加動態和用戶友好。用戶無需等待整個頁面刷新，即可快速獲得所需的數據。AJAX技術在現代Web開發中發揮著重要的作用，在各種交互式網頁和應用中被廣泛應用。