jQuery Ajax 全局 Loading 加载框配置与多请求处理方案

Ajax 全局 Loading 配置原理

在进行 Ajax 后台数据请求时，为了向用户明确提示页面正在执行后台任务，通常需要提供一个直观的进度提示，即 Loading 加载效果。

实现原理：

jQuery 支持对 Ajax 进行全局配置，效果类似于 C# 中的面向切面编程。我们可以在 Ajax 提交前和提交完成后执行特定操作，例如在请求开始时显示 Loading 框，在请求结束后关闭该框，从而完美实现全局加载提示效果。

jQuery 全局配置 Ajax 的方式如下：

$.ajaxSetup({
beforeSend: function () {
//ajax请求之前
},
complete: function () {
//ajax请求完成，不管成功失败
},
error: function () {
//ajax请求失败
}
});

需要注意的是，beforeSend、complete 和 error 等配置项在单个 Ajax 请求中同样可以设置。将这些配置写入 ajaxSetup 并放置在公共页面中，即可使其成为全局生效的配置。

多请求并发下的加载框处理方案

以下是具体代码示例。为简化开发，本文直接使用了 layer 插件来实现 Loading 效果，因为手动编写 CSS 并非本文重点。具备能力的开发者也可以尝试通过 JavaScript 手动控制元素的显示与隐藏来实现此效果。若需直接复制代码，请确保已引入 layer 插件，下载地址为：http://layer.layui.com/。

这里需要特别说明一点：当页面同时存在多个 Ajax 请求时，可能会出现某个请求完成后关闭了加载框，导致其他正在进行的请求失去提示的问题。针对此情况，目前想到两种解决方案：

第一种是我目前采用的方法：允许打开多个 Loading 框（由于坐标重叠，视觉上看不出区别），并在请求结束时关闭对应的那个。具体做法是在 ajaxSetup 中增加一个 index 参数（该参数必须写入设置对象内部，否则所有 Ajax 会共享同一个索引）。有了独立的 index，即可灵活处理各种情况。

第二种方案适用于希望手动编写控制逻辑的场景，即只显示一个加载框。可以在加载框元素上添加一个记录当前执行 Ajax 数量的参数，例如 <div data-ajax-count='0'></div>。每次请求开始或结束时维护该值，当 Ajax 结束判断该值小于等于 0 时，再隐藏加载框。这种方法理论上可行，但我并未实际实践。

$(function () {
$.ajaxSetup({
layerIndex:-1,
beforeSend: function () {
this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
},
complete: function () {
layer.close(this.layerIndex);
},
error: function () {
layer.alert('部分数据加载失败，可能会导致页面显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
}); 

以上即为 Ajax 全局加载框（Loading 效果）的配置介绍，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！