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

Question

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

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

这可能吗？

提前致谢，提姆

编辑:仅要求 mootools lib (v1.4)

Answer 1

如果您只想观察 和拦截，这可能会很棘手。代码非常简单。我对单个请求原型(prototype)更改的选择是来自 mootools-more 的 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-core 更改工作。它不关心 func 代码是什么，它会在原始代码之后运行我们的代码并且不会中断，除非将来有巨大 api 更改

您也可以通过 implement 更改类，尽管这不会考虑 mootools-core 中的更改，但可能会发生这种情况。实际上，这意味着，将当前函数复制并粘贴到方法中并添加到其中 - 幸运的是，我们想要修改的简短方法:

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) .

困难在于，Request 的子类，如 HTML 和 JSON - 如果已经定义，它们将复制旧原型(prototype)，而您的记录器现在将执行此操作。您可以改为将其作为一个小对象来执行，并将其实现到所有 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);
})();

last 方法 + 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/