Overriding XHR method

by techsin

CSS

lk.dispatchEvent('onreadystatechange');

JavaScript

XMLHttpRequest = function () {
    var b = XMLHttpRequest;
    return function () {
        var xhr = new b();

        Object.defineProperty(xhr, 'onreadystatechange', {
            enumerable: true,
            configurable: true,
            set: function (x) {
                xhr._v = function () {
                    console.log("hey <<custom func");
                    x();
                };
            },
            get: function () {
                return xhr._v;
            }
        });
        //redifinig onreadystatefunction messes up the event listener. Probably because property exists without a value, a null, and is referenced to at initalization. But when it get redeclared via objectdefine property and not just redefined the hadler in listner reference keeps the old copy. 
        xhr.addEventListener('readystatechange', function () {
            xhr.onreadystatechange();
        }, false);
        return xhr;
    }
}();

var lk = new XMLHttpRequest();

lk.onreadystatechange = function () {
    console.log('The stat is: ' + lk.readyState);
};
lk.open("GET", "http://www.google.com", true);
lk.send();