在現代網頁開發中，動態加載內容的需求越來越常見。其中，使用 Ajax 技術來循環輸出 HTML 是一種非常常見且強大的方式。通過 Ajax，我們可以通過后臺請求數據，并將數據嵌入到 HTML 頁面中，實現動態加載的效果。本文將介紹如何使用 Ajax 來實現循環輸出 HTML 的功能，并通過舉例來進一步說明。 在一個購物網站中，我們可能需要循環顯示商品列表，并將每個商品的名稱、價格和圖片等信息動態加載到頁面上。使用 Ajax 技術可以非常方便地實現這個功能。首先，我們需要在 HTML 頁面中創建一個容器，用于展示商品列表的部分。例如，我們使用一個 div 元素，并為其指定一個 id，如下所示：

<div id="product-list"></div>

然后，我們可以使用 JavaScript 代碼通過 Ajax 請求后臺數據，并將數據循環輸出到這個容器中。例如，我們可以通過以下代碼實現：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var products = JSON.parse(this.responseText); // 解析 JSON 數據
var productListElement = document.getElementById("product-list");
// 循環輸出每個商品
for (var i = 0; i< products.length; i++) {
var product = products[i];
// 創建商品的 HTML 結構
var productElement = document.createElement("div");
productElement.innerHTML = "<p>商品名稱：" + product.name + "</p>"
+ "<p>價格：" + product.price + "</p>"
+ "<p><img src=\"" + product.image + "\"/></p>";
// 將商品添加到容器中
productListElement.appendChild(productElement);
}
}
};
xmlhttp.open("GET", "get_products.php", true); // 發送 GET 請求到后臺腳本
xmlhttp.send();

在上面的代碼中，我們通過 XMLHttpRequest 對象發送一個 GET 請求到后臺腳本 get_products.php，該腳本應該返回一個包含商品數據的 JSON 字符串。在收到響應后，我們解析這個 JSON 字符串，并循環輸出每個商品的信息。每個商品的信息被創建為一個包含商品名稱、價格和圖片的 HTML 結構，并添加到商品列表容器中。 通過以上的代碼，我們可以實現一個動態加載商品列表的功能。當頁面加載時，Ajax 技術會異步請求后臺數據并將數據嵌入到頁面中，而不需要刷新整個頁面。這樣可以提升用戶體驗，并減少服務器的負載。 除了商品列表，我們還可以通過類似的方式循環輸出其他類型的 HTML 內容。例如，在一個社交媒體網站中，我們可能需要循環顯示用戶發布的動態消息，并動態加載每條消息的文本內容和點贊數量。通過 Ajax 技術，我們可以通過后臺請求用戶動態數據，并將每條消息的內容動態加載到頁面中。類似于上面的示例，我們可以在 HTML 頁面中創建一個容器，并使用類似的 JavaScript 代碼來實現循環輸出消息的功能。 綜上所述，使用 Ajax 技術來循環輸出 HTML 是一種非常強大且常用的方式。通過 Ajax，我們可以實現動態加載不同類型的內容，極大地提升了網頁的交互性和用戶體驗。無論是商品列表、動態消息還是其他類型的內容，Ajax 技術都能夠方便地實現循環輸出，并將數據動態加載到頁面中。希望本文的介紹對您理解和應用 Ajax 技術有所幫助。