在Web開發中，Ajax（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下與服務器交換數據的技術。通常，Ajax用于向服務器發送請求和接收響應，然后動態更新已加載的頁面內容，以實現無刷新操作和更好的用戶體驗。本文將討論如何使用Ajax來接收包含多個項的列表文件，并通過舉例說明來解釋技術細節和代碼實現。
當服務器返回一份包含多個項的列表文件時，我們可以使用Ajax來接收它們。考慮以下示例，我們有一個列表文件items.xml，其中包含了一些商品信息。我們將使用Ajax從服務器獲取這個列表文件，并將每個商品的名稱和價格顯示在網頁上。
首先，讓我們創建一個XMLHttpRequest對象，用于發送Ajax請求。然后，我們將指定請求的方法（GET或POST）、請求的URL（服務器上的列表文件路徑）以及是否以異步方式發送請求。在這個例子中，我們將以異步方式進行Ajax請求，因為我們希望在獲取列表文件的同時保持網頁的可用性。

html
<pre>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 處理響應的回調函數
}
};
xmlhttp.open("GET", "items.xml", true);
xmlhttp.send();
</script>

在上述代碼中，當Ajax請求的狀態發生變化時，xmlhttp.onreadystatechange函數將被調用。我們將在這個函數中處理服務器的響應。
在回調函數中，我們首先需要檢查請求的狀態和響應的狀態碼是否為200，這表示請求已成功并且服務器返回了所請求的頁面。然后，我們可以使用responseText屬性來獲取服務器返回的文本內容，并進一步處理。
接下來，我們需要解析這個XML文本內容，并提取出我們所需的商品信息。可以使用JavaScript的DOMParser對象來完成這個任務。DOMParser允許我們將XML文本解析為一個可操作的Document對象，以便在代碼中進行訪問和處理。html

<script>
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlhttp.responseText, "text/xml");
var items = xmlDoc.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var name = items[i].getElementsByTagName("name")[0].textContent;
var price = items[i].getElementsByTagName("price")[0].textContent;
// 在頁面上顯示商品信息
var itemContainer = document.createElement("div");
itemContainer.innerHTML = "<p>名稱：" + name + "</p>" + "<p>價格：" + price + "</p>";
document.body.appendChild(itemContainer);
}
</script>

在上述代碼中，我們首先使用DOMParser將返回的XML文本解析為xmlDoc對象。然后，我們使用getElementsByTagName方法獲取所有的item元素，遍歷這個列表，并從每個item元素中提取出商品的名稱和價格。
最后，我們通過創建div元素和使用innerHTML屬性將商品信息添加到itemContainer中。然后，我們將itemContainer添加到頁面的body元素中，以顯示商品信息。
通過以上代碼，我們成功地從服務器接收列表文件，并使用Ajax將商品信息動態展示在網頁上。這樣，我們實現了一個無刷新操作，用戶可以在不必刷新整個頁面的情況下實時獲取最新的商品信息。 Ajax技術為我們提供了一種非常靈活和高效的方式來處理列表文件，使我們的網頁更加動態和用戶友好。