拦截所有ajax电话?

Sta*_*ann 23 javascript ajax jquery dom-events

我试图拦截所有AJAX调用,以检查该AJAX响应是否包含我从PHP脚本发送为JSON的特定错误代码(代码:ACCESS_DENIED,SYSTEM_ERROR,NOT_FOUND).

我知道可以做这样的事情:

$('.log').ajaxSuccess(function(e, xhr, settings) {
});
Run Code Online (Sandbox Code Playgroud)

但是 - 只有当"ajaxSuccess"事件冒泡到.log div时才能工作吗?我对么?我可以通过将"ajaxSuccess"事件绑定到文档来实现我想要的吗?

$(document).ajaxSuccess(function(e, xhr, settings) {
});
Run Code Online (Sandbox Code Playgroud)

PS任何见解都是受欢迎的,jQuery或原始的javascript.谢谢!

And*_*ate 62

如果你正在使用jQuery,这$.ajaxSuccess是一个很好的选择,但是这里有一个稍微更通用的选项,它将拦截来自所有框架的XHR调用(我已经使用ExtJS和jQuery测试它 - 即使同时加载多个框架它也应该工作).它已经过测试,可与IE8,Chrome和Firefox配合使用.

(function(XHR) {
    "use strict";

    var open = XHR.prototype.open;
    var send = XHR.prototype.send;

    XHR.prototype.open = function(method, url, async, user, pass) {
        this._url = url;
        open.call(this, method, url, async, user, pass);
    };

    XHR.prototype.send = function(data) {
        var self = this;
        var oldOnReadyStateChange;
        var url = this._url;

        function onReadyStateChange() {
            if(self.readyState == 4 /* complete */) {
                /* This is where you can put code that you want to execute post-complete*/
                /* URL is kept in this._url */
            }

            if(oldOnReadyStateChange) {
                oldOnReadyStateChange();
            }
        }

        /* Set xhr.noIntercept to true to disable the interceptor for a particular call */
        if(!this.noIntercept) {            
            if(this.addEventListener) {
                this.addEventListener("readystatechange", onReadyStateChange, false);
            } else {
                oldOnReadyStateChange = this.onreadystatechange; 
                this.onreadystatechange = onReadyStateChange;
            }
        }

        send.call(this, data);
    }
})(XMLHttpRequest);
Run Code Online (Sandbox Code Playgroud)

在github上发布了一个更具体的例子,它拦截了AJAX调用并将AJAX调用持续时间发送回服务器进行统计分析.

  • 根据您的实现,我在 NPM 上发布了一些可以同时处理请求和响应的内容!https://github.com/slorber/ajax-interceptor (2认同)

mki*_*nas 7

来自http://api.jquery.com/ajaxSuccess/:

每当Ajax请求成功完成时,jQuery就会触发ajaxSuccess事件.已经使用.ajaxSuccess()方法注册的任何和所有处理程序都会在此时执行.

因此,选择器不会定义您"捕获"事件的位置(因为,老实说,ajax事件本质上不是从DOM元素开始),而是定义了默认处理的范围(即this会对那个/那些元素进行调整).

总之 - 它应该是你想要的


pet*_*ter 7

用于拦截ajax调用的原始javacript代码:

(function(send) {
    XMLHttpRequest.prototype.send = function(body) {
        var info="send data\r\n"+body;
        alert(info);
        send.call(this, body);
    };
})(XMLHttpRequest.prototype.send);
Run Code Online (Sandbox Code Playgroud)

用于拦截ajax的jQuery代码:

$.ajaxSetup({
    beforeSend: function (xhr,settings) {
        alert(settings.data);
        alert(settings.url);
    }
});
Run Code Online (Sandbox Code Playgroud)

参考:http://myprogrammingnotes.com/intercept-ajax-calls-jquery.html