本文將介紹一個基于Ajax的二級聯動菜單源碼。二級聯動菜單是一種常見的用戶交互方式，可以用于省市選擇、商品分類等場景。通過Ajax技術，可以實現頁面不刷新的情況下，根據用戶的選擇動態加載下級菜單內容。

假設我們有一個城市選擇的功能，用戶需要先選擇一個省份，然后根據省份選擇相應的城市。傳統的方式是在頁面中靜態地列舉出所有省份和城市的選項，用戶進行選擇后提交表單。而通過Ajax實現的二級聯動菜單，可以在用戶選擇省份之后，動態地加載相應的城市選項。

<select id="province">
<option value="1">省份1</option>
<option value="2">省份2</option>
<option value="3">省份3</option>
</select>
<select id="city">
<option value="1">城市1</option>
<option value="2">城市2</option>
<option value="3">城市3</option>
</select>

以上是簡單的HTML結構，包含了省份和城市兩個下拉菜單。接下來，我們需要使用JavaScript來實現根據省份選項動態加載城市選項。

document.getElementById('province').addEventListener('change', function() {
var provinceId = this.value;
var citySelect = document.getElementById('city');
// 使用Ajax發送請求，獲取對應省份的城市數據
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/cities?provinceId=' + provinceId, true);
xhr.onload = function() {
if (xhr.status === 200) {
// 清空城市選項
citySelect.innerHTML = '';
// 解析返回的JSON數據
var cities = JSON.parse(xhr.responseText);
// 根據返回的城市數據生成對應的選項
cities.forEach(function(city) {
var option = document.createElement('option');
option.value = city.id;
option.textContent = city.name;
citySelect.appendChild(option);
});
}
};
xhr.send();
});

在上述代碼中，我們首先通過`getElementById`方法獲取省份和城市的下拉菜單元素，并通過`addEventListener`方法監聽省份下拉菜單的`change`事件。當用戶選擇了省份后，在事件處理函數中，我們使用Ajax發送請求去獲取對應省份的城市數據。

通過`XMLHttpRequest`對象，我們可以發送一個GET請求到指定的URL，并在請求成功后獲取到返回的數據。在本例中，我們假設服務器端提供了一個接口`/api/cities`，通過`provinceId`參數來獲取對應省份的城市數據。

在請求成功后，我們首先清空城市下拉菜單的選項，然后通過`JSON.parse`方法解析服務器返回的JSON數據。對于每個城市，我們使用`createElement`方法創建一個`option`元素，并設置其`value`和`textContent`屬性，然后將該元素添加到城市下拉菜單中。

通過以上的代碼，我們實現了一個基于Ajax的二級聯動菜單。當用戶選擇省份后，頁面會自動加載對應的城市選項。這種方式可以提升用戶體驗，減少頁面刷新，以及減輕服務器端的負擔。