AJAX（Asynchronous JavaScript and XML）是一種在Web開發中經常使用的技術，它可以在不刷新整個頁面的情況下與服務器交換數據。在許多場景中，我們需要添加用戶信息并實時更新頁面，而AJAX正是為此提供了便利的解決方案。本文將以一個簡單的用戶管理系統為例，介紹如何使用AJAX添加用戶信息并實時更新。

在我們的用戶管理系統中，我們需要實現用戶的添加功能。當用戶在頁面上填寫完用戶信息后，點擊添加按鈕，系統將會將用戶信息發送到服務器進行處理，并返回處理結果。這個過程是通過AJAX來實現的。

首先，我們需要在頁面上添加一個表單，用于用戶輸入信息：

<form id="addForm" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="age">年齡:</label>
<input type="text" id="age" name="age"><br>
<input type="button" value="添加" onclick="addUser()">
</form>

上面的代碼定義了一個包含姓名和年齡兩個輸入字段的表單，并有一個“添加”按鈕。當用戶點擊添加按鈕時，會觸發名為“addUser”的JavaScript函數。

下面是實現添加用戶的JavaScript代碼：

function addUser() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "addUser.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
alert("添加成功！");
updateTable();
} else {
alert("添加失敗，請重試。");
}
}
};
xhr.send("name=" + name + "&age=" + age);
}

上面的代碼首先通過document.getElementById方法獲取到用戶填寫的姓名和年齡，然后創建了一個XMLHttpRequest對象，用于發送POST請求到服務器添加用戶信息。在xhr.onreadystatechange回調函數中，我們判斷請求的狀態是否成功，并根據服務器返回的處理結果進行相應的提示和頁面更新操作。

接下來，我們需要實現更新頁面的功能。當用戶添加成功后，我們希望頁面上能夠實時更新添加的用戶信息。

我們可以在頁面上添加一個表格來顯示用戶信息：

<table id="userTable" border="1">
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</table>

然后，我們可以定義一個名為updateTable的函數，用于更新表格：

function updateTable() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "getUserList.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var table = document.getElementById("userTable");
// 清空表格內容
while (table.rows.length > 1) {
table.deleteRow(1);
}
// 添加新的用戶信息
for (var i = 0; i < response.length; i++) {
var row = table.insertRow(i+1);
var nameCell = row.insertCell(0);
var ageCell = row.insertCell(1);
nameCell.innerHTML = response[i].name;
ageCell.innerHTML = response[i].age;
}
}
};
xhr.send();
}

上面的代碼通過發送GET請求到getUserList.php服務器端腳本，獲取到用戶列表信息。然后，我們清空表格的內容，并根據返回的用戶信息，動態地插入新的表格行。

綜上所述，使用AJAX添加用戶信息并實時更新頁面可以大大提升用戶體驗，使得系統更加靈活和易用。我們只需通過AJAX與服務器進行異步交互，就能實現用戶信息的添加和頁面的實時更新。