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
一、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中发送。
二、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字符串的编码发送
三、multipart/form-data,主要用于传输文件数据的
四、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的优势
1、较小的传输量
从前文可以看出,使用json字符串的形式,可以减少冗余字段的传输,减少请求的数据量。
2、请求与返回统一
目前许多前后端交互的返回数据是json字符串,这可能是考虑较小的传输量而作出的选择。同时,ES3.1添加了,许多浏览器可以,可以将json字符串解析为JS对象(JSON.parse
),将JS对象编码为json字符串(JSON.stringify
);
目前Mvvm的前端框架如React,网络请求通常是提交一个JS对象(传输的时候编码为json字符串)。后台服务器如Koa,接收请求和响应的数据是json字符串。
4、可读性高