AJAX是一种前端技术，用于实现两个页面之间的数据交互。它可以让用户在不刷新整个页面的情况下，动态获取数据和更新页面内容。

举一个例子来解释AJAX的工作原理。假设我们正在开发一个电商网站，并且有一个商品列表页面和一个购物车页面。当用户在商品列表页面上点击“添加到购物车”按钮时，我们可以使用AJAX来实现将商品添加到购物车页面的效果。在点击按钮时，AJAX会通过HTTP请求将商品ID发送到后台服务器，并在服务器端处理添加到购物车的逻辑。然后，服务器会返回一个响应，告诉我们添加到购物车是否成功。在接收到响应后，我们可以使用JavaScript代码动态地更新购物车页面，将新添加的商品显示在购物车中。

为了实现这个功能，我们需要在前端页面中使用AJAX的核心对象——XMLHttpRequest（XHR）。这个对象使我们能够发送HTTP请求，并在接收到响应后执行相应的操作。下面是一个使用XHR对象进行数据交互的简单示例：

// 创建一个XHR对象
var xhr = new XMLHttpRequest();
// 配置HTTP请求的类型、URL和异步属性
xhr.open('POST', 'http://www.example.com/add-to-cart', true);
// 设置请求头部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 注册事件处理程序，当接收到响应时执行相应的操作
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 更新购物车页面
var response = JSON.parse(xhr.responseText);
var cartItems = response.cartItems;
for (var i = 0; i< cartItems.length; i++) {
// 插入购物车商品
document.getElementById('cart').innerHTML += '<div>' + cartItems[i].name + '</div>';
}
} else {
console.error('AJAX请求失败：' + xhr.status);
}
}
};
// 发送HTTP请求
xhr.send('productId=12345');

以上代码中，我们首先创建了一个XHR对象，并使用open()方法配置了一个POST请求，指定了请求的URL、异步属性和请求头部信息。然后，通过设置onreadystatechange事件处理程序的回调函数，我们可以在接收到服务器响应时执行相应的操作。在响应处理函数中，我们首先检查HTTP请求的状态是否为DONE（即请求已完成），然后再根据HTTP状态码判断请求是否成功。最后，我们可以使用响应数据来更新页面内容。

AJAX的优势不仅在于它可以实现页面内容的动态更新，还可以减少不必要的数据传输。例如，在上述的例子中，当用户点击“添加到购物车”按钮时，我们只需要将商品ID发送给服务器，而不是整个商品信息。这样可以大大减少网络传输的数据量，提高网页加载的速度和用户体验。

总的来说，AJAX技术给我们带来了更加灵活和交互性的网页应用。通过使用XHR对象，我们可以实现两个页面之间的数据交互，从而实现动态更新页面内容和提升用户体验的效果。