拦截XMLHttpRequest并修改responseText

小编典典

拦截XMLHttpRequest并修改responseText

ajax

我正在尝试构建一个脚本，该脚本将充当本机XMLHttpRequest对象的代理/包装器，使我能够对其进行拦截，修改responseText并返回到原始的onreadystatechange事件。

如果应用正在尝试接收的数据在本地存储中已经存在，则上下文将中止XMLHttpRequest并将本地存储的数据传递回应用成功/失败回调方法。假设我无法控制应用程序现有的AJAX回调方法。

我最初尝试过以下想法。

var send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(data){
   //Do some stuff in here to modify the responseText
   send.call(this, data);
};

但是正如我现在确定的那样，responseText是只读的。

然后，我尝试退后一步，向编写自己的完整本机代理XMLHttpRequest，最终最终编写了自己的本机方法版本。类似于此处讨论的内容…

http://www.ilinsky.com/articles/XMLHttpRequest/#implementation-
wrapping

但是它很快变得令人困惑，并且仍然难以将修改后的数据返回到原始onReadyStateChange方法中。

有什么建议？这有可能吗？

阅读 1474

2020-07-26

共1个答案

小编典典

//

// firefox, ie8+

//

var accessor = Object.getOwnPropertyDescriptor(XMLHttpRequest.prototype, 'responseText');



Object.defineProperty(XMLHttpRequest.prototype, 'responseText', {

    get: function() {

        console.log('get responseText');

        return accessor.get.call(this);

    },

    set: function(str) {

        console.log('set responseText: %s', str);

        //return accessor.set.call(this, str);

    },

    configurable: true

});





//

// chrome, safari (accessor == null)

//

var rawOpen = XMLHttpRequest.prototype.open;



XMLHttpRequest.prototype.open = function() {

    if (!this._hooked) {

        this._hooked = true;

        setupHook(this);

    }

    rawOpen.apply(this, arguments);

}



function setupHook(xhr) {

    function getter() {

        console.log('get responseText');



        delete xhr.responseText;

        var ret = xhr.responseText;

        setup();

        return ret;

    }



    function setter(str) {

        console.log('set responseText: %s', str);

    }



    function setup() {

        Object.defineProperty(xhr, 'responseText', {

            get: getter,

            set: setter,

            configurable: true

        });

    }

    setup();

}

2020-07-26