Ajax是一種用于改進網頁用戶體驗的技術，能夠實現無刷新加載數據的功能。二級聯動是一種常見的需求，例如在城市選擇頁面中，當用戶選擇一個省份時，第二個下拉菜單會動態顯示該省份下的所有城市，這就是二級聯動。使用Ajax可以實現無刷新的二級聯動，提升用戶體驗。

要實現無刷新的二級聯動，首先需要在頁面加載時將第二個下拉菜單的內容置為空。當用戶選擇第一個下拉菜單的某個選項時，通過Ajax向服務器發送請求，獲取對應的數據。服務器收到請求后，根據請求的參數進行處理，然后返回給前端相應的數據。前端通過Ajax的回調函數，將返回的數據填充到第二個下拉菜單中，實現無刷新的二級聯動。

// HTML部分
<select id="province">
<option value="1">浙江省</option>
<option value="2">江蘇省</option>
<option value="3">廣東省</option>
</select>
<select id="city"></select>
// JavaScript部分
var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
provinceSelect.addEventListener("change", function() {
var provinceId = provinceSelect.value;
// 發送Ajax請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var cities = JSON.parse(xhr.responseText);
// 填充第二個下拉菜單
citySelect.innerHTML = "";
for (var i = 0; i< cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i].id;
option.textContent = cities[i].name;
citySelect.appendChild(option);
}
}
};
xhr.open("GET", "/get_cities?provinceId=" + provinceId, true);
xhr.send();
});

以上代碼通過addEventListener給第一個下拉菜單的change事件綁定了一個回調函數。當用戶選擇省份時，會觸發這個函數。在回調函數中，通過Ajax發送一個GET請求到服務器，并通過URL的query參數將選中的省份ID傳遞給服務器。服務器根據省份ID進行邏輯處理，返回符合條件的數據。前端在Ajax的回調函數中將返回的數據轉換為JSON格式，并通過DOM操作將數據填充到第二個下拉菜單中。

假設服務器端返回的數據格式如下：

[
{"id": 1, "name": "杭州市"},
{"id": 2, "name": "寧波市"}
]

當用戶選擇浙江省時，第二個下拉菜單中會顯示杭州市和寧波市兩個選項。如果用戶選擇了江蘇省，第二個下拉菜單中可能會顯示南京市和蘇州市等選項，具體的數據根據服務器返回的數據而定。

通過以上實例可以看出，使用Ajax實現無刷新的二級聯動非常簡潔高效。用戶在選擇第一個下拉菜單時，頁面不會刷新，只是通過Ajax與服務器進行了數據的交互，提升了用戶體驗。開發人員只需編寫少量的代碼，就可以實現這一功能。