AJAX（Asynchronous JavaScript and XML）是一種用于實現異步網頁交互的技術。它可以在不刷新整個頁面的情況下，通過與服務器通信來更新部分頁面內容。在實際的Web開發中，二級聯動是一種常見的需求，它可以在用戶選擇第一級選項后，動態地加載第二級選項。通常情況下，XML文件被用來存儲數據，然而，我們也可以通過實現不使用XML文件的方式來實現二級聯動。在本文中，我們將探討如何使用AJAX完成這一任務。

為了簡化問題，假設我們正在開發一個在線訂餐系統。我們希望在用戶選擇城市后，動態加載該城市下的餐館列表。傳統的方式是將城市和餐館的數據存儲在XML文件中。然而，在本文中，我們將使用JSON（JavaScript Object Notation）格式來存儲數據。

首先，我們需要編寫一個用于展示城市列表的HTML頁面。頁面上有一個下拉框，其中包含所有的城市選項：

<select id="city">
<option value="0">請選擇城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>

接下來，我們需要編寫一個JavaScript函數，用于獲取城市下的餐館列表。這里，我們使用jQuery庫來簡化AJAX請求的操作：

function loadRestaurants(cityId) {
if (cityId === '0') {
// 如果用戶選擇了"請選擇城市"，不做任何操作
return;
}
$.ajax({
url: 'get_restaurants.php',
method: 'GET',
data: { cityId: cityId },
success: function(response) {
// 解析JSON數據
var restaurants = JSON.parse(response);
// 清空餐館下拉框
$('#restaurant').empty();
// 添加餐館選項
restaurants.forEach(function(restaurant) {
$('#restaurant').append('<option value="' + restaurant.id + '">' + restaurant.name + '</option>');
});
}
});
}
// 監聽城市下拉框的改變事件
$('#city').change(function() {
var cityId = $(this).val();
loadRestaurants(cityId);
});

在上述代碼中，我們定義了一個名為"loadRestaurants"的函數，在用戶選擇城市后被調用。該函數首先檢查用戶是否已選擇城市，如果選擇了"請選擇城市"，則不執行任何操作。 然后，我們使用jQuery的ajax方法來發送一個GET請求到"get_restaurants.php"文件中，并通過data參數將城市ID傳遞給服務器。在成功回調函數中，我們首先解析服務器返回的JSON數據，然后清空餐館下拉框中的選項，并將每個餐館對象添加為一個選項。 最后，我們使用jQuery的change方法監聽城市下拉框的改變事件，并在事件觸發時調用"loadRestaurants"函數。這樣，當用戶選擇城市時，餐館下拉框將被動態加載。

總之，通過使用AJAX技術和JSON格式來實現二級聯動，我們可以實現用戶友好的在線訂餐系統。不再依賴XML文件的方式，我們可以更靈活地處理數據，并提供更好的用戶體驗。希望本文對于理解如何使用AJAX實現二級聯動不使用XML文件有所幫助。