我們首先創(chuàng)建一個(gè)簡(jiǎn)單的HTML頁(yè)面，其中包含一個(gè)"Get User"按鈕和一個(gè)用于展示用戶信息的
<!DOCTYPE html> <html> <head> <title>Ajax Example</title> </head> <body> <button onclick="getUser()">Get User</button> <div id="user-info"></div> </body> </html>
在JavaScript代碼中，我們編寫(xiě)一個(gè)getUser函數(shù)，該函數(shù)將通過(guò)ajax從服務(wù)器獲取用戶信息。我們使用XMLHttpRequest對(duì)象來(lái)發(fā)送ajax請(qǐng)求，并定義了一個(gè)回調(diào)函數(shù)來(lái)處理服務(wù)器返回的數(shù)據(jù)：
function getUser() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var user = JSON.parse(xhr.responseText);
showUser(user);
}
};
xhr.open("GET", "user.json", true);
xhr.send();
}在這段代碼中，我們首先創(chuàng)建一個(gè)XMLHttpRequest對(duì)象xhr。然后，我們?yōu)閤hr對(duì)象的onreadystatechange事件定義一個(gè)匿名函數(shù)。當(dāng)服務(wù)器端返回?cái)?shù)據(jù)并請(qǐng)求狀態(tài)為4（已完成）且狀態(tài)碼為200（請(qǐng)求成功）時(shí)，該匿名函數(shù)將被執(zhí)行。
在匿名函數(shù)中，我們首先使用JSON.parse方法將xhr.responseText轉(zhuǎn)換為JavaScript對(duì)象user。然后，我們調(diào)用showUser函數(shù)來(lái)顯示用戶信息：
function showUser(user) {
var userInfo = document.getElementById("user-info");
userInfo.innerHTML = "Name: " + user.name + "<br>";
userInfo.innerHTML += "Age: " + user.age + "<br>";
userInfo.innerHTML += "Email: " + user.email;
}在showUser函數(shù)中，我們首先通過(guò)getElementById方法獲取到"user-info"元素，然后使用innerHTML屬性來(lái)設(shè)置該元素的內(nèi)容。我們將用戶的名字、年齡和電子郵件地址顯示在
最后，我們需要在服務(wù)器端準(zhǔn)備一個(gè)user.json文件，其中包含了用戶的信息，如下所示：
{
"name": "John Doe",
"age": 25,
"email": "john.doe@example.com"
}當(dāng)我們點(diǎn)擊"Get User"按鈕時(shí)，getUser函數(shù)將被調(diào)用。它會(huì)向服務(wù)器發(fā)送ajax請(qǐng)求，服務(wù)器返回user.json文件的內(nèi)容，并將其轉(zhuǎn)換為JavaScript對(duì)象。然后，showUser函數(shù)會(huì)將用戶信息顯示在網(wǎng)頁(yè)上。
通過(guò)這個(gè)例子，我們可以看到ajax如何能夠在不刷新整個(gè)頁(yè)面的情況下，實(shí)現(xiàn)與服務(wù)器的數(shù)據(jù)交互。我們可以根據(jù)返回?cái)?shù)據(jù)的內(nèi)容來(lái)進(jìn)行不同的操作，從而豐富網(wǎng)頁(yè)的功能和用戶體驗(yàn)。
總之，ajax的第二個(gè)例子向我們展示了如何使用ajax從服務(wù)器獲取并顯示JSON數(shù)據(jù)。我們學(xué)習(xí)了xhr對(duì)象的使用、回調(diào)函數(shù)的定義以及JSON數(shù)據(jù)的處理方式。通過(guò)這個(gè)例子，我們對(duì)ajax的工作原理和應(yīng)用也有了更深入的了解。