最合適的Ajax內(nèi)容編碼類型

_Dreams 發(fā)布于2019-08-22 10:37 / 1358人閱讀

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

最合適的Ajax內(nèi)容編碼類型

原文地址:我的博客

背景

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

引入

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

問題來了

發(fā)送Ajax請求最合適的內(nèi)容編碼類型是什么？

常見的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,此時提交的數(shù)據(jù)將會格式化成：

name=CntChen&info=Front-End

HTML的form表單默認的提交編碼類型也是x-www-form-urlencoded,可能這就是Jquery/Zepto等類庫(其實是Ajax：XMLHttpRequest)也默認使用contentType:x-www-form-urlencoded的原因，畢竟表單的歷史比Ajax早多了。--我猜的，待驗證

如果請求類型type是GET,格式化的字符串將直接拼接在url后發(fā)送到服務端；如果請求類型是POST，格式化的字符串將放在http body的Form Data中發(fā)送。

json

使用json內(nèi)容編碼發(fā)送數(shù)據(jù)，最簡例子為：

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序列化需要提交的數(shù)據(jù)對象，序列化的結(jié)果為：

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

提交的類型不能為GET,使用GET的話，數(shù)據(jù)會在url中發(fā)送，此時就無法以json字符串的編碼發(fā)送

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主要用于傳輸文件數(shù)據(jù)的。

JS對象編碼

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

格式化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}}

對象字段為數(shù)組

{
    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會產(chǎn)生更多冗余信息。同時，x-www-form-urlencoded可讀性不如json字符串。

回答問題：json最好 較小的傳輸量

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

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

請求與返回統(tǒng)一

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

框架的支持

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

可讀性高

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

結(jié)論

趕緊使用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返回的數(shù)據(jù)類型最常見的服務器類型 AJAX內(nèi)容 webrtc編碼類型

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90957.html

從源碼看 Promise 概念與實現(xiàn)

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

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

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

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

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

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

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

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

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

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