跟踪浏览器http请求,可以在控制台使用改代码(chrome浏览器)

重写:XMLHttpRequest请求

js中如何重新的方法覆盖之前的方法:

var newFunction = oldFunction

oldFunction = function (){
    return newFunction()// 或者 newFunction.call(this, arguments)
}

在请求的每个生命周期监听请求,这样我们就可以很容实现代理访问了。 

;(function () {
    function ajaxEventTrigger(event) {
        var ajaxEvent = new CustomEvent(event, {detail: this});
        window.dispatchEvent(ajaxEvent);
    }

    var oldXHR = window.XMLHttpRequest;

    function newXHR() {
        var realXHR = new oldXHR();

        realXHR.addEventListener('abort', function () {
            console.log("abort")
            console.log(this)
            ajaxEventTrigger.call(this, 'ajaxAbort');
        }, false);

        realXHR.addEventListener('error', function () {
            console.log("error")
            console.log(this)
            ajaxEventTrigger.call(this, 'ajaxError');
        }, false);

        realXHR.addEventListener('load', function () {
            console.log("load")
            console.log(this)
            ajaxEventTrigger.call(this, 'ajaxLoad');
        }, false);

        realXHR.addEventListener('loadstart', function () {
            console.log("loadstart")
            console.log(this)
            ajaxEventTrigger.call(this, 'ajaxLoadStart');
        }, false);

        realXHR.addEventListener('progress', function () {
            console.log("progress")
            console.log(this)
            ajaxEventTrigger.call(this, 'ajaxProgress');
        }, false);

        realXHR.addEventListener('timeout', function () {
            console.log("timeout")
            console.log(this)
            ajaxEventTrigger.call(this, 'ajaxTimeout');
        }, false);

        realXHR.addEventListener('loadend', function () {
            console.log("loadend")
            console.log(this)
            ajaxEventTrigger.call(this, 'ajaxLoadEnd');
        }, false);

        realXHR.addEventListener('readystatechange', function () {
            console.log("readystatechange")
            console.log(this)
            ajaxEventTrigger.call(this, 'ajaxReadyStateChange');
        }, false);

        return realXHR;
    }

    window.XMLHttpRequest = newXHR;
})();

你可能感兴趣的:(chrome,javascript,前端)