Ajax全局加载框(Loading效果)的配置

针对Ajax全局加载框(Loading效果)的配置，我们可以使用第三方库或者自己编写代码实现。下面我将分别提供两种方法。

方法一：使用第三方库

我们可以使用国内外常用的一些JS加载库，例如NProgress、Pace等，这些库都是比较轻量的，而且集成简单，使用方便，下面以NProgress为例：

1. 下载库文件
   在 NProgress官网 上下载最新版本的 nprogress.js 以及 nprogress.css 文件，并将它们放置于项目中。

2. 引入库文件
   在你的 HTML 模板文件中添加如下代码：

<link rel="stylesheet" href="./path/to/nprogress.css">
<script src="./path/to/nprogress.js"></script>

1. 在 AJAX 请求开始之前和结束之后添加代码

在 AJAX 请求开始之前，添加如下代码：

NProgress.start();

在 AJAX 请求结束之后，添加如下代码：

NProgress.done();

现在你可以测试一下 AJAX 请求是否可以正常触发 NProgress 加载效果了。

方法二：自己编写代码实现

这种方法需要自己编写 JS 代码实现加载框效果，下面为你提供一个基于 jQuery 的代码示例：

/* 显示加载框效果 */
function showLoading() {
    var $loading = $('#loading');
    if ($loading.length === 0) {
        $loading = $('<div id="loading">');
        var $loadingImg = $('<img src="./path/to/loading.gif">');
        var $loadingMask = $('<div class="mask">');
        $loading.append($loadingImg,$loadingMask);
        $('body').append($loading);
    }
    $loading.fadeIn();
}

/* 隐藏加载框效果 */
function hideLoading() {
    $('#loading').fadeOut();
}

// Ajax 请求添加参数
$.ajaxSetup({
    beforeSend:function() {
        showLoading();
    },
    complete:function() {
        hideLoading();
    }
});

上面这段代码中，我们定义了两个函数用于显示和隐藏加载框效果，showLoading() 函数会动态创建一个 id 为 loading 的 div 标签，并添加一个 GIF 格式的图片以及一个半透明的遮罩层，最后添加到页面中。hideLoading() 函数则是隐藏加载框。

我们还使用了 $.ajaxSetup() 函数，该函数会对所有 AJAX 请求进行全局配置。其中，beforeSend 参数是一个函数，它会在 AJAX 请求发送到服务器之前触发 showLoading() 函数以展示加载框；complete 参数也是一个函数，它会在 AJAX 请求结束之后触发 hideLoading() 函数以隐藏加载框。

总结：以上是两种常用的实现 Ajax 全局加载框(Loading效果)的配置的方法，你可以自行选择其中一种进行实现。其中第一种方法比较简单，而第二种方法则需要一定的编程经验。