javascript - 拦截所有ajax调用？

Question

我正在尝试拦截所有 AJAX 调用，以检查该 AJAX 响应是否包含我从 PHP 脚本以 JSON 形式发送的特定错误代码(代码:ACCESS_DENIED、SYSTEM_ERROR、NOT_FOUND)。

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

$('.log').ajaxSuccess(function(e, xhr, settings) {
});

但是 - 只有当“ajaxSuccess”事件冒泡到 .log div 时这才有效吗？我对么？我可以通过将“ajaxSuccess”事件绑定(bind)到文档来实现我想要的吗？

$(document).ajaxSuccess(function(e, xhr, settings) {
});

我可以使用 jQuery 或原始 JavaScript 来完成此操作。

Answer 1

如果您使用 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);

我发布了more specific example on github它拦截 AJAX 调用并将 AJAX 调用持续时间发送回服务器进行统计分析。