Ajax（Asynchronous JavaScript and XML）是一种用于改变网页外部值的重要技术。通过使用Ajax，我们可以在不刷新整个网页的情况下，通过与服务器进行异步通信，动态地更新网页的内容。本文将探讨Ajax如何实现这一功能，并通过举例说明其工作原理。

假设我们有一个网页上显示当前时间的标签，当用户打开网页时，标签上显示的时间是页面加载的时间。当用户希望更新时间时，可以点击一个按钮实现该功能。使用传统的方法，点击按钮后，页面会向服务器发起一个请求，然后刷新整个页面，从而展示最新的时间。但使用Ajax，我们可以实现局部刷新，即仅更新时间而不刷新整个页面。

首先，我们需要添加一个用于显示时间的标签和一个按钮。HTML代码如下：

页面加载时间：2022-01-01 00:00:00
更新时间

接下来，我们需要编写JavaScript代码来处理按钮的点击事件，并使用Ajax来获取最新的时间。代码如下：

let timeLabel = document.getElementById('time');
let updateButton = document.getElementById('update-btn');
updateButton.addEventListener('click', function() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
timeLabel.innerText = '页面加载时间：' + xhr.responseText;
}
};
xhr.open('GET', '/get-time', true);
xhr.send();
});

以上代码中，我们通过addEventListener函数为按钮添加了一个点击事件监听器。当按钮被点击时，会执行事件处理函数。在事件处理函数中，我们创建了一个XMLHttpRequest对象，用于发送Ajax请求。然后，我们定义了一个onreadystatechange事件处理函数，该函数会在Ajax请求状态发生变化时被调用。

当onreadystatechange事件被触发时，我们首先检查请求状态是否为4（请求已完成），并且响应状态码是否为200（请求成功）。如果满足这两个条件，说明我们成功地从服务器获取到了最新的时间，并将其更新到时间标签中。我们使用responseText属性来获取服务器返回的时间值，并将其设置为时间标签的innerText。

最后，我们需要在服务器端提供一个接口来获取最新的时间。以下是一个使用Node.js Express框架的示例代码：

app.get('/get-time', function(req, res) {
let currentTime = new Date().toLocaleString();
res.send(currentTime);
});

在上述代码中，我们定义了一个GET路由，当客户端发送GET请求到"/get-time"时，会执行回调函数。回调函数利用Date对象获取当前时间，并将其转换为字符串。然后，使用res.send()函数将时间字符串作为响应发送给客户端。

通过以上步骤，我们成功地实现了使用Ajax来更新页面中时间标签的内容。当用户点击更新按钮时，页面将使用Ajax来向服务器获取最新的时间，并在收到响应后，将其更新到时间标签中。整个页面无需刷新，仅更新了时间标签的内容。

通过这个示例，我们可以看到Ajax的强大之处。通过Ajax，我们可以实现页面与服务器之间的异步通信，从而动态地改变页面的外部值。这为用户提供了更好的交互体验，并降低了页面加载时间。

总之，Ajax是一种强大的技术，能够改变网页外部值而无需刷新整个页面。通过与服务器的异步通信，我们可以动态地更新页面的内容。通过以上示例，我们可以看到如何使用Ajax来更新页面中的时间标签，实现局部刷新。相信通过进一步学习和实践，我们可以掌握更多使用Ajax改变外部值的技巧和应用。