AJAX（Asynchronous JavaScript and XML）是一種常用的前端技術(shù)，可以通過前端代碼與后端服務(wù)器進行異步通信，實現(xiàn)無需刷新頁面就可以獲取數(shù)據(jù)和更新頁面的功能。在本文中，我們將介紹如何使用AJAX來獲取用戶信息并將其顯示到網(wǎng)頁上。

假設(shè)我們有一個用戶信息的數(shù)據(jù)庫，其中包含了每個用戶的姓名、年齡和所在城市等信息。我們希望在網(wǎng)頁上的某個區(qū)域動態(tài)顯示這些用戶的信息。首先，我們需要在HTML文件中創(chuàng)建一個用于顯示用戶信息的區(qū)域，比如一個div元素：

<div id="user-info"></div>

然后，我們可以使用JavaScript編寫AJAX代碼來獲取用戶信息。首先，我們需要創(chuàng)建一個XMLHttpRequest對象，用于與后端服務(wù)器進行通信：

var xhr = new XMLHttpRequest();

接下來，我們可以使用xhr對象的open方法來設(shè)置請求的方法、URL和是否異步等信息。在這個例子中，我們使用GET請求來獲取用戶信息：

xhr.open("GET", "user-info.php", true);

然后，我們可以使用xhr對象的send方法來發(fā)送請求：

xhr.send();

當后端服務(wù)器返回響應時，我們可以通過xhr對象的onreadystatechange事件來處理這個響應。一般來說，我們需要在響應狀態(tài)碼為200，即成功接收到響應時，才進行后續(xù)操作。在這個例子中，我們可以使用xhr對象的responseText屬性來獲取服務(wù)器返回的響應：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 處理響應數(shù)據(jù)
}
};

一般而言，服務(wù)器會以JSON格式返回數(shù)據(jù)。我們可以使用JavaScript的JSON對象的parse方法將響應數(shù)據(jù)解析為JavaScript對象：

var userInfo = JSON.parse(response);

最后，我們可以使用JavaScript來操作HTML元素，將用戶信息顯示在網(wǎng)頁上。比如，我們可以將用戶信息拼接為一個字符串，并賦值給div元素的innerHTML屬性：

var userInfoString = "姓名：" + userInfo.name + "，年齡：" + userInfo.age + "，城市：" + userInfo.city;
document.getElementById("user-info").innerHTML = userInfoString;

當我們運行這個代碼時，網(wǎng)頁上的用戶信息區(qū)域?qū)@示出獲取到的用戶信息，比如：

姓名：張三，年齡：25，城市：北京

使用AJAX獲取并顯示用戶信息的過程類似于在后臺執(zhí)行了一次請求并將響應結(jié)果返回到前端，但是在頁面上并沒有刷新。這使得網(wǎng)頁可以更快地響應用戶的操作，并且更加靈活地更新數(shù)據(jù)。

在實際應用中，我們可以通過定時刷新、用戶輸入等方式觸發(fā)AJAX請求，從而實現(xiàn)更加動態(tài)和交互性的用戶體驗。