Question

我的计划是在不修改代码的情况下为所有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'）是一个好主意，因为我认为它会在全球事件中添加点击事件会对移动网站造成太大影响吗？

这是我的小提琴 http://jsfiddle.net/noppanit/xke87/2/

感谢。

Answer 1

首先，您应该注意扩展本机对象原型。

其次，如果您正在使用jQuery，那么使用$.ajaxStart()和$.ajaxComplete()为所有ajax设置开始和结束操作非常容易实现您想要做的事情调用。您可以在此处阅读相关内容：https://api.jquery.com/ajaxStart/，此处：https://api.jquery.com/ajaxComplete/。

基本实施：

$( 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
});

根据他们的文档，这些事件会在文档对象上触发，因此您可以全局监听它们，并且它们会针对您发出的每个ajax请求运行。 ajaxBeforeSend使您可以访问您的请求对象，触发ajax请求的事件以及传递给请求的选项。所以你可以做很多事情。你可以在这里阅读更多内容：http://zeptojs.com/# $。ajax

如何正确地为ajax做上下文预加载？

1 个答案: