我們首先創建一個簡單的HTML頁面，其中包含一個"Get User"按鈕和一個用于展示用戶信息的
<!DOCTYPE html> <html> <head> <title>Ajax Example</title> </head> <body> <button onclick="getUser()">Get User</button> <div id="user-info"></div> </body> </html>
在JavaScript代碼中，我們編寫一個getUser函數，該函數將通過ajax從服務器獲取用戶信息。我們使用XMLHttpRequest對象來發送ajax請求，并定義了一個回調函數來處理服務器返回的數據：
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();
}在這段代碼中，我們首先創建一個XMLHttpRequest對象xhr。然后，我們為xhr對象的onreadystatechange事件定義一個匿名函數。當服務器端返回數據并請求狀態為4（已完成）且狀態碼為200（請求成功）時，該匿名函數將被執行。
在匿名函數中，我們首先使用JSON.parse方法將xhr.responseText轉換為JavaScript對象user。然后，我們調用showUser函數來顯示用戶信息：
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函數中，我們首先通過getElementById方法獲取到"user-info"元素，然后使用innerHTML屬性來設置該元素的內容。我們將用戶的名字、年齡和電子郵件地址顯示在
最后，我們需要在服務器端準備一個user.json文件，其中包含了用戶的信息，如下所示：
{
"name": "John Doe",
"age": 25,
"email": "john.doe@example.com"
}當我們點擊"Get User"按鈕時，getUser函數將被調用。它會向服務器發送ajax請求，服務器返回user.json文件的內容，并將其轉換為JavaScript對象。然后，showUser函數會將用戶信息顯示在網頁上。
通過這個例子，我們可以看到ajax如何能夠在不刷新整個頁面的情況下，實現與服務器的數據交互。我們可以根據返回數據的內容來進行不同的操作，從而豐富網頁的功能和用戶體驗。
總之，ajax的第二個例子向我們展示了如何使用ajax從服務器獲取并顯示JSON數據。我們學習了xhr對象的使用、回調函數的定義以及JSON數據的處理方式。通過這個例子，我們對ajax的工作原理和應用也有了更深入的了解。