詳解http之post

標籤：page   color   art   ror   images   example   檔案   沒有   request   

詳解http之post

　　首先，我們先看看jquery中的post方法的使用：

 $.ajax({          url:‘api/bbg/goods/get_goods_list_wechat‘,          data:{            ‘data‘: JSON.stringify({"offset": 0,                       "pageSize": 25                    })                  },             beforeSend: function(request) {            request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");          },           type:‘post‘,            dataType:‘json‘,            success:function(data){                  console.log(data);          },          error: function (error) {            console.log(err);          },          complete: function () {                      }        });

•  url指定訪問的介面。
• data表示post索引值對。 
• beforeSend裡我們可以佈建要求頭。
• type表示請求的方法。
• dataType表示希望獲得的資料形式。
• success表示成功後調用的函數。
• error表示失敗後調用的函數。
• complete表示請求完成後的函數。

 

　 下面主要介紹post提交資料的方式。

　 我們知道post請求包括狀態行、要求標頭、請求主體。 如下：

<method> <request-URL> <version> --- 狀態行<headers> --- 要求標頭<entity-body> --- 請求主體

 

　　協議規定， post的資料即ajax中的data必須在請求主體中，但是協議並沒有規定你請求主體中的資料格式，所以，這時我們就有自己的空間規定請求主體中的資料格式了。 

　　但是，雖然你發送的格式是各種各樣的，但還是要根據伺服器端對你的資料的要求來確定，否則伺服器端是無法正確解析的。 

　　並且伺服器端是根據要求標頭中的Content-Type欄位獲知請求主體中的資料是何種方式編碼。然後根據格式再對其進行解析。

 

First --- application/x-www-form-urlencoded

　　這是最常見的提交post資料的方式，如果在form表單中我們沒有設定enctype屬性，那麼表單最終就會以這種方式來提交資料了。請求類似於下面這樣。

POST http://www.example.com HTTP/1.1Content-Type: application/x-www-form-urlencoded;charset=utf-8title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

　　即在請求主體中的資料都是key1=value1&key2=value2&key3=value3的形式進行編碼的， key1就對應於表單中的name屬性的值，value1就對應於表單中的value中的值，這樣的方式是最為普遍的方式。 

　　大多數伺服器端的語言對此都有很好的支援。並且，我們使用jquery、zepto時，預設的content-type的值也是 x-www-form-urlencoded 的編碼方式。

　　之所以說是urlencoded，是因為瀏覽器會對其中的key和value都使用encodeURI的方法進行編碼。 form即為form表單。  

舉例： 我們登入github，然後找到相應的請求，可以看到請求中的Form Data如下：

 

這預設就是使用 x-www-form-urlencoded 的方式進行編碼資料的，這為什麼和上面講述的不一樣呢？ 因為這裡是parse過得，方便開發人員查看，如果我們希望查看像之前所講的那樣的資料，可以點擊view source，如下所示：

那麼 view URL encoded是什麼呢? 即對所有的特殊符號進行編碼，類似於對整個URL使用 encodeURI 的方式進行編碼是一樣的，如下所示：

 

 

 

 

Second  ---  multipart/form-data

　　這也是一種非常常見的形式，比如當一個form表單中含有檔案需要上傳時，我們就需要將form的enctype的值設定為 multipart/form-data 這樣才能成功上傳檔案。 下面是一個例子：

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA------WebKitFormBoundaryrGKCBY7qhFd3TrwAContent-Disposition: form-data; name="text"title------WebKitFormBoundaryrGKCBY7qhFd3TrwAContent-Disposition: form-data; name="file"; filename="chrome.png"Content-Type: image/pngPNG ... content of chrome.png ...------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

　　這個例子中， 首先產生了 boundary 用於分割不同的欄位，為了避免和本文內容重複，所以boundry很長很複雜。 且開頭就指明了 Content-Type 是用multipart/form-data進行編碼的。 

　　訊息主題按照欄位的個數又分為了多個結構類似的部分。 每一部分都是用--boundry 開始，緊接著就是內容描述資訊，接著就是描述欄位的具體內容（或者是文本或者是二進位）。 如果包含的是檔案，還要包含檔案名稱和檔案類型資訊。

　　訊息主體最後是用 --boundry--表示結束。

　　這種方式用來上傳檔案，各大伺服器端語言對之都有很好的支援。 

 

舉例： 在知乎中上傳圖片時，使用的方式就是 multipart/form-data。

然後我們還可以看到請求主體中的內容：

可以看到在要求標頭中先設定了boundary（即分界線的意思）， 然後再在請求主體中使用， 最後以 ------。。。--- 作為結束。

 

 

 

Third --- application/json

 　　現在越來越多的人將 Content-Type 的值用 application 作為回應標頭， 這用來告訴伺服器---訊息主體是序列化之後的JSON字串。 

　　 由於JSON規範的流行，除了低版本IE之外的各大瀏覽器都原生的支援JSON.stringify, 伺服器端語言也都有處理JSON的函數， 使用JSON之後是不會遇到什麼麻煩的。

　　 好處： JSON格式支援比索引值對複雜得多的結構化資料， 這一點很有用。

　　 

舉例：在知乎中同樣可以看到這樣的使用方式。

 

其JSON內容為：

 

 

 

 

Fourth --- text/xml

　　使用這種傳輸方式的具體例子如下：

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

　　即其主體為XML格式的。

　　這種方式使用簡單，但是比較臃腫，一般還是JSON用起來更為方便。

 

 

 

 

 

　　

 

 

　　

　　

 

詳解http之post