Ajax（Asynchronous JavaScript and XML）是一種用于創建交互式Web應用程序的技術，它允許在不重新加載整個頁面的情況下，通過與服務器進行異步通信，更新部分頁面內容。在這篇文章中，我們將介紹Ajax的一個實際應用示例，并詳細說明如何進行調用。 這個示例是一個簡單的天氣查詢應用程序。用戶可以在輸入框中輸入城市名稱，并通過點擊“查詢”按鈕來獲取該城市的天氣信息。在實現之前，我們需要確保已經引入jQuery庫，因為在這個示例中我們將使用它來簡化Ajax的調用過程。 在HTML文件的標簽內，我們需要引入jQuery庫的CDN鏈接。代碼如下所示：

<!-- 引入jQuery庫 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后，我們需要在標簽內編寫一些HTML代碼。首先，我們添加一個輸入框和一個按鈕，用于用戶輸入城市名稱和觸發查詢操作。代碼如下所示：

<!-- 輸入框 -->
<input type="text" id="cityName" placeholder="請輸入城市名稱">
<!-- 查詢按鈕 -->
<button id="searchButton">查詢</button>
<!-- 展示天氣信息的容器 -->
<div id="weatherInfo"></div>

在JavaScript代碼中，我們需要獲取用戶輸入的城市名稱，并發送Ajax請求獲取對應城市的天氣數據。在用戶點擊查詢按鈕時，觸發一個點擊事件，并在事件處理函數內完成Ajax調用。代碼如下所示：

$(document).ready(function() {
// 查詢按鈕點擊事件
$("#searchButton").click(function() {
// 獲取城市名稱
var cityName = $("#cityName").val();
// 發送Ajax請求
$.ajax({
url: "https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=" + cityName,
method: "GET",
success: function(response) {
// 處理返回的天氣數據
var weatherInfo = "城市: " + response.location.name + "<br>";
weatherInfo += "天氣: " + response.current.condition.text + "<br>";
weatherInfo += "溫度: " + response.current.temp_c + "℃<br>";
// 將天氣信息展示到頁面上
$("#weatherInfo").html(weatherInfo);
},
error: function() {
// 處理錯誤信息
$("#weatherInfo").html("獲取天氣信息失敗");
}
});
});
});

在這段代碼中，我們首先使用jQuery的$(document).ready()函數來確保頁面加載完畢后再執行JavaScript代碼。然后，我們為查詢按鈕添加了一個點擊事件處理函數。在該函數內部，我們首先獲取用戶輸入的城市名稱，并將其拼接到天氣查詢的API鏈接中，并將API請求發送到服務器。當請求成功返回時，我們將服務器返回的天氣數據展示到頁面上；當請求出錯時，我們展示一個錯誤信息。 這樣，我們就完成了整個天氣查詢應用程序的代碼編寫。用戶現在可以輸入城市名稱并點擊查詢按鈕來獲取天氣信息了。通過Ajax的異步通信機制，用戶無需重新加載整個頁面，只需通過與服務器的短暫通信，就可以獲取到所需的數據并更新到頁面上。這樣的用戶體驗更加流暢和高效。 通過這個簡單的示例，我們可以看到Ajax的強大之處。它使得我們可以實現動態更新頁面內容的功能，從而提升了用戶體驗。無論是天氣查詢、即時聊天還是購物車更新，Ajax都可以幫助我們實現與服務器的快速通信，實現交互性更強的Web應用程序。