Javascript 如何正确地为ajax执行上下文预加载程序？

我的计划是在不修改代码的情况下为所有ajax调用使用上下文预加载程序。按照惯例，我的ajax调用是这样的

// do some pre-loader for example spinning wheel
$('#submitBnt').on('click', function () {
    $.get('/echo/json', function (data) {
        // after everything is done do some cleanup for the UI
    });
});

但是，我希望在全局级别构建预加载器，这样任何ajax调用都会将转轮连接到容器，并在完成所有操作后取消

这是我到目前为止的代码，当然不起作用

var s_ajaxListener = new Object();
var target;
s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open;
s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;
s_ajaxListener.callback = function () {
    console.log('last');
    $('.ajaxContainer').removeClass('pre-loader');
}

XMLHttpRequest.prototype.open = function (a, b) {
    console.log('first');
    $(document).on('click', function (e) {
        target = e.target;
        $(target).closest('.ajaxContainer').addClass('pre-loader');
    });
    if (!a) var a = '';
    if (!b) var b = '';
    s_ajaxListener.tempOpen.apply(this, arguments);
    s_ajaxListener.method = a;
    s_ajaxListener.url = b;
    if (a.toLowerCase() == 'get') {
        s_ajaxListener.data = b.split('?');
        s_ajaxListener.data = s_ajaxListener.data[1];
    }
}

XMLHttpRequest.prototype.send = function (a, b) {
    if (!a) var a = '';
    if (!b) var b = '';
    s_ajaxListener.tempSend.apply(this, arguments);
    if (s_ajaxListener.method.toLowerCase() == 'post') s_ajaxListener.data = a;
    s_ajaxListener.callback();
}


$('#submitBnt').on('click', function () {
    $.get('/echo/json', function (data) {
        console.log(data);
    });
});

我的问题是 1.为什么它不起作用。 2.添加$（document.on（'click'）是个好主意吗？因为我认为它会将on click事件添加到全球事件中，这对移动网站来说是否太多了

这是我的小提琴

---

谢谢。

首先，您应该小心扩展本机对象原型

第二，如果您使用jQuery，那么使用

$.ajaxStart（）

和

$.ajaxComplete（）

为所有ajax调用设置开始和结束操作非常容易实现。你可以在这里阅读，这里：

基本实施：

$( document )
.ajaxStart(function() {
    $( e.target )closest('.ajaxContainer').addClass('pre-loader');
})
.ajaxComplete(function() {
    $( e.target )closest('.ajaxContainer').removeClass('pre-loader');
});

这适用于文档中触发ajax请求的任何单击

Zepto在和ajax请求的生命周期中触发一些事件，因此您可以使用Zepto的

ajaxBeforeSend

和

ajaxComplete

执行与jQuery相同的操作：

$(document)
.on('ajaxBeforeSend', function(e, xhr, options) {
    // show your loader
})
.on('ajaxComplete', function(e, xhr, options) {
    // hide your loader
});

---

根据他们的文档，这些事件是在document对象上触发的，因此您可以全局侦听它们，并且它们将针对您发出的每个ajax请求运行

ajaxBeforeSend

允许您访问请求对象、触发ajax请求的事件以及传递给请求的选项。所以你可以用它做很多事情。您可以在这里阅读更多内容：$.ajax

感谢您的回复，在我的项目中，我使用的是zepto，我认为zepto没有这种方法。因为，这是一个移动网站，所以我将js保持在最低水平。如果你有一个zepto或纯javascript的解决方案，那就太棒了。我更新了我的答案以涵盖zepto。希望有帮助。