Ajax（Asynchronous JavaScript and XML）是一种用于在网页上实现异步通信的技术。通过使用Ajax，网页能够在不刷新整个页面的情况下，向服务器发送请求并获取数据，然后将数据动态加载到页面上。这种技术已经被广泛应用于各种网站上，使得用户能够更加流畅地浏览和交互。

举个例子来说明Ajax的使用。假设有一个电商网站，当用户点击“添加到购物车”按钮时，需要将商品信息发送到服务器，并获取最新的购物车信息。传统的做法是用户点击按钮后，页面会刷新并重新加载整个页面，从而显示最新的购物车信息。而使用Ajax的方式可以在不刷新页面的情况下，向服务器发送请求获取购物车信息，然后更新页面上的购物车区域，使用户能够更加流畅地进行购物操作。

// Ajax请求示例
function addToCart(productId) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var responseData = JSON.parse(xhr.responseText);
updateCart(responseData);
} else {
console.error('请求失败：' + xhr.status);
}
}
};
xhr.open('POST', '/api/addToCart', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ productId: productId }));
}
function updateCart(newCartData) {
// 更新购物车区域的代码
}

在上面的代码中，我们使用了JavaScript中的XMLHttpRequest对象来发送Ajax请求。当服务器返回响应后，我们可以根据响应的状态码进行处理。如果状态码为200，表示请求成功，我们可以通过解析响应的文本数据来获取最新的购物车信息，然后调用updateCart函数来更新页面上的购物车区域。

Ajax技术的另一个常见应用是在搜索框中实现实时搜索功能。当用户在搜索框中输入关键词时，网页可以通过Ajax发送请求，向服务器获取匹配的搜索结果，并将结果动态加载到页面上。这种实时搜索功能使得用户可以更加快速地获取所需的信息。

// 实时搜索示例
var searchInput = document.getElementById('searchInput');
var searchResults = document.getElementById('searchResults');
searchInput.addEventListener('input', function() {
var keyword = searchInput.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var responseData = JSON.parse(xhr.responseText);
renderSearchResults(responseData);
} else {
console.error('请求失败：' + xhr.status);
}
}
};
xhr.open('GET', '/api/search?keyword=' + encodeURIComponent(keyword), true);
xhr.send();
});
function renderSearchResults(results) {
// 渲染搜索结果的代码
}

在上述代码中，我们监听搜索框的输入事件，并在每次输入时发送Ajax请求。请求会带上当前输入的关键词作为参数发送给服务器。当服务器返回结果后，我们可以解析响应的文本数据，并通过renderSearchResults函数来渲染搜索结果。

总结来说，Ajax技术使得网页能够更加流畅地进行异步通信，从而提升用户体验。通过动态加载内容，可以避免页面的刷新，使用户能够更快速地获取所需的信息或执行操作。无论是在电商网站中的购物车功能，还是实时搜索功能，Ajax都能提供快速、便捷的解决方案。