AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上更新部分內容的技術。在這個案例中，我們將使用AJAX來創建一個簡單的天氣查詢小工具。通過輸入一個城市名稱，我們可以獲取并顯示該城市的實時天氣信息。這種實時的交互性使得用戶可以立即獲取所需的信息，而無需刷新整個頁面。下面我們將詳細說明如何實現這個小案例：

步驟一：創建HTML結構

首先，我們需要在HTML中創建一個輸入框和一個按鈕，用于用戶輸入城市名稱并觸發天氣查詢功能。我們可以使用一個div元素來顯示返回的天氣信息。

<input type="text" id="cityInput" placeholder="請輸入城市名稱">
<button onclick="getWeather()">查詢</button>
<div id="weatherDisplay"></div>

步驟二：編寫AJAX函數

接下來，我們需要編寫一個AJAX函數，用于向天氣API發送請求并處理返回的天氣數據。在這個例子中，我們將使用第三方的天氣API來獲取天氣信息。

<script>
function getWeather() {
var city = document.getElementById("cityInput").value;
var url ="http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=" + city;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayWeather(response);
}
};
xhr.send();
}
</script>

步驟三：顯示天氣信息

最后，我們需要編寫一個函數來顯示返回的天氣信息。這個函數將獲取返回的JSON數據，并將相關信息顯示在前面創建的div元素中。

<script>
function displayWeather(weatherData) {
var weatherDisplay = document.getElementById("weatherDisplay");
weatherDisplay.innerHTML = "城市：" + weatherData.location.name + "<br>" +
"天氣：" + weatherData.current.condition.text + "<br>" +
"溫度：" + weatherData.current.temp_c + "℃";
}
</script>

現在，當用戶在輸入框中輸入城市名稱并點擊查詢按鈕時，AJAX函數將被調用。它將向天氣API發送一個GET請求，并在成功獲取數據后調用displayWeather函數來顯示天氣信息。

通過這個案例，我們可以看到使用AJAX技術可以輕松地實現實時的數據交互。無論是天氣查詢、新聞更新還是任何其他需要實時更新的應用，都可以通過AJAX輕松實現。這種交互式體驗可以大大提高用戶的滿意度和使用效率。