最合適的Ajax內容編碼類型

_Dreams 發布于2019-08-22 10:37 / 1348人閱讀

摘要：引入是指發送信息至服務器時的內容編碼類型，用于表明發送數據流的類型，服務器根據編碼類型使用特定的解析方式，獲取數據流中的數據。內容編碼類型的作用，有點像本地文件的后綴名。問題來了發送請求最合適的內容編碼類型是什么常見的這是默認的提交類型。

最合適的Ajax內容編碼類型

原文地址:我的博客

背景

在公司開發的一個頁面的Ajax請求使用了contentType:application/json，被后臺的同事要求用x-www-form-urlencoded,撕逼撕不過他，趕緊回來學學知識。

引入

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

問題來了

發送Ajax請求最合適的內容編碼類型是什么？

常見的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的原因，畢竟表單的歷史比Ajax早多了。--我猜的，待驗證

如果請求類型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

When you are writing client-side code, all you need to know is use multipart/form-data when your form includes any < input type="file" > elements.

-- multipart/form-data

multipart/form-data主要用于傳輸文件數據的。

JS對象編碼

對于扁平的參數對象，使用x-www-form-urlencoded或json并沒有大的差別，后臺都可以處理成對象，并且數據編碼后的長度差別不大。
但是對于對象中嵌套對象，或對象字段包含數組，此時兩種內容編碼方式就有較大差別。

格式化demo

對象嵌套

{
    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最好 較小的傳輸量

從前文可以看出，使用json字符串的形式，可以減少冗余字段的傳輸，減少請求的數據量。

補充：可能你會覺得(4)中數組內的name和info也傳輸了多次，是不是也存在冗余？其實這不是冗余。因為對數組中的各對象，并不要求其具有相同的字段（數組中的對象并不是結構化的），所以不能忽略“相同”的字段名。使用x-www-form-urlencoded編碼方式，數組內對象的字段也是重復傳輸。

請求與返回統一

目前許多前后端交互的返回數據是json字符串，這可能是考慮較小的傳輸量而作出的選擇。同時，ES3.1添加了JSON對象，許多瀏覽器可以直接使用JSON對象，可以將json字符串解析為JS對象(JSON.parse),將JS對象編碼為json字符串（JSON.stringify）;
所以使用json編碼請求數據，其編碼解碼非常方便，并且可以保持與后臺返回數據的格式一致。
一致是一件很美好的事情。

框架的支持

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

可讀性高

可讀性高是json格式自帶buff。

結論

趕緊使用contentType=applications/json。

References

Ajax

http://css88.com/doc/zeptojs_...$.ajax

x-www-form-urlencoded VS json - Pros and Cons. And Vulns.

http://homakov.blogspot.in/20...

What does enctype="multipart/form-data" mean?

http://stackoverflow.com/ques...

Can I use JSON

http://caniuse.com/#search=JSON

JSON

http://www.json.org/

END

GPU云服務器云服務器 js ajax返回的數據類型最常見的服務器類型 AJAX內容 webrtc編碼類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90957.html

從源碼看 Promise 概念與實現

摘要：從源碼看概念與實現是異步編程中的重要概念，它較好地解決了異步任務中回調嵌套的問題。這些概念中有趣的地方在于，標識狀態的變量如都是形容詞，用于傳入數據的接口如與都是動詞，而用于傳入回調函數的接口如及則在語義上用于修飾動詞的副詞。從源碼看 Promise 概念與實現 Promise 是 JS 異步編程中的重要概念，它較好地解決了異步任務中回調嵌套的問題。在沒有引入新的語言機制的前提下，這...

kel 2019-08-26 11:58 評論0 收藏0
Ajax技術細節

摘要：狀態碼，未發送，創建對象，默認值為執行當前請求已經發送，并且已經接收到服務器端返回的相應頭信息響應主體內容正在返回相應主體內容已經返回到客戶端網絡狀態碼網絡狀態碼，記錄當前服務器返回信息的狀態標識成功狀態以開頭也表示成功，但服務器端做了特殊 Ajax狀態碼，xhr.readyState 0：UNSENT 未發送，創建Ajax對象，默認值為01：OPENED 執行xhr.open2：HE...

trigkit4 2019-08-22 17:04 評論0 收藏0
再也不學AJAX了！（二）使用AJAX

摘要：隨著對象被廣泛的接收，也開始著手制定相應的標準來規范其行為。四設置請求頭每個請求和響應都會帶有相應的頭部信息，包含一些與數據，收發者網絡環境與狀態等相關信息。該方法會令對象實例停止觸發事件，并且不再允許訪問任何和響應有關的對象屬性。在上一篇文章中我們知道，AJAX是一系列技術的統稱。在本篇中我們將更進一步，詳細解釋如何使用Ajax技術在項目中獲取數據。而為了解釋清楚，我們首先要搞清楚...

nemo 2019-08-21 17:51 評論0 收藏0
Ajax 知識點的那些事

摘要：發送后等待服務端響應，響應是以觸發事件來通知，隨后通過請求對象實例拿到狀態以及響應的內容。表示服務器響應內容的文本形式。而是在調用發出后，被調用者通過觸發事件，調用事件處理回調函數。 Ajax是什么 AJAX即Asynchronous JavaScript and XML（異步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術，包含了HTML、CSS、...

wean 2019-08-22 18:40 評論0 收藏0
JavaScript基礎知識總結

摘要：字面量方式這是最簡單最基本的一種方法。簡單的構造函數方式通過這樣的形式創建對象。結合上面的簡單構造函數和原型，一個完整的構造函數應該是這樣的還有一種方法就是提供的簡單實現下中的，，創建一個對象談談對象的理解。避免使用表達式又稱動態屬性。要點：數據類型、面向對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、異步裝載回調、模板引擎、Nodejs等。 JS基本類型有什么？引...

lakeside 2019-08-19 17:40 評論0 收藏0