JSFiddle - React, Tailwind, and code Playground

by gilly3

HTML

<div>Global handler called: <span id="globalHandler">0</span></div>
<div>Private handler called: <span id="privateHandler">0</span></div>
<button>Send Request</button>

JavaScript

$(function() {
    $("button").click(function() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/echo/json", true);
        xhr.onreadystatechange = function() {
            if (this.readyState == 4) {
                var span = $("#privateHandler");
                var count = parseInt(span.text());
                span.text(++count);
            }
        };
        xhr.send();
    });
});

(function() {
    function globalHandler() {
        if (this.readyState == 4) {
            var span = $("#globalHandler");
            var count = parseInt(span.text());
            span.text(++count);
        }
    }
    var xhrSend = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function() {
        var xhr = this;
        if (xhr.addEventListener) {
            xhr.removeEventListener("readystatechange", globalHandler);
            xhr.addEventListener("readystatechange", globalHandler, false);
        }
        else {
            function readyStateChange() {
                if (handler) {
                    if (handler.handleEvent) handler.handleEvent.apply(xhr, arguments);
                    else handler.apply(xhr, arguments);
                }
                globalHandler.apply(xhr, arguments);
                setReadyStateChange();
            }
            function setReadyStateChange() {
                setTimeout(function() {
                    if (xhr.onreadystatechange != readyStateChange) {
                        handler = xhr.onreadystatechange;
                        xhr.onreadystatechange = readyStateChange;
                    }
                }, 1);
            }
            var handler;
            setReadyStateChange();
        }
        xhrSend.apply(xhr, arguments);
    };
})();