jquery 拦截所有 AJAX 调用?

thigvfpy  于 2022-11-22  发布在  jQuery
关注(0)|答案(4)|浏览(246)

我尝试拦截所有 AJAX 调用,以检查AJAX响应是否包含我从PHP脚本(代码:访问被拒绝、系统错误、未找到)。
我知道一个人可以这样做:

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

但是--只有当“ajaxSuccess”事件上升到.log div时,这个方法才有效吗?我说的对吗?通过将“ajaxSuccess”事件绑定到文档,我能达到我想要的效果吗?

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

我可以在jQuery或原始JavaScript中执行此操作。

kyvafyod

kyvafyod1#

如果你使用jQuery,$.ajaxSuccess是一个不错的选择,但是这里有一个通用的选项,可以拦截来自所有框架的XHR调用(我已经用ExtJS和jQuery测试过了. -即使多个框架同时加载,它也应该可以工作)。

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

7xllpg7q

7xllpg7q2#

http://api.jquery.com/ajaxSuccess/开始:
每当 AJAX 请求成功完成时,jQuery就会触发ajaxSuccess事件,此时会执行所有注册到.ajaxSuccess()方法的处理程序。
因此选择器并不定义您“捕获”事件的位置(因为,老实说, AJAX 事件本质上并不是从DOM元素开始的),而是定义了一个默认处理的范围(即this将指向那个/那些元素)。
总而言之--它应该正是你所希望的

wj8zmpe1

wj8zmpe13#

最好的方法,我发现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);
  };
};
vvppvyoh

vvppvyoh4#

尝试使用Mockjax.js http://code.appendto.com/plugins/jquery-mockjax
它允许您劫持对服务器的 AJAX 调用并模拟位置。

相关问题