当ajax请求在页面加载完成后拦截ajax调用，xhr拦截器和ajax启动也不起作用

编程问答 2022-04-23

问题描述

我尝试了 xhr 拦截器来修改 ajax 响应并在 ajax 响应之前做一些处理。我的代码更早工作，但现在不是。实际上我正在 bigcommerce 开发应用程序，由于基石主题更新的一些变化，现在我的应用程序无法正常工作。 这是我使用的实际 xhr 拦截器：

var oldOpen = XMLHttpRequest.prototype.open;
function onStateChange(event) {
    console.log(this.responseURL);
    this.responseText = this.response;
    //I checked url here and did some process according to it
}
XMLHttpRequest.prototype.open = function() {
    this.addEventListener("readystatechange",onStateChange)
    Object.defineProperty(this,'responseText',{
        writable: true
    });
    oldOpen.apply(this,arguments);
}

我也试过ajaxstart来解决这个问题：

$(document ).ajaxStart(function() {
  console.log('started');
});

Ajax 启动函数只对页面加载期间调用的 ajax 请求执行。 当我单击按钮时，我希望 ajax 在页面加载后开始执行。默认情况下，单击此按钮，执行 ajax 请求（我从控制台检查，它是 xhr ajax）并打开模式。但不执行ajax start。

还有一个问题，是jquery版本导致了这个问题吗？我使用了 jquery 1.7.2。还没改。我也试过 1.12.4。 提前感谢您的帮助。

解决方法

您可以使用 onreadystatechange 尝试类似的操作；

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4) return; {
          console.log(JSON.parse(xhr.responseText));
       }
};
xhr.open('GET','/your/api/endpoint/here/');
xhr.send();
ajaxbigcommerceinterceptorinterceptorjqueryxmlhttprequestxmlhttprequest