AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式Web應用程序的技術，它使得用戶界面可以在不刷新整個頁面的情況下與服務器進行異步通信。在本文中，我們將討論如何使用AJAX來實現一個基于數據庫的二級聯動功能。該功能常見于城市和地區之間的關聯，用戶在選擇一個城市后，會相應顯示該城市下的所有地區。

假設我們有一個表格來存儲城市和地區的信息。城市表包含城市ID和城市名稱兩個字段，地區表包含地區ID、地區名稱和所屬城市ID三個字段。我們的目標是通過AJAX從數據庫中獲取城市數據，并在用戶選擇城市時，使用AJAX查詢數據庫獲得該城市下的所有地區。以下是實現二級聯動的示例代碼：

<!-- HTML -->
<select id="city" onchange="getAreas()">
<option value="">請選擇城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>
<select id="area">
<option value="">請選擇地區</option>
</select>
<script>
// JavaScript and AJAX
function getAreas() {
var cityId = document.getElementById("city").value;
// 創建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 設置回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var areas = JSON.parse(xhr.responseText);
var areaSelect = document.getElementById("area");
// 清空地區下拉菜單
areaSelect.innerHTML = "";
// 添加地區選項
for (var i = 0; i < areas.length; i++) {
var option = document.createElement("option");
option.value = areas[i].id;
option.text = areas[i].name;
areaSelect.appendChild(option);
}
}
};
// 發起AJAX請求
xhr.open("GET", "getAreas.php?cityId=" + cityId, true);
xhr.send();
}
</script>

在上述代碼中，我們首先創建了兩個下拉菜單，一個用于選擇城市，另一個用于顯示地區。當用戶選擇城市時，我們調用getAreas()函數。該函數獲取選定城市的ID，并使用AJAX發送一個GET請求到后端。在這個請求中，我們附加了城市ID作為查詢參數，以指示服務器返回與該城市相關的地區數據。

后端代碼（如上面的getAreas.php）是負責從數據庫中檢索地區數據的處理程序。它接收到前端發送的GET請求，從查詢參數中獲取城市ID，并使用該ID查詢數據庫中與之對應的地區數據。最后，處理程序將數據編碼為JSON格式，并發送回前端。

前端收到來自后端的響應后，使用JSON.parse()解析數據，并使用appendChild()方法將每個地區作為一個選項添加到地區下拉菜單中。通過動態更新地區下拉菜單，我們實現了二級聯動的效果。

總結來說，通過AJAX聯系數據庫實現二級聯動很簡單。我們可以通過JavaScript中的XMLHttpRequest對象發送異步請求，并在接收到響應后更新頁面的內容。對于城市和地區的二級聯動，可以通過獲取選定城市的ID，并送給后端的處理程序，然后根據該ID從數據庫中檢索相應的地區數據，再將其顯示在地區下拉菜單中。