AJAX（Asynchronous JavaScript and XML）是一種在網頁中無需重新加載整個頁面的情況下向服務器發送請求并獲取數據的技術。它可以實現動態刷新網頁內容，提高用戶的交互體驗。在使用AJAX顯示集合數據時，我們可以通過向服務器發送請求并獲取JSON數據，然后使用JavaScript將數據動態地插入到網頁中。本文將通過舉例和解釋說明如何使用AJAX來顯示集合數據。

假設我們有一個學生信息的集合，其中包含了學生的姓名、年齡和性別等信息。我們希望在網頁上顯示這些學生的數據。首先，我們需要將學生信息存儲在服務器上，并提供一個接口用于獲取這些信息。

// 假設服務器接口的URL為：/students
// 返回的數據格式為JSON
[
{
"name": "小明",
"age": 18,
"gender": "男"
},
{
"name": "小紅",
"age": 17,
"gender": "女"
},
{
"name": "小剛",
"age": 19,
"gender": "男"
}
]

接下來，我們可以使用AJAX來獲取這些學生數據，并將其顯示在網頁上。首先，我們需要創建一個XMLHttpRequest對象，用于發送請求并獲取數據。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var students = JSON.parse(xhr.responseText);
// 處理學生數據
}
};
xhr.open("GET", "/students", true);
xhr.send();

在上述代碼中，我們使用了XMLHttpRequest對象來發送GET請求，并指定了請求的URL為"/students"。當服務器返回響應時，我們可以通過xhr.readyState和xhr.status來判斷請求的狀態，如果狀態符合要求，則可以通過xhr.responseText獲取到返回的JSON數據。

接下來，我們可以使用JavaScript來處理獲取到的學生數據，并將其動態地插入到網頁中。我們可以使用DOM操作來創建HTML元素，并將學生數據插入到這些元素中。

var studentsDiv = document.getElementById("students");
for (var i = 0; i < students.length; i++) {
var student = students[i];
var studentElement = document.createElement("div");
studentElement.innerHTML = "姓名：" + student.name + "<br>年齡：" + student.age + "<br>性別：" + student.gender;
studentsDiv.appendChild(studentElement);
}

在上述代碼中，我們首先獲取了一個用于顯示學生數據的元素,我們將每個學生的數據創建為一個