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

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

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

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

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

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

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

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);
}

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