使用jQuery.ajaxSetup过滤请求和响应数据

我想知道学生们在做项目的过程中是否有同样的经历。使用ajax时，您需要过滤请求参数和响应数据。例如，如果你认为请求参数和响应信息是如此赤裸裸地在互联网上来回穿梭，例如：

要知道，在浩瀚的互联网中，所有的信息都是不安全的。如果有人偷看我们怎么办？如果有人看到我们的身体，偷看我们的私处，用它威胁我们，岂不是太丢人了？此时，您可能希望对请求数据和响应数据进行加密，这相当于在我们的数据上加了一层衣服。所以我们是这样的：

是不是很美？是的，如果你穿上一层漂亮的衣服，你就不会害怕别人偷窥我们的身体。出门要穿衣服，回家要脱衣服。也就是说，ajax请求的参数需要加密，ajax响应的数据需要解密。如果项目中只有几个ajax请求需要加密，也没关系。请在发送请求之前处理数据，成功回调函数将解密一次响应文本。但是，如果架构比较大，ajax请求比较多的话，对于每个请求响应分别处理加密和解密也不会太冗余，所以我看了jQuery ajax参考手册，确实收获了不少。

首先，jQuery有一个ajaxSetup方法，可以设置全局的ajax初始化参数，这意味着声明这个方法后的所有ajax请求都会默认使用这个方法设置的初始值。

然后我们又读了一遍ajax参数，突然，我的眼睛亮了！有一个叫beforeSend的方法，我一看就亮了！这个函数是发送ajax请求之前的回调函数，所以我们先用它：

$.Ajax setup({ BeforeSend : function(){ console . log(arguments))；//先来看看这里有什么好玩的吧} })；然后我们只发送一个ajax请求：

$.ajax({ url: 'SetupServlet '，type: 'GET '，data: { param1: 'test1 '，param2: 'test2 '，})；在控制台中，我们可以看到打印的参数列表中有两个对象。我们先来看看W3C中对beforeSend的解释：

类型beforeSend(XHR):函数可以在发送请求之前修改XMLHttpRequest对象的函数，比如添加一个自定义的HTTP头。XMLHttpRequest对象是唯一的参数。这是一个Ajax事件。如果返回false，您可以取消这个ajax请求。实际上，这是错误的，因为XHR不是唯一的参数，XHR只是参数[0]，而我们有一个参数[1]。让我们看看这是什么：

以下是火狐开发者版(火狐的开发者版本，最近被发现，非常容易使用)中打印的内容：

看到这里，我们可以大致理解我们的对象大致是ajax的参数对象。既然这个实验的目的是给我们将在网上传播的数据穿衣服，那么让我们看看这件衣服应该穿在哪里。在这个对象的url处，我们可以看到jQuery的ajax操作已经序列化了我们之前传入的参数，并将它们附加到url上，因为这是一个GET请求。那么POST请求是什么样子的呢？让我们再试一次：

$.ajax({ url: 'SetupServlet '，type: 'POST '，data: { param1: 'test1 '，param2: 'test2 '，}，})；这个参数对象如下所示：

我们可以看到区别在于POST请求有一个额外的数据属性，url后没有参数序列化字符串，但是数据属性是序列化的参数字符串。此时，我们可以在beforeSend函数中修改请求之前的参数。GET请求修改url后的参数，POST请求修改数据中的值。具体效果暂不在此演示。

但是我在这里还是不太开心，因为无论是GET还是POST，我都是得到序列化的字符串，如果要修改参数，必须先反序列化才能处理，所以我在ajax API中寻找，努力是有回报的。我找到了一个叫processData的东西。我们先来看看官方的解释：

processData的类型：布尔默认值： true。默认情况下，如果通过data选项传入的数据是一个对象(从技术上讲，只要它不是字符串)，它将被处理并转换为查询字符串，以匹配默认的内容类型' application/x-www-form-URL encoded '。如果要发送DOM树信息或其他不想转换的信息，请设置为false。也就是说，默认情况下，jQuery会自动为我们序列化参数，所以现在让我们将其设置为false，看看会发生什么：

$.Ajax setup({ BeforeSend : function(){ console . log(arguments))；}，processData: false，})；此时，请求中的参数将发生如下变化

GET:

邮政：

这里我只截图了一些，我们看到我们传入的参数是POST请求中的原始对象，最终得到了我想要的。这一刻，我的心喜出望外！不得不抽支烟祝性，量错了.是祝幸福。因此，我们可以肆意破坏这些数据。我要随意践踏这个数据对象！嗯，我很抱歉。我有点激动。回到主题，我们应该着装数据，我们将开始脱衣服.好，让我们开始着装，这里我以base64为例，我用base64编码请求的参数：

$.Ajax setup({ BeforeSend : function(){ console . log(arguments))；var params=参数[1]。数据；var数据=' '；for(params中的var key){//这两行代码的意思是用base64编码var data utf8=crypto js . enc . utf8 . parse(params[key])；var dataBase64=cryptojs . enc . base64 . stringify(dataUtf8)；data=data . concat(' key '=' dataBase64)；};参数[1]。data=data.substring(1，data . length)；//重写序列化参数}，processData: false，})；结果，我们的请求参数穿上了漂亮的衣服，在互联网的世界里旅行。因为jquery在GET方法中自动将数据追加到url，所以当processData设置为false时，[object object]将出现在url之后。这是javascript对象toString()的结果，也就是说我们的方法不太适合GET方法，所以想要打扮数据的同学要乖乖地使用POST方法。

至此，我们已经解决了发送数据的问题，但是接收数据呢？如果接收到的数据也是加密的，我们还是需要对数据进行解密(这里还是要脱衣服[遮住脸])。我们继续读API，所以我又看到了一个叫dataFilter的东西。老规矩，先看官方解释：

数据过滤器类型：函数对Ajax返回的原始数据进行预处理。提供了两个参数，数据和类型：数据是Ajax返回的原始数据，类型是调用jQuery.ajax时提供的dataType参数。该函数返回的值将由jQuery进一步处理。函数很简单，就两个参数，参数[0]是ajax的原始响应数据，即XHR.responseText，参数[1]是ajax请求参数中的dataType，这个函数返回的值也是success回调函数中的responseText，非常简单。让我们先测试一下：

前端代码发送一个ajax请求，后台响应一个“你好”，然后我们在数据过滤器中返回一个“世界”

前端代码：

$.Ajax设置({ BeforeSend :函数(){ console。日志(参数))；var参数=参数[1]。数据；定义变量数据=' ';用于(参数中的定义变量键){ //这两行代码的意思是进行base64编码var dataUtf8=crypto js。随信附上utf8。解析(params[key])；var dataBase64=cryptojs。随信附上base64。stringify(dataUtf8)；数据=数据。concat(' key '=' Database64)；};参数[1]。data=data.substring(1，数据。长度)；//将序列化后的参数重写}，processData: false，数据筛选器： function(){ console。日志(参数);//这是我的一个习惯，拿到一个函数之后，管他是什么东西，先看看里面有什么参数回归'世界；} });$.ajax({ url: 'SetupServlet '，type: 'POST '，dataType: 'text '，data: { param1: 'test1 '，param2: 'test2 '，}，success : function(responseText){ console。日志(responseText)；}, });后台代码(java):

字符串参数1=请求。GetParameter(' param 1 ')；字符串参数2=请求。GetParameter(' param 2 ')；系统。出去。println(' param 1: ' param 1)；系统。出去。println(' param 2: ' param 2)；response.getWriter().写(“你好”)；后端输出：

前端输出：

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

前端：

$.Ajax安装程序({ BeforeSend :函数(){ var params=arguments[1]).数据；定义变量数据=' ';用于(参数中的var key){ var dataUtf8=cryptojs。随信附上utf8。解析(params[key])；var dataBase64=cryptojs。随信附上base64。stringify(dataUtf8)；数据=数据。concat(' key '=' Database64)；};参数[1]。data=data.substring(1，数据。长度)；}，processData: false，数据筛选器： function(){ var result=' '；请尝试{ var a=crypto js。随信附上base64。解析(参数[0]);var结果=cryptojs。随信附上utf8。stringify(a)；}捕获(e) {结果=引数[0];}最后{返回结果；} } });后台：

字符串参数1=请求。GetParameter(' param 1 ')；字符串参数2=请求。GetParameter(' param 2 ')；byte[]缓冲区1=base64。decadebase64(参数1)；byte[]缓冲区2=base64。decadebase64(参数2)；系统。出去。println(' param 1: ' new String(缓冲区1))；系统。出去。println(' param 2: ' new String(缓冲区2))；response.getWriter().写入(base64。encodabase 64字符串(' hello ').getBytes()))；后台输出：

前端输出：

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

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

然后是三个属性：

发送前：发送前执行的函数

processData:默认不序列化参数

数据过滤器：对响应的数据进行过滤

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

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