javascript 写一个ajax 自动拦截，并下载数据
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 自动下载 ajax 的脚本
;(function($,flag,host){
if(!flag){
//如果关闭下载数据,则什么也不做,否则会拦截 ajax 请求返回的数据,进行下载
return ;
}
var ajax = $.ajax; //缓存原始的 ajax
$.ajax = function(opt){
var success = opt.success || function(){};
var url = opt.url || "";
opt.success = function(res){
try{
var name = url.split("?")[0];
if(host){
name = name.replace(host,"");
}
name = name.replace(/\//g,"_");
downData(res,`${name}.json`);
}catch(e){
console.warn(e);
}
success(res);
}
return ajax(opt);
}
function downData(data,name){
if(typeof data == "object"){
data = JSON.stringify(data);
}
var blob = new Blob([data], {
type: 'text/html,charset=UTF-8'
});
window.URL = window.URL || window.webkitURL;
var a = document.createElement("a");
a.setAttribute("download",name || "data.json");
a.href = URL.createObjectURL(blob);
a.click();
}
})($,true,"https://www.easy-mock.com"); //自动下载数据
$.ajax({
url:"https://www.easy-mock.com/mock/5bb02bc0a0afc503f502a292/example/demo/secret",
success(res){
console.log(res);
}
})
</script>
</html>
使用原生的 xhr 和fetch 拦截
// 自动下载 ajax 的脚本
// 命名空间
window.ajax_interceptor_manny = {
settings: {
switchOn: false,
switchQuery:false
},
originalXHR: window.XMLHttpRequest,
myXHR: function() {
console.log(" ---ajax 拦截--- ")
let pageScriptEventDispatched = false;
const modifyResponse = () => {
//this.responseText = overrideTxt;
//this.response = overrideTxt;
if (pageScriptEventDispatched) {
return;
}
pageScriptEventDispatched = true;
ajax_interceptor_manny.download(this.responseText, this.responseURL);
} // new 一个原生的 XMLHttpRequest 不需要参数,将 xhr 的属性,都复制给this,暴露到外面
const xhr = new ajax_interceptor_manny.originalXHR(); for (let attr in xhr) {
if (attr === 'onreadystatechange') {
xhr.onreadystatechange = (...args) => {
if (this.readyState == 4 && this.status == 200) {
// 请求成功
if (ajax_interceptor_manny.settings.switchOn) {
// 开启拦截
modifyResponse();
}
}
this.onreadystatechange && this.onreadystatechange.apply(this, args);
}
continue;
} else if (attr === 'onload') {
xhr.onload = (...args) => {
// 请求成功
if (ajax_interceptor_manny.settings.switchOn) {
// 开启拦截
modifyResponse();
}
this.onload && this.onload.apply(this, args);
}
continue;
} if (typeof xhr[attr] === 'function') {
this[attr] = xhr[attr].bind(xhr);
} else {
if (attr === 'responseText' || attr === 'response') {
var k = "_"+attr;
Object.defineProperty(this, attr, {
get: () => this[k] == undefined ? xhr[attr] : this[k],
set: (val) => this[k] = val,
});
} else {
Object.defineProperty(this, attr, {
get: () => xhr[attr],
set: (val) => xhr[attr] = val,
});
}
}
}
},
originalFetch: window.fetch.bind(window),
myFetch: function(...args) {
console.log(" ---fetch 拦截--- ")
return ajax_interceptor_manny.originalFetch(...args).then((response) => {
if (response.ok) {
response.clone().text().then((res) => {
ajax_interceptor_manny.download(res, response.url);
}).catch((e) => {
console.warn(e)
});
}
return response;
});
},
download(data, url) {
try {
if (ajax_interceptor_manny.settings.switchOn) {
if (typeof data == "object") {
data = JSON.stringify(data);
}
var blob = new Blob([data], {
type: 'text/html,charset=UTF-8'
});
window.URL = window.URL || window.webkitURL; var name = url;
if(!(url.indexOf("http://") >= 0 || url.indexOf("https://") >= 0)){
//不存在域名
url = window.origin + url; //手动添加一个，避免URL解析出错
}
try {
var u = new URL(url);
name = u.pathname;
var search = u.search.replace("?","");
if(ajax_interceptor_manny.settings.switchQuery && search){
//需要带上 get 参数
name = name + "$"+ search;
}
} catch (e) {console.warn(e)}
name = name.replace(new RegExp("//","g"),"/");
name = name.replace(new RegExp("/","g"), "_");
name = name + ".json";
var a = document.createElement("a");
a.setAttribute("download", name || "data.json");
a.href = URL.createObjectURL(blob);
a.click();
}
} catch (e) {
console.error("下载数据失败", e);
} }, setSetting(data) {
if (typeof data !== "object") {
return;
}
//设置环境
for (var i in data) {
ajax_interceptor_manny.settings[i] = data[i];
}
},
init() {
window.XMLHttpRequest = ajax_interceptor_manny.myXHR;
window.fetch = ajax_interceptor_manny.myFetch;
}
}
ajax_interceptor_manny.init();
ajax_interceptor_manny.setSetting({
switchOn:true
})
还可以将这个拦截，写为一个浏览插件：
插件代码地址： https://gitee.com/muand/ajaxDown/tree/master/ajaxDown
javascript 写一个ajax 自动拦截，并下载数据的更多相关文章
- 写一个ajax程序就是如此简单
写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发 ...
- 用javascript写原生ajax(笔记)
AJAX 的全名叫做 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...
- Individual Project "写一个能自动生成小学四则运算题目的程序"
一.题目简介 写一个能自动生成小学四则运算题目的程序. 初步拟定要实现的功能后,估计一下自己需要花多长时间.编程过程中记录自己实际用了多长时间. 然后和同学们比较一下各自程序的功能.实现方法的异同等等 ...
- 怎么用JavaScript写一个区块链？
几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...
- 写一个nginx.conf方便用于下载某个网页的所有资源
写一个nginx.conf方便用于下载某个网页的所有资源 worker_processes 1; events { worker_connections 1024; } http { include ...
- Javascript:来一个AJAX封装函数
前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 ...
- JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...
- 用javascript写一个emoji表情插件
概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...
- 用javascript写一个前端等待控件
前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来. 因为项目使用了bootstrap的原因,不想轻易使用第三方,怕不兼容.自己写一个. 技术点包括动态加载CSS,javas ...
随机推荐
- Vue进阶（Bus/作用域slot/动态组件）
一.Vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 我们在之前已经知道了父子传值.父组件传递过来了的值,在子组件通过props接受,然后就可以使用了. 也学过了隔代传值,均是通过pro ...
- Linux make menuconfig打开失败
OS:Ubuntu 16.04 LTS 使用“make menuconfig”配置kernel时,提示make menuconfig打开失败 $ make menuconfig *** Unable ...
- git如何获取获取子模块的代码？
答: 步骤如下: 1. git submodule init 2. git submodule update
- 简易的CRM系统案例之SpringMVC+JSP+MySQL+hibernate框架版本
继续对上一版本进行改版,变成SpringMVC框架 简易的CRM系统案例之易的CRM系统案例之JSP+MySQL+SSH框架版本 src/spring.xml <?xml version=&qu ...
- linux下程序启动后后台运行实现
关于linux下的程序运行很简单,将源码编译成二进制(假设为proram)文件后直接在命令行运行即可,root#./program如果需要后台运行,即不占用当前终端,这在嵌入式linux显得十分有必要 ...
- Facebook libra白皮书
https://libra.org/en-US/white-paper/ An Introduction to Libra Libra的使命是建立一个简单的全球货币和金融基础设施,为数十亿人服务.该文 ...
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_16-网关-过虑器
4.5 过虑器 Zuul的核心就是过虑器,通过过虑器实现请求过虑,身份校验等. 4.5.1 ZuulFilter 自定义过虑器需要继承 ZuulFilter,ZuulFilter是一个抽象类,需要覆盖 ...
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_08-用户认证-认证服务查询数据库-用户登录前端
点击登陆注册链接 跳转到登陆的页面 门户的前端代码 当前路径base64编码 登陆的表单,在学习中心的前端. 这就是登陆的表单 这是表单的校验 请求服务端的接口 登陆请求的方法 请求的地址nginx上 ...
- 一百四十：CMS系统之使用flask-paginate实现分页功能
官方文档:https://pythonhosted.org/Flask-paginate/ 安装:pip install flask-paginate 在没有分页的情况下,默认会加载所有内容 在con ...
- (八)利用apache组件进行文件上传下载
一.文件上传 文件上传,即服务器端得到并处理用户上传的文件,这个文件存放在request里,也就是需要对request进行处理. 1.1 编写html文件 <!DOCTYPE html> ...