在现代网页开发中，经常会使用Ajax技术来实现动态查询并将结果显示在页面上。Ajax（Asynchronous JavaScript and XML）是一种前端技术，能够实现异步加载数据，而不必刷新整个页面。本文将介绍如何使用Ajax查询并展示文章内容。我们将使用一个简单的示例来说明这个过程。 假设我们有一个博客网站，页面上有一个搜索框，用户可以在搜索框中输入关键词，然后通过Ajax查询相应的文章，并将结果显示在页面上。 首先，我们需要在页面上添加一个搜索框和一个用于显示结果的容器。搜索框的HTML代码如下：

<input type="text" id="keyword" placeholder="请输入关键词">
<button id="search-btn">搜索</button>

在这个示例中，我们使用了一个`input`元素用于输入关键词，并为它设置了一个`id`属性为"keyword"。我们还使用了一个`button`元素，并为它设置了一个`id`属性为"search-btn"。 接下来，我们需要使用Ajax来实现查询功能。我们可以使用JavaScript的`XMLHttpRequest`对象来发送异步请求，并处理返回的结果。下面是查询文章的JavaScript代码：

var searchBtn = document.getElementById('search-btn');
searchBtn.addEventListener('click', function() {
var keyword = document.getElementById('keyword').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var articles = JSON.parse(xhr.responseText); // 假设返回的数据是一个包含文章信息的JSON数组
displayArticles(articles);
} else {
console.error('请求失败');
}
}
};
xhr.open('GET', '/search?keyword=' + keyword);
xhr.send();
});
function displayArticles(articles) {
var container = document.getElementById('results');
container.innerHTML = ''; // 清空容器中的内容
articles.forEach(function(article) {
var articleElement = document.createElement('p');
articleElement.textContent = article.title;
container.appendChild(articleElement);
});
}

在这段代码中，我们首先获取搜索按钮和输入框的元素，然后给搜索按钮添加一个点击事件的监听器。当按钮被点击时，我们获取输入框中的关键词，并使用`XMLHttpRequest`对象发送一个GET请求到`/search`接口，同时将关键词作为查询参数传递给服务器。 在`onreadystatechange`事件处理函数中，我们检查`readyState`属性是否为4，表示请求已完成。如果请求成功（`status`属性为200），我们解析返回的JSON数据，并调用`displayArticles`函数来将结果显示在页面上。否则，我们打印一个错误信息。 在`displayArticles`函数中，我们首先获取显示结果的容器元素，并清空其内容。然后，我们使用`forEach`方法遍历查询到的文章数组，并将每篇文章的标题创建为一个`p`元素，并添加到容器中。 以上就是使用Ajax查询并显示文章的简单示例。通过这个示例，我们可以清楚地看到Ajax技术在实现动态内容加载方面的应用。在实际项目中，我们可以根据需求进行相应的修改和扩展，例如添加分页功能或者过滤条件等。