AJAX（Asynchronous JavaScript and XML）是一种实现客户端与服务器异步通信的技术，其主要用途之一是通过AJAX从服务器请求数据并将其展示在网页上。通过使用AJAX，用户可以在不刷新整个页面的情况下获取数据，提升了用户体验和网站性能。本文将介绍如何使用AJAX进行页面的数据查询，并举例说明其实际应用。

假设我们有一个电商网站，页面上有一个商品列表，用户可以选择不同的排序方式来查看商品。传统的方式是每次用户选择不同的排序方式后，页面会刷新，服务器重新返回已排序的商品列表。使用AJAX可以避免页面刷新，提供更流畅的用户体验。

function sortByPrice() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var sortedItems = JSON.parse(xhr.responseText);
renderItems(sortedItems);
}
};
xhr.open("GET", "/api/sortByPrice", true);
xhr.send();
}
function renderItems(sortedItems) {
// 渲染已排序的商品列表
}

上述代码是一个使用AJAX进行排序的示例。当用户选择按价格排序时，JavaScript代码会通过AJAX发送一个GET请求到服务器的"/api/sortByPrice"接口。服务器会根据排序要求处理请求，并返回已排序的商品列表。在JavaScript代码中，我们通过XMLHttpRequest对象的onreadystatechange事件监听器来处理服务器响应。当服务器返回响应并成功时（状态码为200），我们解析返回的JSON数据并调用renderItems函数来渲染已排序的商品列表。

除了排序，AJAX还可以用于其他类型的数据查询。假设我们的网站还有一个搜索功能，用户可以输入关键字来搜索商品。传统的方式是用户输入关键字后，页面会刷新，服务器根据关键字进行搜索，并返回匹配的商品列表。使用AJAX，我们可以实现实时搜索功能，用户在输入关键字的同时，网页会实时展示匹配的结果，无需刷新页面。

function searchItems(keyword) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var matchedItems = JSON.parse(xhr.responseText);
renderItems(matchedItems);
}
};
xhr.open("GET", "/api/search?keyword=" + keyword, true);
xhr.send();
}

上述代码是一个使用AJAX进行搜索的示例。当用户输入关键字时，JavaScript代码会通过AJAX发送一个GET请求到服务器的"/api/search"接口，并将关键字作为参数传递给服务器。服务器根据关键字进行搜索，并返回匹配的商品列表。JavaScript代码解析返回的JSON数据并调用renderItems函数来渲染匹配的商品列表。

总结来说，AJAX是一种强大的技术，可以使页面的数据查询更加高效和流畅。通过在网页上实时获取数据，用户可以获得更好的体验，并且能够提高网站的性能。通过以上的示例，我们可以看到AJAX在电商网站中的实际应用，不仅可以用于排序功能，还可以实现实时搜索等功能。随着更多的网站开始采用AJAX技术，我们可以期待更多创新的应用和更好的用户体验。