Javascript 重新创建jQuery'；ajaxStart和ajaxComplete功能

我试图在没有jQuery的情况下复制jQuery的函数，以便它们可以在没有库依赖关系的任何环境中使用（这是一个特殊的用例）。这些函数允许在任何ajax请求之前和之后调用事件侦听器。在我的示例中，我将它们称为preAjaxListener和postAjaxListener

我试图通过挂接XMLHttpRequest对象并覆盖/修饰

open

和

send

来完成它。是的，我知道这很脏

XMLHttpRequest.prototype.open = (function(orig){
    return function(a,b,c){
        this._HREF = b; // store target url
        return orig.apply(this, arguments); // call original 'open' function
    };
})(XMLHttpRequest.prototype.open);

XMLHttpRequest.prototype.send = (function(orig){
    return function(){
        var xhr = this;
        _core._fireAjaxEvents('pre', xhr._HREF); // preAjaxListener fires

        var rsc = xhr.onreadystatechange || function(){}; // store the original onreadystatechange if it exists
        xhr.onreadystatechange = function(){ // overwrite with custom function
            try {
                if (xhr.readyState == 4){
                    _core._fireAjaxEvents('post', xhr._HREF); // postAjaxListneer should fire
                    this.onreadystatechange = rsc;
                } 
            } catch (e){ }
            return rsc.apply(this, arguments); // call original readystatechange function
        };

        return orig.apply(this, arguments); // call original 'send' function
    };
})(XMLHttpRequest.prototype.send);

我不想编写包装函数来发出ajax请求。我希望能够钩住页面上任何库（或使用vanilla js）发出的任何ajax请求

到目前为止，只有

preAjaxListener

函数起作用。我似乎不明白为什么，但似乎从未调用过

onreadystatechange

。任何指导都将不胜感激

---

工作演示：

使用

。onreadystatechange

不起作用，因为我在用jQuery进行测试，jQuery的ajax方法操作并删除了

onreadystatechange

属性

但是，为

loadend

添加事件侦听器在除IE之外的任何地方都可以正常工作。对于IE，我设置了一个间隔，这不是最佳解决方案，但它满足了我的需要。我只想让这个脚本在IE8+和现代浏览器上工作

---

你为什么要触摸原生原型？创建自己的包装器对象。因为我可以！：）我知道它很脏，但我不想编写包装函数来发出ajax请求。我所处的情况是，页面上存在我无法控制的脚本，我希望能够连接到任何库（或使用vanilla js）发出的任何ajax请求。因此，您希望捕获页面上的每个XHR请求/响应吗？是的，没错。我希望能够在发送函数之前运行它，在响应返回之后。我们如何使用它呢？我运行了这段代码，在页面上的ajax之后，我在控制台中看到了错误：

uncaughtreferenceerror:_core未在Google Chrome上定义

50@VitalyZdanevich您可以在这里查看我的完整小提琴示例：

\u core

只是一个普通对象，我用它作为占位符来代替我正在研究的一个库，非常好的解决方案伙伴！

XMLHttpRequest.prototype.send = (function(orig){
    return function(){
        _core._fireAjaxEvents('pre', this._HREF);

        if (!/MSIE/.test(navigator.userAgent)){
            this.addEventListener("loadend", function(){
                _core._fireAjaxEvents('post', this._HREF);
            }, false);
        } else {
            var xhr = this,
            waiter = setInterval(function(){
                if(xhr.readyState && xhr.readyState == 4){
                    _core._fireAjaxEvents('post', xhr._HREF);
                    clearInterval(waiter);
                }
            }, 50);
        }

        return orig.apply(this, arguments);
    };
})(XMLHttpRequest.prototype.send);