<p>AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML，是一种在 Web 页面中实现局部加载的技术。通过使用 AJAX 技术，我们可以通过与服务器异步通信，在不刷新整个页面的情况下更新页面的部分内容。这种技术使得用户体验更佳，因为用户不需要等待整个页面加载完成。</p>
<p>假设我们有一个在线商城的网站，每当用户点击某个商品的购买按钮时，我们希望能够显示一个弹出窗口，显示商品的详细信息。传统的做法是在用户点击购买按钮后，通过刷新整个页面来加载商品详细信息，用户体验较差。使用 AJAX 技术，我们可以在用户点击购买按钮后，仅加载商品详细信息部分的内容，并将其动态地插入到页面中。这样，用户可以快速获得商品的详细信息，不需要等待整个页面加载完成。</p>
<p>下面是使用 AJAX 技术实现页面局部加载的示例代码：</p>
<pre>function loadProductDetails(productId) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("productDetails").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "/getProductDetails?productId=" + productId, true);
xhr.send();
}

在上面的代码中，当用户点击购买按钮时，我们调用了一个名为 loadProductDetails 的函数，该函数接受一个 productId 参数。函数内部创建了一个 XMLHttpRequest 对象，定义了一个 onreadystatechange 事件处理函数。当服务器响应返回时（xhr.readyState === 4），并且服务器响应状态码为成功（xhr.status === 200），我们将服务器返回的商品详细信息（xhr.responseText）插入到页面中，替换掉原来的内容。

使用 AJAX 技术实现页面局部加载具有许多优点。除了提升用户体验外，还可以减少服务器和带宽的负载。每当用户点击购买按钮时，仅需要加载商品详细信息部分的数据，而不需要重新加载整个页面。这可以减少服务器的响应时间，尤其是在高并发的情况下。另外，由于页面不需要刷新，可以有效减少带宽的消耗。

此外，使用 AJAX 技术还可以实现一些高级功能，比如自动补全搜索框。用户在输入搜索关键字时，可以通过 AJAX 请求向服务器发送请求，获取与关键字相关的搜索结果，并将结果实时显示在搜索框下方，实现搜索框的自动补全功能。这种功能可以提升用户搜索体验，使用户更快地找到所需的信息。

总之，AJAX 技术使得页面局部加载成为可能，极大地改善了用户体验。它不仅可以快速加载页面的部分内容，还可以减少服务器的负载和提升带宽的利用率。此外，使用 AJAX 还可以实现一些高级功能，提供更加丰富的用户体验。