重新创建jQuery的ajaxStart和ajaxComplete功能

Question

我试图在没有jQuery的情况下重现jQuery的函数ajaxComplete和ajaxStart,这样它们就可以在没有库依赖的任何环境中使用(这是一个特殊的用例).这些函数允许在任何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永远不会被称为.任何指导将不胜感激.

工作演示:http://jsfiddle.net/_nderscore/QTQ5s/

Answer 1

使用.onreadystatechange不起作用,因为我正在使用jQuery测试,jQuery的ajax方法操作并删除onreadystatechange属性.

但是,为loadendIE工作添加一个事件监听器就好了.对于IE,我设置了一个间隔 - 不是最佳解决方案,但它适用于我的需求.我只打算将此脚本用于IE8 +和现代浏览器.

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);