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

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

<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事件中，我們調(diào)用了一個getCityList函數(shù)，該函數(shù)用于發(fā)送AJAX請求并更新城市列表。

function getCityList() {
var country = document.getElementById("country").value;
var citySelect = document.getElementById("city");
// 清空城市列表的選項
citySelect.innerHTML = "";
// 創(chuàng)建一個新的AJAX請求
var xhr = new XMLHttpRequest();
// 設(shè)置請求的方法和URL
xhr.open("GET", "get-cities.php?country=" + country, true);
// 設(shè)置請求完成后的回調(diào)函數(shù)
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功，處理返回的城市數(shù)據(jù)
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);
}
}
};
// 發(fā)送AJAX請求
xhr.send();
}

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

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

然后，我們設(shè)置xhr對象的onreadystatechange函數(shù)，該函數(shù)將在AJAX請求狀態(tài)發(fā)生變化時被調(diào)用。當請求的狀態(tài)為XMLHttpRequest.DONE（即請求已完成）、狀態(tài)碼為200（即請求成功）時，我們解析返回的城市數(shù)據(jù)，并通過循環(huán)為城市列表創(chuàng)建選項，并將其添加到城市列表中。

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

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