Question

我希望从各个请求本身以外的所有ajax请求中听取onComplete事件。

我想在任何/所有ajax请求完成时触发事件。

这可能吗？

提前谢谢，蒂姆

编辑：仅限要求mootools lib（v1.4）

Answer 1

如果您只想观察并进行拦截，这可能会非常棘手。代码很简单。如果可以的话，我选择单个请求原型更改将是来自mootools的更多Class.refactor：

// enable log func...
Class.refactor(Request, {
    success: function(text, xml){
        this.previous(text, xml);
        Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);            
    },
    failure: function(){
        this.previous();
        Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);            
    }
});

和普通位 - 无论你走哪条都是一样的。

// assign a logger function
Request.monitor = function() {
    console.log("onComplete", this.response.text);
};

// call a simple request object.   
new Request({
    url: "/echo/html/",
    method: "post",
    data: {
        html: "hello"
    }
}).send();

原因：它将独立于mootools核心变化而工作。它不关心func代码是什么，它将在原始代码之后运行，并且不会破坏，除非将来有巨大的 api更改

您也可以通过implement更改课程，但这不会考虑mootools-core的变化，但可能是这样。在实践中，这意味着，复制并粘贴方法中的当前func并添加到它 - 幸运的是，我们想要修改的简短方法：

Request.implement({
    success: function(text, xml){
        this.onSuccess(this.processScripts(text), xml);
        Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);            
    },
    failure: function(){
        this.onFailure();
        Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);            
    }
});

最后，你甚至可以保存旧的低级别var oldsuccess = Request.prototype.success，做你的事情并oldsuccess.apply(this, arguments)。

困难在于，像HTML和JSON这样的Request的子类 - 如果已经定义，他们将复制旧的原型并且你的记录器将立即执行。您可以将其作为一个小对象来实现，并将其实现到所有Request类中。

这样的东西很优雅，但只有成功方法在代码中是相同的才能工作，否则它会破坏子类中的东西：

(function() {
    var changes = {
        success: function(text, xml){
            this.onSuccess(this.processScripts(text), xml);
            Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);            
        },
        failure: function(){
            this.onFailure();
            Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);            
        }
    };

    [Request, Request.HTML, Request.JSON].invoke('implement', changes);
})();

最后一个方法的组合+ orig proto是你真正需要的，因为成功函数在所有3个方面都不同...

编辑这太荒谬了。就像我说的，不是最简单的任务......

这可能是我在生产中使用的最终版本/重构，测试和使用所有3个类。请记住，在进行JSON或HTML的额外解析之前，已完成的方法。这是低级别的日志记录。否则，重构将继续onSuccess和onFailure。

(function() {
    // what we will extend
    var classes = [Request, Request.HTML, Request.JSON],
        // map to a text name
        mapper = ["Request", "Request.HTML", "Request.JSON"],
        // store reference to original methods
        orig = {
            onSuccess: Request.prototype.onSuccess,
            onFailure: Request.prototype.onFailure
        },
        // changes to protos to implement
        changes = {
            onSuccess: function(){
                Request.Spy && typeof Request.Spy == "function" && Request.Spy.apply(this, arguments);
                orig.onSuccess.apply(this, arguments);
            },
            onFailure: function(){
                Request.Spy && typeof Request.Spy == "function" && Request.Spy.apply(this, arguments);
                orig.onFailure.apply(this, arguments);
            }
        };

    classes.invoke('implement', changes);

    // allow us to tell which Class prototype has called the ajax
    Request.implement({
        getClass: function() {
            var ret;
            Array.each(classes, function(klass, index) {
                if (instanceOf(this, klass)) {
                    ret = mapper[index];
                }
            }, this);
            return ret;
        }
    });
})();

// to enable spying, just define Request.Spy as a function:
Request.Spy = function() {
    console.log(this.getClass(), arguments);
};

// test it via normal Request
new Request({
    url: "/echo/html/",
    data: {
        html: "normal data"    
    }
}).send();


// test via HTML
new Request.HTML({
    url: "/echo/html/",
    data: {
        html: "<p>normal data</p>"    
    }
}).send();

// test via JSON
new Request.JSON({
     url: "/echo/json/",
     data: {
        json: JSON.encode({'normal':'data'})    
     }
}).send();

jsfiddle：http://jsfiddle.net/dimitar/3rnKe/

Answer 2

编辑：解决方案适用于jQuery。不是MooTools。

$(document).ajaxComplete(function() {
  $(this).text('Triggered ajaxComplete handler.');
});

看看：http://api.jquery.com/ajaxComplete/

任何ajax请求完成时触发事件

2 个答案: