問題描述

我正在嘗試重現 jQuery 的函數 ajaxComplete 和 ajaxStart 沒有 jQuery，因此它們可以在沒有庫依賴的任何環境中使用(這是一個特殊的用例).這些函數允許在任何 ajax 請求之前和之后調用事件偵聽器.在我的示例中，我稱它們為 preAjaxListener 和 postAjaxListener.

I'm trying to reproduce jQuery's functions ajaxComplete and ajaxStart without jQuery so that they could be used in any environment with no library dependencies (it's a special use case). These functions allow for an event listener to be called before and after any ajax request. In my example, I call them preAjaxListener and postAjaxListener.

我試圖通過連接到 XMLHttpRequest 對象并覆蓋/裝飾 open 和 send 來完成它.是的，我知道這很臟.

I'm trying to accomplish it by hooking into the XMLHttpRequest object and overwriting/decorating open and send. Yes, I know this is dirty.

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 請求.

I do not want to write wrapper functions to make ajax requests. I want to be able to hook into any ajax request made by any library (or with vanilla js) on the page.

到目前為止，只有 preAjaxListener 函數有效.我似乎無法弄清楚為什么，但似乎 onreadystatechange 從未被調用過.任何指導將不勝感激.

So far, only the preAjaxListener function works. I can't seem to figure out why, but it seems that onreadystatechange is never being called. Any guidance would be greatly appreciated.

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

推薦答案

使用 .onreadystatechange 不起作用，因為我正在使用 jQuery 進行測試，并且 jQuery 的 ajax 方法操作并刪除了 onreadystatechange屬性.

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