首页 > 其他分享 >js拦截XMLHttpRequest

js拦截XMLHttpRequest

时间:2023-06-17 16:55:45浏览次数:31  
标签:function responseText log js console XMLHttpRequest 拦截 prototype

需要做一个扩展,拦截XMLHttpRequest,修改response里面部分值,查阅资料后一般是通过下面方法拦截

let oldOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
    // 拦截open
    // console.log(url)
    return oldOpen.apply(this, arguments);
}

let oldSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(data) {
    console.log(data)  // 发送请求的data
    this.addEventListener('readystatechange', function() {
        // 拦截response
        if (this.readyState === 4) {
            console.log(this.response)
        }
    }, false);
    return oldSend.apply(this, arguments);
}

以上代码没法直接修改responseText,因为他是只读的,如果不用修改responseText的值,只需要判断response的值然后触发相应事件用上面的方法就可以了。
但如果需要修改返回的responseText值则要用下面的办法来更改responseText的get方法

// firefox, ie8+
var accessor = Object.getOwnPropertyDescriptor(XMLHttpRequest.prototype, 'responseText');
Object.defineProperty(XMLHttpRequest.prototype, 'responseText', {
    get: function() {
        let res = accessor.get.call(this);
        // 在这里对res值进行修改
        console.log(res);
        return res;
    },
    set: function(str) {
        console.log('set responseText: %s', str);
        //return accessor.set.call(this, str);
    },
    configurable: true
});

标签:function,responseText,log,js,console,XMLHttpRequest,拦截,prototype
From: https://www.cnblogs.com/wstong2052/p/17487141.html

相关文章

  • vue-json-viewer 展示json数据
    vue-json-viewer展示json数据当项目需要再网页中展示原始的json数据的时候,我们期望能够对json进行格式化展示,并且能够进行展开和折叠。vue-json-viewer可以帮助我们实现这样的功能。1.安装$npminstallvue-json-viewer@2--save//Vue2$npminstallvue-json-viewer@3-......
  • js实现canvas保存图片为png格式并下载到本地
    functionexportCanvasAsPNG(id,fileName){varcanvasElement=document.getElementById(id);varMIME_TYPE="image/png";varimgURL=canvasElement.toDataURL(MIME_TYPE);vardlLink=document.createElement('a');dlL......
  • js中循环判断找到满足条件的单项后结束循环
    关于跳出循环的详细介绍可以看这篇:https://blog.csdn.net/Code_King006/article/details/130565506说下自己的业务场景:判断数组中是否有满足条件的套餐,如果有就接着判断下一个条件不再查询后续数组(也就是需要终止当前循环),否则返回false原本用的是foreach去判断,但这样写显然是有问......
  • JSON Web Token 入门教程
     JSONWebToken(缩写JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法。一、跨域认证的问题互联网服务离不开用户认证。一般流程是下面这样。1、用户向服务器发送用户名和密码。2、服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色、......
  • python之json和ymal模块
    json和ymal是常用的数据交换格式,ymal可以看做是json的超集。1json格式json(JavaScriptObjectNotation)是一种轻量级的数据交换格式,常用于在不同系统之间进行数据传输和存储。它由键值对构成的集合组成,通常以文件扩展名.json命名。JSON的结构非常简单,有两种基本的数据结构:1.......
  • JS的部分对象
      自定义对象:JSON里的key值必须使用“”,不然会报错 ......
  • Vue.js 组件通信
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......
  • js的new做了什么
    new对象底层发生了什么functionPerson(phone,age){this.age=age;this.phone=phone;this.showone=function(){};}Person.prototype.docall=function(){console.log("电话:",this.phone);};letperson=newPerson("12344",23);c......
  • 关于js单线程的问题
    为什么说js是单线程?为了搞清楚这个问题,我们需要先了解这几个问题:什么是线程?什么是进程?他们之间的关系?什么是任务队列(EventQueue),任务分类(宏任务、微任务)?什么是事件循环?为什么说js是单线程?为什么js要是单线程?接下来我们一起来看一下:什么是线程?什么是进程?他......
  • centos8使用Yum安装nodejs步骤方法、nodejs升级切换版本的方法
    先确认系统是否已经安装了epel-release包(EPEL是企业版Linux的额外软件包,是Fedora小组维护的一个软件仓库项目,为RHEL/CentOS提供他们默认不提供的软件包。):Bash#yuminfoepel-release如果有输出有关epel-release的已安装信息,则说明已经安装,如果提示没有安装或可安装,则安装......