ajax与spring mvc请求的总结

https://www.cnblogs.com/love540376/p/6912637.html

 

dataType分类

dataType

预期服务器返回的数据类型。若是不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，好比XML MIME类型就被识别为XML。
在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。
可用值: 

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，全部POST请求都将转为GET请求。(由于将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串

 

 

contentType

contentType是指http/https发送信息至服务器时的内容编码类型，contentType用于代表发送数据流的类型，服务器根据编码类型使用特定的解析方式，获取数据流中的数据。内容编码类型的做用，有点像本地文件的后缀名。

常见的contentType

1、x-www-form-urlencoded

这是Jquery/Zepto Ajax默认的提交类型。最简例子为：

 

1 let userInfo = {
 2  name: 'CntChen',
 3  info: 'Front-End',
 4 }
 5 
 6 $.ajax({
 7   url: 'https://github.com',
 8   type: 'POST',
 9   data: userInfo,
10   success: (data) => {},
11 });

此时默认的提交的contentType为application/x-www-form-urlencoded,此时提交的数据将会格式化成：

name=CntChen&info=Front-End

HTML的form表单默认的提交编码类型也是x-www-form-urlencoded,可能这就是Jquery/Zepto等类库(实际上是Ajax：XMLHttpRequest)也默认使用contentType:x-www-form-urlencoded的缘由。若是请求类型type是GET,格式化的字符串将直接拼接在url后发送到服务端；若是请求类型是POST，格式化的字符串将放在http body的Form Data中发送。

2、json

使用json内容编码发送数据，最简例子为：

 

1 let userInfo = {
 2  name: 'CntChen',
 3  Info: 'Front-End',
 4 }
 5 
 6 $.ajax({
 7   url: 'https://github.com',
 8   contentType: 'application/json',
 9   type: 'POST',
10   data: JSON.stringify(userInfo),
11   success: (data) => {},
12 });

 

最主要的不一样有3点：

• 须要显式指定contentType为application/json，覆盖默认的contentType

• 须要使用JSON.stringify序列化须要提交的数据对象，序列化的结果为：

{"name":"CntChen","info":"Front-End"}

• 提交的类型不能为GET,使用GET的话，数据会在url中发送，此时就没法以json字符串的编码发送

3、multipart/form-data，主要用于传输文件数据的

4、JS对象编码

对于扁平的参数对象，使用x-www-form-urlencoded或json并无大的差异，后台均可以处理成对象，而且数据编码后的长度差异不大。
可是对于对象中嵌套对象，或对象字段包含数组，此时两种内容编码方式就有较大差异。

 

普通对象

 

1 {
2     userInfo :{
3      name: 'CntChen',
4      info: 'Front-End',
5      login: true,
6     },
7 }

 

• to x-www-form-urlencoded (1)

userInfo[name]=CntChen&userInfo[info]=Front-End&userInfo[login]=true

• to json (2)

{"userInfo":{"name":"CntChen","Info":"Front-End","login":true}}

对象字段为数组

 

1 {
 2     authors:[
 3       {
 4         name: 'CntChen',
 5         info: 'Front-End',
 6       },
 7       {
 8         name: 'Eva',
 9         info: 'Banker',
10       }
11     ],
12 }

 

• to x-www-form-urlencoded (3)

authors[0][name]=CntChen&authors[0][info]=Front-End&authors[1][name]=Eva&authors[1][info]=Banker

• to json (4)

{"authors":[{"name":"CntChen","info":"Front-End"},{"name":"Eva","info":"Banker"}]}

可见：x-www-form-urlencoded是先将对象铺平，而后使用key=value的方式，用&做为间隔。对于嵌套对象的每一个字段，都要传输其前缀，如(1)中的userInfo重复传输了3次;(3)中authors传输了4次。
若是对象是多重嵌套的，或者嵌套对象的字段较多，x-www-form-urlencoded会产生更多冗余信息。同时，x-www-form-urlencoded可读性不如json字符串。

json的优点

一、较小的传输量

从前文能够看出，使用json字符串的形式，能够减小冗余字段的传输，减小请求的数据量。

二、请求与返回统一

目前许多先后端交互的返回数据是json字符串，这多是考虑较小的传输量而做出的选择。同时，ES3.1添加了JSON对象，许多浏览器能够直接使用JSON对象，能够将json字符串解析为JS对象(JSON.parse),将JS对象编码为json字符串（JSON.stringify）;
因此使用json编码请求数据，其编码解码很是方便，而且能够保持与后台返回数据的格式一致。
三、框架的支持

目前Mvvm的前端框架如React，网络请求一般是提交一个JS对象(传输的时候编码为json字符串)。后台服务器如Koa，接收请求和响应的数据是json字符串。

四、可读性高