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里的prototype使用示例
Nov 19 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
javascript数组详解
Oct 22 Javascript
javascript中clone对象详解
Dec 03 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
vue.js实现三级菜单效果
Oct 19 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
非常实用的php验证码类
2016/05/15 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
浅谈Javascript 执行顺序
2013/12/18 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python实现多线程网页下载器
2018/04/15 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
python实现银行账户系统
2021/02/22 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
奖励申请报告范文
2015/05/15 职场文书
党小组意见范文
2015/06/08 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
关于MySQL中的 like操作符详情
2021/11/17 MySQL