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，网页可以在后台与服务器进行异步通信，实现动态更新部分页面内容。通过发送请求并处理服务器返回的数据，可以实现用户输入与页面更新的交互效果。这样用户就可以在不刷新整个页面的情况下，享受更好的交互体验。