AJAX（Asynchronous JavaScript and XML）是一種在前端頁面展示后端數據的技術。它通過在后臺與服務器進行異步通信，實現無需刷新頁面即可獲取新數據的功能。傳統的網頁訪問方式是通過點擊鏈接或提交表單來請求頁面數據，如果需要更新數據，就必須刷新整個頁面。而使用AJAX，我們可以在不刷新頁面的情況下，動態地從服務器獲取數據并更新頁面內容。

舉個例子，假設我們有一個簡單的待辦事項列表，可以添加和刪除事項。在傳統的方式下，我們需要每次添加或刪除一個事項后刷新整個頁面來更新列表。但是如果我們使用AJAX，我們可以在后臺通過異步請求將新的事項添加或刪除，然后只更新列表中的部分內容，而不刷新整個頁面。

下面的示例展示了一個基本的AJAX使用場景。我們有一個學生信息列表，并提供一個表單來添加新的學生。當用戶提交表單時，我們將使用AJAX將新的學生信息發送到服務器，并動態地將新的學生添加到信息列表中。

<!-- 學生信息列表 --><ul id="student-list"><li>小明</li><li>小紅</li><li>小剛</li></ul><!-- 添加學生的表單 --><form id="add-student-form"><input type="text" id="student-name" placeholder="請輸入學生姓名" /><button type="submit">添加學生</button></form><script>// 綁定表單提交事件
document.getElementById('add-student-form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單默認提交行為
var studentName = document.getElementById('student-name').value; // 獲取學生姓名
// 創建AJAX請求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/add-student', true);
xhr.setRequestHeader('Content-Type', 'application/json');
// 發送學生姓名到服務器
xhr.send(JSON.stringify({ name: studentName }));
// 請求成功后更新學生列表
xhr.onload = function() {
if (xhr.status === 200) {
var newStudent = document.createElement('li');
newStudent.textContent = studentName;
document.getElementById('student-list').appendChild(newStudent);
document.getElementById('student-name').value = ''; // 清空表單
}
};
});
</script>

在上面的示例中，我們使用了一個事件監聽器來綁定表單的提交事件。當用戶提交表單時，我們阻止了默認的提交行為，防止頁面刷新。然后，我們獲取用戶輸入的學生姓名，并使用AJAX發送到服務器的URL "/add-student"。服務器接收到學生姓名后，將其添加到學生列表中，并返回一個成功的響應。

在AJAX請求成功的回調函數中，我們首先創建一個新的