重塑jQuery的ajaxStart和ajaxComplete功能

问题描述

我试图重现jQuery的功能 ajaxComplete 和的没有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.

我想通过挂钩到XMLHtt prequest对象和覆盖/装饰打开和发送。是的，我知道这是肮脏的。

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请求。我希望能够挂接到任何图书馆的任何Ajax请求（或​​香草JS）在页面上。

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 永远不会被调用。任何指导，将大大AP preciated。

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 属性。

Using .onreadystatechange wasn't working because I was testing with jQuery and jQuery's ajax methods manipulate and removes the onreadystatechange property.

不过，添加事件侦听器 loadend 工作得很好，到处都是，但IE浏览器。对于IE浏览器，我设置了一个区间，而不是 - 不是最佳的解决方案，但它适合我的需要。 我只打算这个脚本工作在IE8 +和现代浏览器。的

However, adding an event listener for loadend works just fine everywhere but IE. For IE, I set up an interval instead - not the optimal solution, but it works for my needs. I only intended this script to work on IE8+ and modern browsers.

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功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！