成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

_Dreams / 1413人閱讀

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

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

原文地址:我的博客

背景

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

引入

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

問(wèn)題來(lái)了

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

常見(jiàn)的contentType x-www-form-urlencoded

這是Jquery/Zepto Ajax默認(rèn)的提交類(lèi)型。最簡(jiǎ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ù)將會(huì)格式化成：

name=CntChen&info=Front-End

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

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

json

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

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ù)對(duì)象，序列化的結(jié)果為：

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

提交的類(lèi)型不能為GET,使用GET的話(huà)，數(shù)據(jù)會(huì)在url中發(fā)送，此時(shí)就無(wú)法以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對(duì)象編碼

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

格式化demo

對(duì)象嵌套 
{
    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}}
對(duì)象字段為數(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"}]}

可見(jiàn)：x-www-form-urlencoded是先將對(duì)象鋪平，然后使用key=value的方式，用&作為間隔。對(duì)于嵌套對(duì)象的每個(gè)字段，都要傳輸其前綴，如(1)中的userInfo重復(fù)傳輸了3次;(3)中authors傳輸了4次。
如果對(duì)象是多重嵌套的，或者嵌套對(duì)象的字段較多，x-www-form-urlencoded會(huì)產(chǎn)生更多冗余信息。同時(shí)，x-www-form-urlencoded可讀性不如json字符串。

回答問(wèn)題：json最好 較小的傳輸量

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

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

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

框架的支持

目前Mvvm的前端框架如React，網(wǎng)絡(luò)請(qǐng)求通常是提交一個(gè)JS對(duì)象(傳輸?shù)臅r(shí)候編碼為json字符串)。后臺(tái)服務(wù)器如Koa，接收請(qǐng)求和響應(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

    kel 評(píng)論0 收藏0

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

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

    trigkit4 評(píng)論0 收藏0

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

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

    nemo 評(píng)論0 收藏0

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

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

    wean 評(píng)論0 收藏0

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

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

    lakeside 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<