成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

_Dreams / 1376人閱讀

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

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

原文地址:我的博客

背景

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

引入

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

問題來了

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

常見的contentType x-www-form-urlencoded

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

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

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

此時(shí)默認(rèn)的提交的contentType為application/x-www-form-urlencoded,此時(shí)提交的數(shù)據(jù)將會格式化成：

name=CntChen&info=Front-End

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

如果請求類型type是GET,格式化的字符串將直接拼接在url后發(fā)送到服務(wù)端；如果請求類型是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點(diǎn)：

需要顯式指定contentType為application/json，覆蓋默認(rèn)的contentType

需要使用JSON.stringify序列化需要提交的數(shù)據(jù)對象，序列化的結(jié)果為：

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

提交的類型不能為GET,使用GET的話，數(shù)據(jù)會在url中發(fā)送，此時(shí)就無法以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ù)組，此時(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的方式，用&作為間隔。對于嵌套對象的每個(gè)字段，都要傳輸其前綴，如(1)中的userInfo重復(fù)傳輸了3次;(3)中authors傳輸了4次。
如果對象是多重嵌套的，或者嵌套對象的字段較多，x-www-form-urlencoded會產(chǎn)生更多冗余信息。同時(shí)，x-www-form-urlencoded可讀性不如json字符串。

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

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

補(bǔ)充：可能你會覺得(4)中數(shù)組內(nèi)的name和info也傳輸了多次，是不是也存在冗余？其實(shí)這不是冗余。因?yàn)閷?shù)組中的各對象，并不要求其具有相同的字段（數(shù)組中的對象并不是結(jié)構(gòu)化的），所以不能忽略“相同”的字段名。使用x-www-form-urlencoded編碼方式，數(shù)組內(nèi)對象的字段也是重復(fù)傳輸。
請求與返回統(tǒng)一

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

框架的支持

目前Mvvm的前端框架如React，網(wǎng)絡(luò)請求通常是提交一個(gè)JS對象(傳輸?shù)臅r(shí)候編碼為json字符串)。后臺服務(wù)器如Koa，接收請求和響應(yīng)的數(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

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

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

相關(guān)文章

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

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

    kel 評論0 收藏0

  • Ajax技術(shù)細(xì)節(jié)

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

    trigkit4 評論0 收藏0

  • 再也不學(xué)AJAX了?。ǘ┦褂?em>AJAX

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

    nemo 評論0 收藏0

  • Ajax 知識點(diǎn)的那些事

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

    wean 評論0 收藏0

  • JavaScript基礎(chǔ)知識總結(jié)

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

    lakeside 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<