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面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 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
一个odbc连mssql分页的类
2006/10/09 PHP
怎样才能成为PHP高手?学会“懒惰”的编程
2006/12/05 PHP
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
PHP7新特性简述
2017/06/11 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
如何在sublime编辑器中安装python
2020/05/20 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
简单说下OSPF的操作过程
2014/08/13 面试题
金融专业个人求职信范文
2013/11/28 职场文书
公司寄语大全
2014/04/10 职场文书
推广活动策划方案
2014/08/23 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers