AJAX（Asynchronous JavaScript and XML）是一种使用JavaScript和XML进行网页动态刷新的技术。通过AJAX，网页可以在不刷新整个页面的情况下，通过与服务器进行异步通信，更新部分页面内容。这样可以大大提升用户的交互体验，同时减少服务器的压力。本文将通过举例说明，介绍如何使用AJAX动态刷新网页。

假设有一个在线聊天室，当一个用户发送消息时，其他用户的聊天界面需要及时显示接收到的消息。传统的方式是每隔一段时间就向服务器发送请求，获取最新的消息。这种方式效率低下，会增加服务器的负载。而使用AJAX可以在没有用户操作的情况下，自动获取新消息并即时更新聊天界面，提供更好的用户体验。

首先，我们需要使用JavaScript创建一个AJAX对象，并指定异步请求的URL和请求的方式（GET或POST）。下面是一个示例：

<script>
function getNewMessages() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/getNewMessages", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 更新聊天界面
}
};
xhr.send();
}
</script>

上述代码中，我们创建了一个XMLHttpRequest对象，并通过open方法指定了请求的URL、请求方式和是否异步。然后，我们设置了onreadystatechange事件处理程序，当请求状态发生变化时，该事件处理程序将被调用。在事件处理程序中，我们首先检查请求的状态是否为4（表示请求已完成），状态码是否为200（表示请求成功）。如果满足这两个条件，我们可以从responseText属性中获取到服务器返回的响应数据，并根据需要更新聊天界面。

接下来，在页面加载完成后，我们可以使用setInterval函数定时调用getNewMessages函数，以便定期检查服务器是否有新的消息：

<script>
window.onload = function() {
setInterval(getNewMessages, 5000); // 每5秒获取一次新消息
};
</script>

在上述代码中，我们使用window.onload事件处理程序，在页面加载完成后开始定时调用getNewMessages函数。这样每隔5秒，就会向服务器发送一次请求，获取新消息并更新聊天界面。

另外，我们还可以通过AJAX的回调函数来处理用户的输入。例如，当用户发送消息时，我们使用AJAX将消息发送到服务器，并在响应返回后及时更新聊天界面。下面是一个示例：

<script>
function sendMessage(message) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/sendMessage", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 更新聊天界面
}
};
xhr.send(JSON.stringify({ message: message }));
}
</script>

在上述代码中，我们通过open方法指定了请求的URL、请求方式和是否异步。此处使用POST请求，同时设置了请求头中的Content-Type为application/json。然后，我们依然设置了onreadystatechange事件处理程序，在请求完成且成功返回时更新聊天界面。最后，我们通过send方法发送一个包含用户消息的JSON字符串到服务器。

AJAX动态刷新网页的原理就是通过与服务器进行异步通信，在不刷新整个页面的情况下，根据服务器的响应数据更新页面内容。通过合理利用AJAX，可以提升网页的交互性和用户体验。