AJAX是一種處理網頁異步請求的技術，可以在不重新加載整個頁面的情況下更新部分網頁內容。通過利用AJAX和異步請求，我們可以實現二級聯動效果，即根據用戶在一個下拉菜單中的選擇，動態改變另一個下拉菜單的選項。這種技術在很多網頁應用中都被廣泛使用，比如一些購物網站的商品篩選功能。本文通過舉例和詳細說明，介紹了如何使用AJAX異步請求來實現一個簡單的二級聯動效果。

假設我們有一個表單，其中包含兩個下拉菜單，一個是國家列表，另一個是城市列表。當用戶在國家列表中選擇一個國家后，我們希望城市列表能夠自動更新為對應國家的城市選項。為了實現這個功能，我們需要借助AJAX異步請求來獲取城市數據，并用JavaScript動態更新城市列表的選項。

<form>
<select id="country" onchange="getCityList()">
<option value="China">中國</option>
<option value="USA">美國</option>
<option value="Japan">日本</option>
</select>
<select id="city"></select>
</form>

上面的代碼是一個簡單的表單，其中兩個下拉菜單分別有一個id屬性，分別是"country"和"city"。在國家列表的onchange事件中，我們調用了一個getCityList函數，該函數用于發送AJAX請求并更新城市列表。

function getCityList() {
var country = document.getElementById("country").value;
var citySelect = document.getElementById("city");
// 清空城市列表的選項
citySelect.innerHTML = "";
// 創建一個新的AJAX請求
var xhr = new XMLHttpRequest();
// 設置請求的方法和URL
xhr.open("GET", "get-cities.php?country=" + country, true);
// 設置請求完成后的回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功，處理返回的城市數據
var cities = JSON.parse(xhr.responseText);
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.textContent = cities[i];
citySelect.appendChild(option);
}
}
};
// 發送AJAX請求
xhr.send();
}

在getCityList函數中，我們首先獲取用戶選擇的國家和城市列表的引用。然后，我們清空城市列表的選項，為了避免選擇不同國家后，出現殘留的舊選項。

接下來，我們創建一個新的XMLHttpRequest對象xhr，并使用open方法指定請求的方法和URL。在這個例子中，我們將城市數據存儲在一個名為"get-cities.php"的文件中，并通過URL參數傳遞當前所選的國家。

然后，我們設置xhr對象的onreadystatechange函數，該函數將在AJAX請求狀態發生變化時被調用。當請求的狀態為XMLHttpRequest.DONE（即請求已完成）、狀態碼為200（即請求成功）時，我們解析返回的城市數據，并通過循環為城市列表創建選項，并將其添加到城市列表中。

最后，我們調用xhr對象的send方法發送AJAX請求。這樣，當用戶在國家列表中選擇一個國家時，將觸發getCityList函數并發送AJAX請求，城市列表將被更新為對應國家的城市選項。

總結：通過使用AJAX異步請求，我們可以實現簡單的二級聯動效果，允許用戶在一個下拉菜單中的選擇動態更新另一個下拉菜單的選項。這種技術可以擴展到更復雜的場景，比如根據不同的城市加載不同的商店列表等。通過理解AJAX和異步請求的基本原理，并結合實際需求，我們可以靈活地運用它們來提升網頁的交互性和用戶體驗。