JS 拦截全局ajax请求实例解析


Posted in Javascript onNovember 29, 2016

你是否有过下面的需求:需要给所有ajax请求添加统一签名、需要统计某个接口被请求的次数、需要限制http请求的方法必须为get或post、需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!?,少年,想法有点大胆,不过,我欣赏!直接上轮子,Ajax-hook不仅可以满足你想要的,同时可以给你更多。

Ajax-hook源码地址 : https://github.com/wendux/Ajax-hook

如何使用

1.引入ajaxhook.js

<script src="wendu.ajaxhook.js"></script>

2.拦截需要的ajax 回调或函数。

hookAjax({
//拦截回调
onreadystatechange:function(xhr){
console.log("onreadystatechange called: %O",xhr)
},
onload:function(xhr){
console.log("onload called: %O",xhr)
},
//拦截函数
open:function(arg){
console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
}
})

ok, 我们使用jQuery(v3.1) 的get方法来测一下:

// get current page source code 
$.get().done(function(d){
console.log(d.substr(0,30)+"...")
})

结果 :

> open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true
> onload called: XMLHttpRequest
> <!DOCTYPE html>
<html>
<head l...

拦截成功了! 我们也可以看到jQuery3.1内部已经放弃onreadystatechange而改用onload了。

API

hookAjax(ob)

  • ob,类型是对象,key为想要拦截的回调或函数,value为我们的拦截函数。
  • 返回值: 原始的 XMLHttpRequest。如果有写请求不想被拦截,可以new 这个。

unHookAjax()

  • 卸载拦截;卸载后,拦截将失效。

改变ajax行为

拦截所有ajax请求,检测请求method,如果是“GET”,则中断请求并给出提示

hookAjax({
open:function(arg){
if(arg[0]=="GET"){
console.log("Request was aborted! method must be post! ")
return true;
}
} 
})

拦截所有ajax请求,请求统一添加时间戳

hookAjax({
open:function(arg){
arg[1]+="?timestamp="+Date.now();
} 
})

修改请求返回的数据“responseText”

hookAjax({
onload:function(xhr){
//请求到的数据首部添加"hook!" 
xhr.responseText="hook!"+xhr.responseText;
}
})

结果:

hook!<!DOCTYPE html>
<html>
<h...

有了这些示例,相信开篇提到的需求都很容易实现。最后测一下unHook

hookAjax({
onreadystatechange:function(xhr){
console.log("onreadystatechange called: %O",xhr)
//return true
},
onload:function(xhr){
console.log("onload called")
xhr.responseText="hook"+xhr.responseText;
//return true;
},
open:function(arg){
console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
arg[1]+="?hook_tag=1";
},
send:function(arg){
console.log("send called: %O",arg[0])
}
})
$.get().done(function(d){
console.log(d.substr(0,30)+"...")
//use original XMLHttpRequest
console.log("unhook")
unHookAjax()
$.get().done(function(d){
console.log(d.substr(0,10))
})
})

输出:

open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true
send called: null
onload called
hook<!DOCTYPE html>
<html>
<he...
unhook
<!DOCTYPE

注意

1.拦截函数返回值是一个boolean,如果为true则会阻断ajax请求,默认为false,不会阻断请求。

2.所有的回调拦截函数的参数为当前的XMLHttpRequest 实例,如onreadystatechange、onload;所有ajax原始方法的拦截函数会将原始参数以数组的形式传递给拦截函数,你可以在拦截函数中修改它。

以上所述是小编给大家介绍的JS 拦截全局ajax请求实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用JS 清空File控件的路径值
Jul 08 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
JavaScript页面加载事件实例讲解
Sep 01 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 #Javascript
详解堆的javascript实现方法
Nov 29 #Javascript
Bootstrap Table使用心得总结
Nov 29 #Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 #Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 #Javascript
jQuery序列化表单成对象的简单实现
Nov 29 #Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 #Javascript
You might like
2020最新CPU的性能排名
2020/04/02 数码科技
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python3中eval函数用法使用简介
2019/08/02 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
党课学习思想汇报
2014/01/02 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2014年应急工作总结
2014/12/11 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python