AJAX是一種用于創(chuàng)建交互式網(wǎng)頁(yè)的技術(shù)。它可以讓網(wǎng)頁(yè)實(shí)時(shí)地從服務(wù)器獲取數(shù)據(jù)，并將其顯示在網(wǎng)頁(yè)上，而無(wú)需刷新整個(gè)頁(yè)面。同時(shí)，JSON（JavaScript Object Notation）是一種數(shù)據(jù)格式，用于將數(shù)據(jù)從服務(wù)器傳遞到網(wǎng)頁(yè)。在這篇文章中，我們將探討如何使用AJAX和JSON來(lái)創(chuàng)建一個(gè)動(dòng)態(tài)列表。

我們假設(shè)有一個(gè)學(xué)生信息的數(shù)據(jù)庫(kù)，其中包含學(xué)生的姓名、年齡和成績(jī)。我們可以使用AJAX從服務(wù)器獲取學(xué)生信息，并用JSON格式來(lái)傳遞這些數(shù)據(jù)。以下是一個(gè)使用AJAX和JSON創(chuàng)建學(xué)生列表的示例：

<script type="text/javascript">function getStudents() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var students = JSON.parse(this.responseText);
var list = document.getElementById("student-list");
for (var i = 0; i< students.length; i++) {
var student = students[i];
var item = document.createElement("li");
item.innerHTML = student.name + "，" + student.age + "歲，成績(jī)：" + student.grade;
list.appendChild(item);
}
}
};
xmlhttp.open("GET", "students.json", true);
xmlhttp.send();
}

在上面的代碼中，我們定義了一個(gè)名為getStudents()的函數(shù)。當(dāng)該函數(shù)被調(diào)用時(shí)，它會(huì)發(fā)送一個(gè)AJAX請(qǐng)求到服務(wù)器以獲取學(xué)生信息。在服務(wù)器返回響應(yīng)后，我們使用JSON.parse()方法解析響應(yīng)文本，并將結(jié)果存儲(chǔ)在一個(gè)名為students的變量中。

接下來(lái)，我們通過(guò)遍歷students數(shù)組來(lái)創(chuàng)建學(xué)生列表。對(duì)于每個(gè)學(xué)生，我們創(chuàng)建一個(gè)li元素，并將學(xué)生的信息以字符串的形式插入到li元素中。最后，我們將li元素添加到名為student-list的ul元素中。

要調(diào)用getStudents()函數(shù)并顯示學(xué)生列表，我們可以在網(wǎng)頁(yè)中添加一個(gè)按鈕，并調(diào)用該函數(shù)：

<button onclick="getStudents()">顯示學(xué)生列表</button><ul id="student-list"></ul>

當(dāng)用戶點(diǎn)擊“顯示學(xué)生列表”按鈕時(shí)，getStudents()函數(shù)將被調(diào)用，并通過(guò)AJAX獲取學(xué)生信息。獲取到的學(xué)生信息將以動(dòng)態(tài)的方式顯示在名為student-list的ul元素中。

使用AJAX和JSON來(lái)創(chuàng)建動(dòng)態(tài)列表的好處是，我們可以實(shí)時(shí)地更新網(wǎng)頁(yè)上的數(shù)據(jù)，而無(wú)需刷新整個(gè)頁(yè)面。這對(duì)于需要頻繁更新數(shù)據(jù)的應(yīng)用程序非常有用，比如社交媒體的實(shí)時(shí)通知、股票市場(chǎng)的實(shí)時(shí)報(bào)價(jià)等。

總之，AJAX和JSON的組合是一種強(qiáng)大的工具，可以用于創(chuàng)建動(dòng)態(tài)列表和實(shí)時(shí)更新數(shù)據(jù)。通過(guò)以上示例，我們可以看到如何使用AJAX從服務(wù)器獲取JSON數(shù)據(jù)，并將其顯示在網(wǎng)頁(yè)上。希望這篇文章對(duì)您理解AJAX和JSON的使用有所幫助。