常見的contentType編碼類型【轉】

轉自https://segmentfault.com/a/1190000006871099

contentType是指http/https發送信息至服務器時的內容編碼類型，contentType用於表明發送數據流的類型，服務器根據編碼類型使用特定的解析方式，獲取數據流中的數據。內容編碼類型的作用，有點像本地文件的后綴名。

常見的contentType

一、x-www-form-urlencoded

這是Jquery/Zepto Ajax默認的提交類型。最簡例子為：

let userInfo = {
 name: 'CntChen',
 info: 'Front-End',
}

$.ajax({
  url: 'https://github.com',
  type: 'POST',
  data: userInfo,
  success: (data) => {},
});

此時默認的提交的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內容編碼發送數據，最簡例子為：

let userInfo = {
 name: 'CntChen',
 Info: 'Front-End',
}

$.ajax({
  url: 'https://github.com',
  contentType: 'application/json',
  type: 'POST',
  data: JSON.stringify(userInfo),
  success: (data) => {},
});

最主要的不同有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並沒有大的差別，后台都可以處理成對象，並且數據編碼后的長度差別不大。
但是對於 對象中嵌套對象，或 對象字段包含數組，此時兩種內容編碼方式就有較大差別。

 

普通對象

{
    userInfo :{
     name: 'CntChen',
     info: 'Front-End',
     login: true,
    },
}

• 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}}

對象字段為數組

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

• 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對象，許多瀏覽器可以直接使用JSON對象，可以將json字符串解析為JS對象(JSON.parse),將JS對象編碼為json字符串（JSON.stringify）;
所以使用json編碼請求數據，其編碼解碼非常方便，並且可以保持與后台返回數據的格式一致。
3、框架的支持

目前Mvvm的前端框架如React，網絡請求通常是提交一個JS對象(傳輸的時候編碼為json字符串)。后台服務器如Koa，接收請求和響應的數據是json字符串。

4、可讀性高