// 创建一个用于监控AJAX请求进度的对象
var ajaxProgress = (function () {
var o = $({}),
token;
// 监听全局AJAX事件
$(document).ajaxStart(function () {
// 清除可能的旧的定时器
if (token) {
clearTimeout(token);
}
}).ajaxSend(function (e, xhr, settings) {
// 为每个请求设置进度条更新的标记
token = setTimeout(function () {
o.trigger("ajaxProgressStart", [settings]);
});
}).ajaxProgress(function (e, xhr, settings) {
// 处理进度事件
var percent = 100 * e.loaded / e.total;
o.trigger("ajaxProgress", [percent, e, settings]);
}).ajaxSuccess(function (e, xhr, settings) {
// 请求成功时清除标记
if (token) {
clearTimeout(token);
}
o.trigger("ajaxProgressSuccess", [e, xhr, settings]);
}).ajaxError(function (e, xhr, settings) {
// 请求失败时清除标记
if (token) {
clearTimeout(token);
}
o.trigger("ajaxProgressError", [e, xhr, settings]);
}).ajaxComplete(function (e, xhr, settings) {
// 请求完成时清除标记
if (token) {
clearTimeout(token);
}
o.trigger("ajaxProgressComplete", [e, xhr, settings]);
});
// 返回公开方法
return {
// 绑定事件处理程序
bind: function (type, fn) {
o.bind(type, fn);
},
unbind: function (type, fn) {
o.unbind(type, fn);
}
};
})();
// 使用ajaxProgress对象监听和控制进度
$(document).ready(function () {
ajaxProgress.bind("ajaxProgressStart", function (e, settings) {
console.log("AJAX请求开始: " + settings.url);
});
ajaxProgress.bind("ajaxProgress", function (e, percent, originalEvent, settings) {
console.log("当前进度: " + percent + "%");
});
ajaxProgress.bind("ajaxProgressSuccess", function (e, originalEvent, xhr, settings) {
console.log("AJAX请求成功: " + settings.url);
});
ajaxProgress.bind("ajaxProgressError", function (e, originalEvent, xhr, settings) {
console.log("AJAX请求失败: " + settings.url);
});
ajaxProgress.bind("ajaxProgressComplete", function (e, originalEvent, xhr, settings) {
console.log("AJAX请求完成: " + settings.url);
});
});
这段代码使用了jQuery来监听全局的AJAX事件，并且定义了一个可以绑定和解绑自定义事件的对象ajaxProgress。它演示了如何在AJAX请求发送前设置一个定时器，如果在特定时间内没有接收到进度更新，则可以认为请求未能提供进度信息，并触发一个自定义的"ajaxProgressStart"事件。当接收到实际的进度信息时，会触发"ajaxPr