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 相关文章推荐
JS正则中的RegExp对象对象
Nov 07 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
js调试系列 初识控制台
Jun 18 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
多种方式实现js图片预览
Dec 12 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 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
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
js获取div高度的代码
2008/08/09 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
python绘制汉诺塔
2021/03/01 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
妇科医生自荐信
2013/11/05 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
七年级作文之秋游
2019/10/21 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers