當我們在網頁中需要實現兩個list并行返回的功能時，可以借助AJAX（Asynchronous JavaScript and XML）技術來實現。AJAX通過使用JavaScript和XMLHttpRequest對象，可以實現不需要刷新整個網頁的情況下，從服務器獲取數據并將其顯示在頁面中。在本文中，我們將探討如何使用AJAX技術來實現兩個list并行返回的功能，并通過舉例說明具體實現過程。 假設我們正在開發一個在線購物網站，現在需要實現一個商品分類的功能，分別顯示商品的大類和小類。用戶可以選擇大類之后，頁面會并行返回相應的小類列表。使用AJAX技術可以實現這樣一種需求，在不刷新整個頁面的情況下，動態地加載和顯示小類列表數據。 首先，我們需要使用JavaScript創建一個XHR（XMLHttpRequest）對象，用于與服務器進行數據交互。可以通過如下代碼創建XHR對象：

var xhr = new XMLHttpRequest();

接著，我們需要使用XHR對象向服務器發送請求，獲取數據。在這個例子中，我們將向服務器發送一個GET請求，獲取大類列表的數據。可以通過如下代碼創建并發送GET請求：

xhr.open('GET', 'url');
xhr.send();

在服務器返回響應后，我們需要對獲取到的數據進行處理并顯示在頁面中。可以在XHR對象的onreadystatechange事件中處理服務器返回的數據。以下是一個處理并顯示大類列表數據的例子：

xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var categories = response.categories;
var categoriesList = document.getElementById('categories-list');
for(var i = 0; i< categories.length; i++) {
var categoryItem = document.createElement('li');
categoryItem.textContent = categories[i];
categoriesList.appendChild(categoryItem);
}
}
};

以上代碼首先檢查XHR對象的readyState屬性是否為4，這表示服務器的響應已經完全接收。接下來，我們檢查XHR對象的status屬性是否為200，這表示服務器成功返回了數據。如果以上兩個條件均滿足，我們可以將服務器返回的數據解析為JSON格式，并將大類列表數據顯示在頁面的某個元素中（例如，一個id為'categories-list'的

元素）。 接下來，我們需要實現小類列表的并行返回功能。當用戶選擇一個大類時，我們需要向服務器發送一個GET請求，獲取該大類對應的小類列表數據，并將其顯示在頁面中的另一個列表中。我們可以通過在大類列表中的元素上添加一個onclick事件來實現這一功能。以下是一個獲取并顯示小類列表數據的例子：

var categoryItems = document.getElementsByClassName('category-item');
for(var i = 0; i< categoryItems.length; i++) {
categoryItems[i].onclick = function() {
var categoryId = this.getAttribute('data-category-id');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'url?category_id=' + categoryId);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var subCategories = response.subCategories;
var subCategoriesList = document.getElementById('sub-categories-list');
subCategoriesList.innerHTML = '';
for(var j = 0; j< subCategories.length; j++) {
var subCategoryItem = document.createElement('li');
subCategoryItem.textContent = subCategories[j];
subCategoriesList.appendChild(subCategoryItem);
}
}
};
};
}

以上代碼中，我們首先獲取所有的大類列表中的元素，并為每個元素添加一個onclick事件。當用戶選擇某個大類時，會觸發該元素的onclick事件，并執行其中的代碼。在onclick事件的處理函數中，我們首先獲取被點擊元素的data-category-id屬性（用于獲取該大類的ID）。接著，我們創建并發送一個GET請求，獲取該大類對應的小類列表數據。與顯示大類列表的代碼類似，我們同樣需要在XHR對象的onreadystatechange事件中處理服務器返回的小類列表數據，并將其顯示在頁面的另一個列表中（例如，一個id為'sub-categories-list'的
元素）。 通過以上的代碼和示例，我們可以實現一個使用AJAX技術并行返回兩個列表的功能。用戶可以選擇大類并得到相應的小類列表數據，而無需刷新整個頁面。這樣一種功能的實現可以提升用戶的體驗，使得頁面變得更加動態和交互性。