Ajax 是一種強大的前端技術，可以實現在網頁上無需重新加載整個頁面的情況下，實時更新部分內容。其中一種常見的應用場景就是通過 Ajax 在網頁上遍歷循環顯示數據。本文將介紹如何使用 Ajax 來循環遍歷顯示項目，并提供示例代碼來說明。
在網頁開發中，經常會遇到需要遍歷一個數組或對象，并逐個顯示其每個項目的情況。在傳統的網頁開發中，我們通常使用循環語句，如 foreach 或 for 循環來實現這一功能。然而，由于瀏覽器是單線程的，循環語句會導致瀏覽器阻塞，直到循環結束才能更新頁面。這樣會導致用戶在頁面上看到空白，直到循環結束才能看到最終結果。
而使用 Ajax 技術，我們可以實現在循環過程中實時更新頁面，讓用戶能夠看到數據的加載過程，而不是等待循環結束才看到最終結果。下面是一個示例代碼，展示了如何使用 Ajax 循環遍歷并顯示項目：

<!-- HTML 代碼 -->
<div id="result"></div>
<!-- JavaScript 代碼 -->
var items = ['Apple', 'Banana', 'Orange', 'Mango'];
function displayItem(item) {
var resultDiv = document.getElementById('result');
resultDiv.innerHTML += '<p>' + item + '</p>';
}
items.forEach(function(item) {
// 使用 Ajax 發送請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 請求成功后，調用 displayItem 函數顯示項目
displayItem(item);
}
};
xhr.open('GET', 'https://example.com/api/item/' + item, true);
xhr.send();
});

在上面的代碼中，我們定義了一個 items 數組，其中包含了一些水果的名稱。接下來，我們使用 forEach 方法遍歷 items 數組，并為每個項目發送一個 Ajax 請求。在每個 Ajax 請求的回調函數中，我們調用 displayItem 函數來顯示項目。
displayItem 函數是用來在頁面上顯示項目的，它接受一個參數 item，將其添加到結果的 div 元素中。通過將每個項目逐個顯示在頁面上，我們可以實現實時更新的效果。
使用 Ajax 循環遍歷顯示項目的好處是，用戶可以實時看到項目的加載過程，而不需要等待整個循環結束。這可以極大地提升用戶體驗，特別是在遍歷的項目數量較大的情況下。
當然，實際情況可能更加復雜。可能需要處理錯誤情況、添加加載動畫或進度條等。但是基本的原理和上述示例代碼是相似的。通過在每次請求的回調函數中更新頁面，我們可以實現在循環過程中實時顯示項目，并提供更好的用戶體驗。
綜上所述，使用 Ajax 循環遍歷顯示項目是一種強大的前端技術。
通過實時更新頁面，用戶可以實時看到項目的加載過程，從而提升用戶體驗。無論是遍歷數組、對象還是其他數據結構，都可以使用類似的原理來實現。在實際開發中，我們可以根據需求做出適當的調整和擴展，以滿足各種復雜的需求，并進一步提升用戶體驗。