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。对于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);

重新创建jQuery的ajaxStart和ajaxComplete功能

1 个答案: