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

我希望听到来自单个请求本身之外的所有ajax请求的onComplete事件

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

这可能吗

提前谢谢你，蒂姆

---

编辑：仅限工具库（v1.4）

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

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

---

看看：

如果您只想观察和拦截，这可能会很棘手。代码非常简单。我对单个请求原型更改的选择是

Class.refactor

from mootools more，如果可用：

// 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核心中的更改，不管这种可能性有多大。实际上，这意味着，在方法中复制和粘贴当前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

，完成您的工作并

oldsucces.apply（这个，参数）

它

困难在于，请求的子类，如HTML和JSON，如果已经定义，它们将复制旧的原型，而您的日志记录器将不这样做。您可以将其作为一个小对象来执行，并将其实现到所有请求类中

类似这样的东西很优雅，可以工作，但前提是成功方法在代码中是相同的，否则-它将在子类中破坏内容：

(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 method+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();

（函数（）{
//我们将扩展什么
var classes=[Request，Request.HTML，Request.JSON]，
//映射到文本名称
mapper=[“Request”、“Request.HTML”、“Request.JSON”]，
//存储对原始方法的引用
来源={
onSuccess:Request.prototype.onSuccess，
onFailure:Request.prototype.onFailure
},
//要实现的protos更改
变化={
onSuccess:function（）{
Request.Spy&&typeof Request.Spy==“函数”&&Request.Spy.apply（这是参数）；
orig.onSuccess.apply（此参数）；
},
onFailure:function（）{
Request.Spy&&typeof Request.Spy==“函数”&&Request.Spy.apply（这是参数）；
orig.onFailure.apply（此参数）；
}
};
调用（'implement'，更改）；
//让我们来说明哪个类原型调用了ajax
请求执行({
getClass:function（）{
var-ret；
Array.each（类、函数（klass、索引）{
if（实例of（this，klass））{
ret=映射器[索引]；
}
}，这个）；
返回ret；
}
});
})();
//要启用间谍，只需将Request.Spy定义为函数：
Request.Spy=函数（）{
log（this.getClass（），参数）；
};
//通过正常请求进行测试
新要求({
url:“/echo/html/”，
数据：{
html：“正常数据”
}
}).send（）；
//通过HTML进行测试
newrequest.HTML({
url:“/echo/html/”，
数据：{
html:正常数据
“
}
}).send（）；
//通过JSON进行测试
new Request.JSON({
url:“/echo/json/”，
数据：{
json:json.encode（{'normal'：'data'}）
}
}).send（）；

---

JSFIDLE:

不过，如果mootools的端口还不存在的话，那么签出它是一个很好的资源。哎哟。很抱歉。。。我有点太快了，错过了mootools的标签。迪米特尔，你永远是男人！感谢您的支持，我将在未来几天测试并重新发布我的发现，再次感谢您在重构的最终版本中，我将proto.implement改为Klass.implement，一切都非常好。使用Request、Request.HTML、Request.JSON进行测试。对于正在观看此请求的任何人。monitor将在函数中以“this”的形式传递请求对象，您将拥有所有可用的内容。再次感谢！这是非常好的工作，但它仅限于一个显示器。考虑是否值得附加多个监视器…是的，您可以在私有对象或类上使用addEvent/fireEvent。你甚至可以把它写成一个你加入的类。