Ajax（Asynchronous JavaScript and XML）是一種運用JavaScript和XML技術的異步通信方式，在網頁中實現動態更新的效果。通過Ajax，我們可以在不刷新整個頁面的情況下，向服務器發送請求并接收響應，實現頁面的局部更新。在一些案例中，我們可能需要遍歷拼接一個集合，并將其展示在頁面上。本文將介紹如何使用Ajax遍歷拼接一個集合，并給出詳細的示例說明。
在開發過程中，我們常常會遇到需要展示一個由后端返回的集合數據的情況。假設我們有一個后端接口/api/users，以獲取所有用戶的信息。我們需要通過Ajax請求該接口，并將返回的用戶信息集合拼接在頁面上。
一種常見的方法是使用jQuery的$.ajax方法發送請求，并使用$.each方法遍歷集合。以下是一個示例的代碼：

javascript
$.ajax({
url: '/api/users',
method: 'GET',
success: function(response) {
var users = response.users; // 假設后端返回一個名為 "users" 的數組
var userList = '';
$.each(users, function(index, user) {
userList += '<li>' + user.name + '</li>';
});
$('#userListContainer').append('<ul>' + userList + '</ul>');
}
});

上述代碼中，我們首先通過$.ajax方法向服務器發送GET請求，獲取所有用戶的信息。在請求成功的回調函數中，我們使用$.each方法遍歷后端返回的用戶集合，并將每個用戶的姓名以列表項的形式拼接到一個字符串userList中。
最后，我們使用append方法將拼接好的列表追加到一個ID為userListContainer的容器元素中。這樣，當請求成功時，頁面上將展示出所有用戶姓名的列表。
除了jQuery，我們還可以使用純JavaScript實現以上功能。以下是一個純JavaScript的示例代碼：

javascript
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var users = JSON.parse(this.responseText).users; // 假設后端返回一個名為 "users" 的數組
var userList = '';
users.forEach(function(user) {
userList += '<li>' + user.name + '</li>';
});
document.getElementById('userListContainer').innerHTML = '<ul>' + userList + '</ul>';
}
};
xhttp.open('GET', '/api/users', true);
xhttp.send();

該代碼使用XMLHttpRequest對象發送GET請求，并在請求狀態為4且狀態碼為200時，處理服務器的響應。與jQuery示例類似，我們同樣遍歷后端返回的用戶集合，并將每個用戶的姓名以列表項的形式拼接到字符串userList中。
最后，我們將拼接好的列表賦值給ID為userListContainer的容器元素的innerHTML屬性，從而實現在頁面上展示用戶列表。
綜上所述，無論是使用jQuery還是純JavaScript，我們都可以通過Ajax來遍歷拼接一個集合，并將其展示在頁面上。這種方式非常靈活，并且有助于實現動態更新的效果，提升用戶體驗。