AJAX（Asynchronous JavaScript and XML）是一種用于在Web應用程序中發送和接收數據的技術。它允許我們通過不重新加載整個頁面的方式，實時獲取新的數據并更新頁面內容。在HTML中，我們可以使用AJAX來實現各種功能，例如動態加載數據、表單提交、搜索功能等。本文將通過舉例說明，深入探討AJAX在HTML中的應用。

假設我們正在開發一個天氣預報網站。我們需要根據用戶輸入的城市名稱，發送請求并獲取對應城市的天氣數據，并將其實時顯示在網頁上。使用AJAX可以輕松實現這一功能。

function getWeather(city) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=" + city);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var weather = response.current.condition.text;
var temperature = response.current.temp_c;
document.getElementById("weather").innerHTML = "天氣：" + weather;
document.getElementById("temperature").innerHTML = "溫度：" + temperature + "℃";
}
}
xhr.send();
}

在上面的代碼中，我們定義了一個名為getWeather的函數。它接受一個參數city，表示用戶輸入的城市名稱。然后，我們創建了一個XMLHttpRequest對象，通過GET請求向天氣API發送請求。

在發送請求的同時，我們使用xhr.onreadystatechange事件來監聽請求的狀態變化。只有當請求成功返回（狀態碼為200）且響應狀態為readyState時，我們才解析響應數據，并將天氣和溫度顯示在網頁上。

接下來，我們需要調用getWeather函數以響應用戶的輸入。如果我們在HTML中有一個按鈕，點擊按鈕時會調用getWeather函數并傳遞輸入的城市名稱：

<input type="text" id="cityInput" placeholder="輸入城市名稱">
<button onclick="getWeather(document.getElementById('cityInput').value)">獲取天氣</button>
<p id="weather"></p>
<p id="temperature"></p>

通過這段HTML代碼，用戶可以輸入城市名稱并點擊按鈕獲取天氣數據。將城市名稱作為參數傳遞給getWeather函數，然后在函數內部發送AJAX請求并更新頁面上的天氣和溫度數據。

除了獲取數據，AJAX在HTML中還可以用于提交表單數據，并以異步方式處理表單提交。假設我們有一個用戶注冊表單，我們可以使用AJAX來驗證用戶輸入的數據并實時返回驗證結果給用戶。

function validateForm() {
var xhr = new XMLHttpRequest();
var name = document.getElementById("nameInput").value;
var email = document.getElementById("emailInput").value;
xhr.open("POST", "validate.php");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
document.getElementById("validationResult").innerHTML = response;
}
}
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&email=" + email);
}

在上面的代碼中，我們定義了一個名為validateForm的函數。當用戶點擊提交按鈕時，我們通過調用這個函數。函數內部首先獲取表單中的姓名和電子郵件地址，并創建一個XMLHttpRequest對象。然后，我們通過POST請求將姓名和電子郵件地址發送到validate.php，并在請求成功返回時將驗證結果顯示在網頁上。

<form id="registrationForm" onsubmit="validateForm(); return false;">
<label for="nameInput">姓名:</label>
<input type="text" id="nameInput">
<label for="emailInput">電子郵件:</label>
<input type="email" id="emailInput">
<button type="submit">提交</button>
</form>
<p id="validationResult"></p>

通過以上的HTML代碼，用戶可以輸入姓名和電子郵件地址，并點擊提交按鈕。在表單提交事件onsubmit中調用validateForm函數進行表單驗證。驗證結果將以異步方式返回，并實時顯示在網頁上。

總結起來，通過AJAX，我們可以在HTML中實現各種功能，包括動態加載數據、表單提交和實時更新等。使用AJAX，我們可以提供更好的用戶體驗，并將Web應用程序推向一個新的水平。