多次使用ajax时，最大调用堆栈大小超出错误

Question

我正在编写一段应该捕获页面上所有ajax响应的代码。我设法通过覆盖javascript direct ajax的XMLHttpRequest.onreadystatechange或者使用jQuery ajax的ajaxComplete（）来实现这一点。

当我尝试多次使用ajax而不创建新的XMLHttpObject时，我的问题就出现了，例如：

var xhr = new XMLHttpRequest();
xhr.open("GET", '/echo/json/', true);
xhr.send();
xhr.open("GET", '/echo/json/', true);
xhr.send()

这使我的代码变得混乱，我得到了最大的堆栈错误 这是我在JSFiddle上的测试代码：http://jsfiddle.net/zxCfW/

var s_ajaxListener = {};
s_ajaxListener.tmpSend = XMLHttpRequest.prototype.send;
s_ajaxListener.callback = function () {
    console.log('additional state change');
};

XMLHttpRequest.prototype.send = function() {
  s_ajaxListener.tmpOnReadyStateChange = this.onreadystatechange;

  this.onreadystatechange = function() {
      if (s_ajaxListener.tmpOnReadyStateChange){
          s_ajaxListener.tmpOnReadyStateChange.apply(this, arguments);
      }
      if(this.readyState == 4 && this.status == 200) {
          s_ajaxListener.callback();
          this.onreadystatechange = s_ajaxListener.tmpOnReadyStateChange;
      }
    };

  s_ajaxListener.tmpSend.apply(this, arguments);
};
$(document).ajaxComplete(s_ajaxListener.callback);

我相信这是因为ajax调用是异步的，因此原始的onreadystatechange不会重置为默认值，但我不知道如何解决这个问题。