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

在上述代码中，我们首先获取了一个用于显示学生数据的元素,我们将每个学生的数据创建为一个