AJAX（Asynchronous JavaScript and XML，異步 JavaScript 和 XML）是一種用于在網頁前端與后端服務器進行異步通信的技術。通過AJAX，網頁可以在不刷新整個頁面的情況下，與服務器進行數據交互，只刷新需要更新的部分。本文將介紹AJAX的工作原理，以及當服務器頁面返回請求時的具體實現。

當用戶在網頁上進行某個操作時，比如點擊一個按鈕，需要向服務器發送請求并獲取相應的數據。傳統的方式是通過提交表單，然后服務器進行處理并返回整個頁面。但這種方式會導致頁面刷新，用戶體驗不佳。而使用AJAX，可以在后臺與服務器進行數據交互，更新部分頁面而不刷新整個頁面，增加了用戶的交互性。

比如，假設有一個網頁上有一個評論區，用戶可以在評論區發表評論，并查看其他用戶的回復。當用戶發表一條評論時，頁面不會刷新，而是通過AJAX發送請求，將評論內容傳遞給服務器。服務器進行處理后，將新的評論以JSON格式返回給頁面。頁面通過JavaScript解析數據，并利用DOM操作在頁面中插入新的評論，實現動態更新。

<script>
function sendComment() {
var content = document.getElementById("commentInput").value; // 獲取用戶輸入的評論內容
var xmlhttp = new XMLHttpRequest(); // 創建XMLHttpRequest對象
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 請求完成且成功
var response = JSON.parse(xmlhttp.responseText); // 解析服務器返回的JSON數據
var newComment = document.createElement("div"); // 創建一個新的評論節點
newComment.innerHTML = response.content; // 設置評論內容
document.getElementById("commentContainer").appendChild(newComment); // 將新的評論節點插入到評論區域中
}
};
xmlhttp.open("POST", "comment.php", true); // 指定請求的URL和方法
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 設置請求頭
xmlhttp.send("content=" + content); // 發送請求
}
</script>

在上面的代碼中，首先獲取用戶輸入的評論內容，然后創建一個XMLHttpRequest對象。通過設置onreadystatechange函數，可以在服務器返回請求時執行一些操作。當readyState等于4（請求完成）且status等于200（請求成功）時，表示服務器返回成功。通過解析服務器返回的JSON數據，創建一個新的評論節點，并將其插入到評論區域中。

需要注意的是，在發送AJAX請求之前，需要調用open方法指定請求的URL和方法（這里是POST方法），并通過setRequestHeader方法設置請求頭。最后通過send方法發送請求，并將評論內容作為請求的數據。服務器根據這個數據進行相應的處理，然后返回處理結果。

總之，通過AJAX，網頁可以在后臺與服務器進行異步通信，實現動態更新部分頁面內容。通過發送請求并處理服務器返回的數據，可以實現用戶輸入與頁面更新的交互效果。這樣用戶就可以在不刷新整個頁面的情況下，享受更好的交互體驗。