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 相关文章推荐
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
英语专业应届生求职信范文
2013/11/15 职场文书
如何撰写岗位职责
2014/02/01 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
财会专业大学生求职信
2014/09/26 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
委托书的样本
2015/01/28 职场文书
公司年夜饭通知
2015/04/25 职场文书
python文件目录操作之os模块
2021/05/08 Python
Python爬虫基础讲解之请求
2021/05/13 Python
python百行代码实现汉服圈图片爬取
2021/11/23 Python