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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
js严格模式总结(分享)
Aug 22 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
js实现随机点名程序
Sep 17 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
使用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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
Python批量按比例缩小图片脚本分享
2015/05/21 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
python的变量与赋值详细分析
2017/11/08 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
老生常谈python中的重载
2018/11/11 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
Python hashlib模块实例使用详解
2019/12/24 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
回门宴新郎答谢词
2014/01/12 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
求职信范文大全
2014/05/26 职场文书
捐款活动总结
2014/08/27 职场文书
小班教师个人总结
2015/02/05 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
一年级语文教学随笔
2015/08/14 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
详解Vue slot插槽
2021/11/20 Vue.js
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS