Question

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

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

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

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

$(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调用持续时间发回服务器进行统计分析。

Answer 2

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

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

所以选择器没有定义你“捕获”事件的位置（因为，老实说，ajax事件本质上不是从DOM元素开始），而是定义了一个处理范围默认（即this将对那些/那些元素进行调整。）

总之 - 它应该是你想要的

Answer 3

拦截ajax调用的原始javacript代码：

$.ajaxSetup({
    beforeSend: function (xhr,settings) {
        alert(settings.data);
        alert(settings.url);
    }
});

拦截ajax的jQuery代码：

{{1}}

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

Answer 4

我发现的最好方法https://lowrey.me/intercept-2/

const intercept = (urlmatch, callback) => {
  let send = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function() {
    this.addEventListener('readystatechange', function() {
      if (this.responseURL.includes(urlmatch) && this.readyState === 4) {
        callback(this);
      }
    }, false);
    send.apply(this, arguments);
  };
};

Answer 5

尝试使用Mockjax.js http://code.appendto.com/plugins/jquery-mockjax

它允许你劫持AJAX调用到服务器并模拟位置。

拦截所有ajax电话？

5 个答案: