重新創建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屬性。

但是，為loadend添加一個事件監聽器，除了IE之外，其他地方都可以loadend工作。 對於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);