<!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 自动拦截，并下载数据的更多相关文章

  1. 写一个ajax程序就是如此简单

    写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发 ...

  2. 用javascript写原生ajax(笔记)

    AJAX  的全名叫做  Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...

  3. Individual Project "写一个能自动生成小学四则运算题目的程序"

    一.题目简介 写一个能自动生成小学四则运算题目的程序. 初步拟定要实现的功能后,估计一下自己需要花多长时间.编程过程中记录自己实际用了多长时间. 然后和同学们比较一下各自程序的功能.实现方法的异同等等 ...

  4. 怎么用JavaScript写一个区块链？

    几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...

  5. 写一个nginx.conf方便用于下载某个网页的所有资源

    写一个nginx.conf方便用于下载某个网页的所有资源 worker_processes 1; events { worker_connections 1024; } http { include ...

  6. Javascript:来一个AJAX封装函数

    前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 ...

  7. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  8. 用javascript写一个emoji表情插件

    概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...

  9. 用javascript写一个前端等待控件

    前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来. 因为项目使用了bootstrap的原因,不想轻易使用第三方,怕不兼容.自己写一个. 技术点包括动态加载CSS,javas ...

随机推荐

  1. Java核心复习——CompletableFuture

    介绍 JDK1.8引入CompletableFuture类. 使用方法 public class CompletableFutureTest { private static ExecutorServ ...

  2. Java 面向对象（六）

    抽象类和抽象方法 抽象方法 在方法前面添加了一个关键字 abstract 抽象方法的特点 (1)抽象方法是没有方法体的. (2)抽象方法必须得要定义在抽象类 或 接口当中 (在类前面添加上了一个abs ...

  3. PyTorch Tutorials 2 AUTOGRAD: AUTOMATIC DIFFERENTIATION

    %matplotlib inline Autograd: 自动求导机制 PyTorch 中所有神经网络的核心是 autograd 包. 我们先简单介绍一下这个包,然后训练第一个简单的神经网络. aut ...

  4. [webpack]webpack打包优化

    1.import优化 a.tree-shaking 把没用到的代码删除掉,import 在生产环境下 会自动去除掉没用的代码 b.scope hosting 作用域提升,在webpack中会自动省略一 ...

  5. VS2015编译gdal库

    gdal下载地址:http://trac.osgeo.org/gdal/wiki/DownloadSource 修改nmake.opt中的一些配置.1. GDAL_HOME = “C:\warmerd ...

  6. 自定义基于IFC数据的施工进度数据结构

    <DataSource>D:/qlbz20190802.ifc</DataSource> <Datas> <Data> <ID></I ...

  7. 算法习题---4.3救济金发放（UVa133）

    一:题目 (n< )个人站成一圈,逆时针编号为1~n.有两个官员,A从1开始逆时针数,B从n开始顺时针数.在每一轮中,官员A数k个就停下来,官员B数m个就停下来(注意有可能两个官员停在同一个人上 ...

  8. web手工项目02-注册功能输入分析，处理，输出方法-测试用例及缺陷编写-首页轮播图和购物车

    web手工项目第二天笔记 昨日回顾 搭建测试环境(WAMP,phpStudy,tpshop项目文件) 熟悉项目(四个步骤,三个来源) 项目测试流程(需求评审,测试计划与方案,测试用例设计与评审,测试执 ...

  9. OpenStack Magnum项目简介

    1 项目简介 Magnum是OpenStack中一个提供容器集群部署的服务. Magnum是一个Pass层的OpenStack项目. Magnum使用Heat部署一个包含Docker和Kubernet ...

  10. building confluentinc kafka-connect-hdfs

    When I try to compile I get an error about a missing SNAPSHOT dependency. The error looks something ...