首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript写一个ajax自动拦截并下载数据代码实例

Posted in Javascript onSeptember 07, 2019

这篇文章主要介绍了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
})

还可以将这个拦截，写为一个浏览插件：

javascript写一个ajax自动拦截并下载数据代码实例

插件代码地址： https://gitee.com/muand/ajaxDown/tree/master/ajaxDown

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

javascript写一个ajax自动拦截并下载数据代码实例

- Author -

muamaker

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript之可拖动的iframe效果代码
Aug 01 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
javascript实现2048游戏示例
May 04 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 #Javascript
解决layer.open后laydate失效的问题
Sep 06 #Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 #Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 #Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 #Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 #Javascript
vue按需加载实例详解
Sep 06 #Javascript
爬虫(2) Counter(1) 写入策略(1) binlog(2) redo log(1) 优化(1) 抖音(1) MIME(1) Xpath(1) LOGO(1)
You might like
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php的sso单点登录实现方法
2015/01/08 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
php中数组最简单的使用方法
2020/12/27 PHP
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
深入理解Promise.all
2018/08/08 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
深入理解Django中内置的用户认证
2017/10/06 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
旷课检讨书大全
2014/01/21 职场文书
公司司机岗位职责
2014/02/07 职场文书
工作鉴定评语
2014/05/04 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
收入证明范本
2015/06/12 职场文书
于丹论语心得观后感
2015/06/15 职场文书
Python办公自动化之Excel（中）
2021/05/24 Python
python 命令行传参方法总结
2021/05/25 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis