重新创建 jQuery 的 ajaxStart 和 ajaxComplete 功能

2022-01-15 00:00:00 hook xmlhttprequest javascript ajax

我正在尝试重现 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属性.

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

相关文章