本文通过介绍和演示如何使用AJAX加载显示“加载中”的文章。AJAX（Asynchronous JavaScript and XML）是一种用于在网页上异步加载和更新数据的技术，使得网页能够实时显示数据，并且不需要刷新整个页面。加载显示“加载中”的文章是一个常见的应用场景，用户在等待数据加载完成的同时，需要一个提示框或者加载动画来告知用户正在加载的过程。

首先，我们需要创建一个包含“加载中”的文章，并且使用AJAX来加载该文章。下面是一个示例代码：

HTML:
<div id="loading" class="hidden">
<p>加载中...</p>
</div>
<div id="content" class="hidden">
<p>这是一个要加载的文章内容...</p>
</div>
CSS:
.hidden {
display: none;
}
JS:
var contentDiv = document.getElementById('content');
var loadingDiv = document.getElementById('loading');
function loadContent() {
contentDiv.classList.add('hidden');
loadingDiv.classList.remove('hidden');
// 使用AJAX加载文章内容
var xhr = new XMLHttpRequest();
xhr.open("GET", "article.html", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
contentDiv.innerHTML = xhr.responseText;
contentDiv.classList.remove('hidden');
loadingDiv.classList.add('hidden');
}
};
xhr.send();
}
loadContent();

在上面的示例中，我们首先创建了两个`