HTTP Post請求的四種編碼方式

HTTP協議規定 POST 提交的數據必須放在消息主體（entity-body）中，但協議並無規定數據必須使用什麼編碼方式。實際上，開發者徹底能夠本身決定消息主體的格式，只要最後發送的 HTTP 請求知足上面的格式就能夠。可是，數據發送出去，還要服務端解析成功纔有意義。通常服務端語言如 php、python 等，以及它們的 framework，都內置了自動解析常見數據格式的功能。
服務端一般是根據請求頭（headers）中的 Content-Type 字段來獲知請求中的消息主體是用何種方式編碼，再對主體進行解析。
因此說到 POST 提交數據方案，包含了 Content-Type 和消息主體編碼方式兩部分。

POST請求中，提交的數據放到消息體中，而且提供了四種數據的編碼方式。

FORM表單的 enctype 屬性規定在發送到服務器以前應該如何對錶單數據進行編碼。
默認地，表單數據會編碼爲 "application/x-www-form-urlencoded"。就是說，在發送到服務器以前，全部字符都會進行編碼（空格轉換爲 "+" 加號，特殊符號轉換爲 ASCII HEX 值）。

四種enctype屬性值

值	描述
application/x-www-form-urlencoded	在發送前編碼全部字符（默認）
multipart/form-data	不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
application/json
text/plain	空格轉換爲 "+" 加號，但不對特殊字符編碼。

下面就正式開始介紹它們。

1.application/x-www-form-urlencoded
這應該是最多見的 POST 提交數據的方式了。瀏覽器的原生 <form> 表單，若是不設置
enctype
屬性，那麼最終就會以 application/x-www-form-urlencoded 方式提交數據。

<form action="form_action.asp" enctype="text/plain">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

此時Form提交的請求數據，抓包時看到的請求會是這樣的內容（無關的請求頭在本文中都省略掉了）：

POST

h

ttp://www.example.com

HTTP/1.1

Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

首先，Content-Type 被指定爲 application/x-www-form-urlencoded；

其次，提交的數據按照 key1=val1&key2=val2 的方式進行編碼，key 和 val 都進行了 URL 轉碼。
大部分服務端語言都對這種方式有很好的支持。例如 PHP 中，$_POST['title'] 能夠獲取到 title 的值，$_POST['sub'] 能夠獲得 sub 數組。

不少時候，咱們用 Ajax 提交數據時，也是使用這種方式。
例如 JQuery 和 QWrap 的 Ajax，Content-Type 默認值都是「application/x-www-form-urlencoded;charset=utf-8」。

2.multipart/form-data
這又是一個常見的 POST 數據提交的方式。咱們使用表單上傳文件時，必須讓 <form> 表單的enctype 等於 multipart/form-data。直接來看一個請求示例：

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA ------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"

title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

這個例子稍微複雜點。首先生成了一個 boundary 用於分割不一樣的字段，爲了不與正文內容重複，boundary 很長很複雜。而後 Content-Type 裏指明瞭數據是以 multipart/form-data 來編碼，本次請求的 boundary 是什麼內容。消息主體裏按照字段個數又分爲多個結構相似的部分，每部分都是以

--boundary

開始，緊接着是內容描述信息，而後是回車，最後是字段具體內容（文本或二進制）。若是傳輸的是文件，還要包含文件名和文件類型信息。消息主體最後以

--boundary--

標示結束。
關於 multipart/form-data 的詳細定義，請前往 rfc1867 查看。

這種方式通常用來上傳文件，各大服務端語言對它也有着良好的支持。

上面提到的這兩種 POST 數據的方式，都是瀏覽器原生支持的，並且現階段標準中原生 <form> 表單也只支持這兩種方式（經過 <form> 元素的

enctype

屬性指定，默認爲

application/x-www-form-urlencoded

。其實

enctype

還支持

text/plain

，不過用得很是少）。

隨着愈來愈多的 Web 站點，尤爲是 WebApp，所有使用 Ajax 進行數據交互以後，咱們徹底能夠定義新的數據提交方式，給開發帶來更多便利。

3.application/json
application/json 這個 Content-Type 做爲響應頭你們確定不陌生。實際上，如今愈來愈多的人把它做爲請求頭，用來告訴服務端消息主體是序列化後的 JSON 字符串。因爲 JSON 規範的流行，除了低版本 IE 以外的各大瀏覽器都原生支持 JSON.stringify，服務端語言也都有處理 JSON 的函數，使用 JSON 不會趕上什麼麻煩。

JSON 格式支持比鍵值對複雜得多的結構化數據，

Google 的 AngularJS 中的 Ajax 功能，默認就是提交 JSON 字符串。例以下面這段代碼：

JSvar data = {'title':'test', 'sub' : [1,2,3]};
$http.post(url, data).success(function(result) {
    ...
});

最終發送的請求是：

POST http://www.example.com HTTP/1.1
Content-Type: application/json;charset=utf-8
{"title":"test","sub":[1,2,3]}

這種方案，能夠方便的提交複雜的結構化數據，特別適合 RESTful 的接口。各大抓包工具如 Chrome 自帶的開發者工具、Firebug、Fiddler，都會以樹形結構展現 JSON 數據，很是友好。但也有些服務端語言尚未支持這種方式，例如 php 就沒法經過 $_POST 對象從上面的請求中得到內容。這時候，須要本身動手處理下：在請求頭中 Content-Type 爲 application/json 時，從

php://input

裏得到原始輸入流，再

json_decode

成對象。一些 php 框架已經開始這麼作了。

固然 AngularJS 也能夠配置爲使用 x-www-form-urlencoded 方式提交數據。

4.text/xml
典型的 XML-RPC 請求是這樣的：

POST http://www.example.com HTTP/1.1
Content-Type: text/xml <?xml version="1.0"?>
<methodCall>
    <methodName>examples.getStateName</methodName>
    <params>
        <param>
            <value><i4>41</i4></value>
        </param>
    </params>
</methodCall>