用jQuery.ajaxSetup实现对请求和响应数据的过滤

不知道同学们在做项目的过程中有没有相同的经历呢?在使用 ajax 的时候,需要对请求参数和响应数据进行过滤处理,比如你们觉得就让请求参数和响应信息就这么赤裸裸的在互联网里来回的穿梭,比如这样:

要知道,在浩瀚的互联网中,所有的信息都是不安全的,万一有人偷窥我们怎么办?!万一被别人看见了我们的美体,偷窥到了我们的私处,然后以此威胁我们,岂不是太难堪了不是?这时,你或许会想给请求数据和响应数据加密,就相当于给我们的数据穿上了一层衣服。于是我们这样:

是不是美美哒,对,穿上一层漂漂亮亮的衣服,就不怕别人偷窥我们的美体了,我们出门的时候要穿衣服,回家的时候也要脱衣服,也就是说ajax请求的参数需要加密,ajax响应的数据的要解密,如果说项目只有几个ajax请求需要加密的话还OK,发请求之前把data处理一遍,success回调函数把responseText解密一遍就完了。可是倘若架构大一点,ajax请求多一点,每次请求响应都要单独处理加密解密启不是太冗余了,于是我便去翻阅jQuery ajax参考手册,还真的有不小的收获。

首先jQuery有一个 ajaxSetup 方法,该方法可以设置全局 ajax 初始化参数,也就是说在声明了该方法之后的所有 ajax 请求都会默认使用该方法设置的初始值。

然后我们再翻阅 ajax 参数,突然,我眼前一亮!有一个叫做 beforeSend 的方法,我一看这名字就亮了!这个函数也就是在发送 ajax 请求之前的回调函数,于是我们先把它用起来:

 $.ajaxSetup({
   beforeSend: function() {
   console.log(arguments);//我们先来看看这里面有什么好玩的东西
   }
   });

然后我们在随便发一个 ajax 请求:

$.ajax({
  url: 'SetupServlet',
  type: 'GET',
  data: {
   param1: 'test1',
   param2: 'test2',
  }
   });

在控制台我们可以看见打印的参数列表有两个对象,我们先来看看 W3C 里对 beforeSend 的解释:

  • beforeSend(XHR)
  • 类型:Function
  • 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。
  • XMLHttpRequest 对象是唯一的参数。
  • 这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

实际上这里是不对的,因为XHR不是唯一的参数,XHR只是 arguments[0] ,我们还有一个 arguments[1],我们来看看这是什么东西:

以下是在 Firefox Developer Edition(Firefox 的开发者版本,最近发现的,绝得超好用) 中打印的东西:

看到这里我们大致明白了,我们这个对象大致就是 ajax 的参数对象,由于我们本次实验的目的是给我们将要在互联网中遨游的数据穿衣服,那么我们看看这个衣服该穿在哪呢?在这个对象的 url 我们可以看到,jQuery 的 ajax 操作已经我们之前传进来的参数序列化并附加在了 url 后面,因为这是 GET 请求。那么 POST 请求长什么样呢?我们再来试一下:

$.ajax({
  url: 'SetupServlet',
  type: 'POST',
  data: {
   param1: 'test1',
   param2: 'test2',
   },
 });

现在这个参数对象长这个样子:

我们可以看到不同之处在于 POST 请求多了一个 data 属性,并且 url 后面没有参数序列化字符串,但是 data 属性却是序列化之后的参数字符串。至此我们已经可以在 beforeSend 函数中对请求前的参数进行修改了,GET 请求修改 url 后面的参数,POST 请求修改 data 中的值,具体效果在这里暂时不演示。

但是到这里我依旧不是很爽啊,因为无论是 GET 还是 POST 的,我得到的都是序列化之后的字符串,要修改参数的话得先反序列化,然后才能处理,于是我又在 ajax API 当中寻找,功夫不负有心人,我找到了一个叫做 processData 的东西,先来看看官方解释:

  • processData
  • 类型:Boolean
  • 默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

也就是说默认情况下 jQuery 会自动帮我们把参数序列化,那么我们现在把它设置为 false 看看会发生什么:

$.ajaxSetup({
    beforeSend: function() {
     console.log(arguments);
    },
    processData: false,
   });

这时请求中的参数会发生如下变化

GET:

POST:

这里我只截取部分截图,我们看到我们传进来的参数在 POST 请求就是原生的对象,终于得到我想要的东西了,此时此刻我心中大喜!必须得抽根烟祝祝性,额不对...是祝祝兴。于是我们可以拿这个 data 尽情的蹂躏,随意的鞭打,我要把这个 data 对象尽情的践踏!额,不好意思有点激动。回到正题,我们要给 data 穿衣服才对嘛,怎么说着说着就要开始脱衣服了...好的,下面我们开始穿衣服,在这里我以 base64 举例,我对请求的参数进行 base64 编码:

$.ajaxSetup({
   beforeSend: function() {
    console.log(arguments);
    var params = arguments[1].data;
    var data = '';
    for (var key in params) {
     //这两行代码的意思是进行 base64 编码
     var dataUtf8 = CryptoJS.enc.Utf8.parse(params[key]);
     var dataBase64 = CryptoJS.enc.Base64.stringify(dataUtf8);
     data = data.concat('&' + key + '=' + dataBase64);
    };
    arguments[1].data = data.substring(1, data.length);//将序列化后的参数重写
   },
   processData: false,
  });

于是乎,我们的请求参数就穿上了一身漂漂亮亮的衣服遨游在互联网的世界里了,因为 jquery 在 GET 方法中会自动把 data 附加在 url 后面,所以将 processData 设置为 false 之后 url 后面会出现 [object object] ,这是 javascript 对象 toString() 过后的结果,也就是说我们的这个方法并不很适合 GET 方法,所以想给数据穿衣服的同学们还是乖乖的使用 POST 方法吧。

讲到这里,发送数据我们解决了,但是接受数据呢?如果接受的数据也是进行加密的话,我们还需要对数据进行解密(说到这里还是得脱衣服[捂脸]),我们继续翻阅 API ,于是我又看到了一个叫做 dataFilter 的东西,老规矩,先看官方解释:

  • dataFilter
  • 类型:Function
  • 给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

该函数很简单,就两个参数,arguments[0] 是 ajax 的原始响应数据,也就是 XHR.responseText ,arguments[1] 是 ajax 请求参数中的 dataType ,而这个函数返回的值也就是 success 回调函数中的 responseText,这下就非常好办了,我们先来测试下:

前端代码发送 ajax 请求,后台响应一句 "hello" ,然后我们在 dataFilter 里返回一句 "world"

前端代码:

$.ajaxSetup({
   beforeSend: function() {
    console.log(arguments);
    var params = arguments[1].data;
    var data = '';
    for (var key in params) {
     //这两行代码的意思是进行 base64 编码
     var dataUtf8 = CryptoJS.enc.Utf8.parse(params[key]);
     var dataBase64 = CryptoJS.enc.Base64.stringify(dataUtf8);
     data = data.concat('&' + key + '=' + dataBase64);
    };
    arguments[1].data = data.substring(1, data.length);//将序列化后的参数重写
   },
   processData: false,
   dataFilter: function() {
    console.log(arguments);//这是我的一个习惯,拿到一个函数之后,管他是什么东西,先看看里面有什么参数
    return "world";
   }
  });
  $.ajax({
   url: 'SetupServlet',
   type: 'POST',
   dataType: 'text',
   data: {
    param1: 'test1',
    param2: 'test2',
   },
   success: function(responseText) {
    console.log(responseText);
   },
  });

后台代码(java):

 String param1 = request.getParameter("param1");
 String param2 = request.getParameter("param2");
 System.out.println("param1: " + param1);
 System.out.println("param2: " + param2);
 response.getWriter().write("hello");

后端输出:

前端输出:

看来一切正常,现在我们加密和解密的过程进行一条龙的处理:

前端:

 $.ajaxSetup({
   beforeSend: function () {
    var params = arguments[1].data;
    var data = '';
    for (var key in params) {
     var dataUtf8 = CryptoJS.enc.Utf8.parse(params[key]);
     var dataBase64 = CryptoJS.enc.Base64.stringify(dataUtf8);
     data = data.concat('&' + key + '=' + dataBase64);
    };
    arguments[1].data = data.substring(1, data.length);
   },
   processData: false,
   dataFilter: function () {
    var result = '';
    try {
     var a = CryptoJS.enc.Base64.parse(arguments[0]);
     var result = CryptoJS.enc.Utf8.stringify(a);
    } catch(e) {
     result = arguments[0];
    } finally {
     return result;
    }
   }
  });

后台:

String param1 = request.getParameter("param1");
  String param2 = request.getParameter("param2");
  byte[] buffer1 = Base64.decodeBase64(param1);
  byte[] buffer2 = Base64.decodeBase64(param2);
  System.out.println("param1: " + new String(buffer1));
  System.out.println("param2: " + new String(buffer2));
  response.getWriter().write(Base64.encodeBase64String("hello".getBytes()));

后台输出:

前端输出:

至此已经大功告成了,让我们来总结下我们使用过的东西

第一个: ajaxSetup 这是设置全局的初始属性

然后是三个属性:

beforeSend:发送前执行的函数

processData:默认不序列化参数

dataFilter:对响应的数据进行过滤

然后,我们就可以给我们的数据穿上一层漂漂亮亮的衣服了。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • 举例讲解jQuery中可见性过滤选择器的使用

    可见性过滤器 可见性过滤器根据元素的可见性和不可见性来选择相应的元素. 过滤器名 jQuery 语法 说明 返回 :hidden  $(':hidden')  选取所有不可见元素 集合元素 :visible  $(':visible')  选取所有可见元素 集合元素 $('p:hidden).size(); //元素p 隐藏的元素 $('p:visible').size(); //元素p 显示的元素 注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none.inpu

  • jQuery可见性过滤器:hidden和:visibility用法实例

    本文实例讲述了jQuery可见性过滤器:hidden和:visibility用法.分享给大家供大家参考.具体分析如下: :hidden 匹配所有不可见元素,如果使用css的visibility属性让元素不显示但是占位,则不属于hidden了 查找display:none的tr元素,$("tr:hidden") :visible 匹配所有可见元素 查找所有display不为none的元素,$("tr:visible") 例子: <tr id="one&

  • jQuery使用contains过滤器实现精确匹配方法详解

    本文实例讲述了jQuery使用contains过滤器实现精确匹配的方法.分享给大家供大家参考,具体如下: :contains 选择器选取包含指定字符串的元素. 该字符串可以是直接包含在元素中的文本,或者被包含于子元素中. 经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素,如: $("p:contains(is)") 表示选择所有包含 "is" 的 <p> 元素. 再如: $("p:contains(张三)") 或 $

  • jQuery过滤选择器:not()方法使用介绍

    jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) 复制代码 代码如下: <p >"a">sdfsdfs</p> <p >"b">sdfsdfs</p> <p >"c">sdf

  • jquery选择器之层级过滤选择器详解

    复制代码 代码如下: $("ancestor descendant"):选取parent元素后所有的child元素$("parent > child"):选取parent元素后所有的直属child元素,何谓"直属",也就是第一级的意思了$("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素$("prev ~ siblings"):选择prev后面

  • jQuery 过滤方法filter()选择具有特殊属性的元素

    现在有这样一种需求,需要选出所有有背景图片的元素. 这个问题有点棘手.我们无法使用选择表达式来完成这个问题了. 使用jQuery的DOM过滤方法filter(),可以根据函数中表达的任何条件选择元素. jQuery中的过滤器方法允许传递一个字符串(也就是选择器表达式)作为参数. 或者传递的是一个函数.它的返回值将定义某个元素是否被选中. 传递的函数将对当前选择集中的每个元素运行. 当函数返回假时,对应的函数就从选择集中被删除掉.每当返回值为真的时候,对应的元素 不受影响. 复制代码 代码如下:

  • jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

    Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件.它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器.通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择. 效果展示       源码下载 使用方法 使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css.jQuery和fm.selectator.jquery.js文件. <link rel="stylesheet"

  • jquery通过select列表选择框对表格数据进行过滤示例

    jquery通过select列表选择框对表格数据进行过滤 表格数据 复制代码 代码如下: <table id="example">    <thead>        <tr>            <th>Name</th>            <th>Surname</th>        </tr>    </thead>    <tbody>       

  • jQuery过滤HTML标签并高亮显示关键字的方法

    本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法.分享给大家供大家参考.具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要修改JS代码为数组,这样可过滤出多个不同的关键字,本例只是为你演示一个基本的功能,更多过滤功能请自己挖掘吧. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:

  • 简单讲解jQuery中的子元素过滤选择器

    子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素. $('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 $('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素 $('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素 $('li:nth-child(odd)').css(

随机推荐