重新创建 jQuery 的 ajaxStart 和 ajaxComplete 功能

问题描述

我正在尝试重现 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);