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字符串。

四、可讀性高