不好意思，由于提供代码示例的数量限制，我只能给出一个简短的示例来说明如何使用Ajax加载并自带加载框。希望下面的内容对你有所帮助。
---
AJAX（Asynchronous JavaScript and XML）是一种用于在不刷新整个页面的情况下，从服务器异步加载数据的技术。它可以提升网站的用户体验，使用户可以在不中断当前操作的情况下，获取到所需的数据。同时，自带的加载框可以在数据加载过程中提供友好的用户反馈，增加用户对网站的满意度。
假设我们正在开发一个博客系统，并且需要在用户点击"加载更多"按钮时，通过AJAX从服务器加载更多的文章。同时，我们希望在文章加载过程中，显示一个加载框以提醒用户。
首先，我们需要编写一个AJAX请求来加载更多的文章。下面是一个使用jQuery库的例子：
$.ajax({
url: "load_more_articles.php",
type: "GET",
dataType: "html",
beforeSend: function() {
// 在请求发送之前，在页面中显示加载框
$("#loading").show();
},
success: function(data) {
// 当请求成功后，隐藏加载框并将文章添加到页面中
$("#loading").hide();
$("#article-container").append(data);
},
error: function() {
// 当请求失败时，隐藏加载框并显示错误信息
$("#loading").hide();
$("#error-message").text("加载失败，请稍后重试。");
}
});在上述代码中，我们使用了$.ajax函数来发送一个GET请求到"load_more_articles.php"文件。在请求发送之前，我们使用beforeSend回调函数显示一个id为"loading"的加载框。当请求成功后，我们隐藏该加载框并将返回的文章数据添加到id为"article-container"的容器中。如果请求失败，我们也会隐藏加载框，并显示一个错误信息。
为了使上述示例正常工作，我们还需要在HTML中添加相关的元素：
在上述HTML代码中，我们在id为"article-container"的容器中展示已经加载的文章。id为"loading"的元素是加载框的容器，其样式和内容可以根据需要进行调整。id为"error-message"的元素是用于显示错误信息的容器。最后，我们在按钮上添加了一个id为"load-more-button"的标识，用于触发加载更多的操作。
综上所述，我们可以通过AJAX加载更多的文章，并利用自带的加载框来提供用户友好的反馈。这种技术能够在不中断用户操作的情况下，提升网站的用户体验和满意度。