前端教程分享：HTTP請求Content-Type你知道是做什麼的嗎？

      細心的同學肯定都在網頁的頭部發現過一個Content-Type標籤，你只知道是用來做HTTP請求的但你並不知道它究竟都能幹什麼，下面小千就來帶你瞭解一下Content-Type。

      1、概念

      Content-Type表示內容型別和字元編碼。內容型別也叫做MIME型別。是Internet Media Type，網際網路媒體型別。在網際網路上傳輸的資料有不同的資料型別，HTTP在傳輸資料物件時會為他們打上稱為MIME的資料格式標籤，用於區分資料型別。

      請求頭中的content-type，就是 B端發給S端的資料型別描述 。即告訴伺服器端，我給你傳的資料是某種型別的，伺服器端針對不同型別的資料，做法當時是不相同的。就像，我們平時面對，人，豬，狗等不同型別的動物做法不同。見到狗，你得“汪汪汪”，見到人，你得說”您好“。

      響應頭中的content-type，就是 S端發給B端的資料型別描述 。即告訴瀏覽器端，我給你發的是什麼樣格式的資料，那麼瀏覽器端針對不同型別的資料，處理方法不同。

      2、語法格式

      不管是出現在請求頭還是響應頭裡，都是鍵值對的方式。

      content-type: 值，如：Content-Type: text/html; charset=utf-8。

      解釋：如果在響應頭裡，有Content-Type: text/html; charset=utf-8。表示，我伺服器端給你客戶端響應的內容是html格式的內容，字符集是utf-8。

      3、請求頭中常見的content-type

      請求頭中的content-type在chrome瀏覽器的network裡能夠看到。

      1）application/x-www-form-urlencoded

      在使用表單提交時，請求方式是post時，form標籤的屬性entry=”application/x-www-form-urlencoded“（這也是預設值），請求頭中的content-type的值就是 application/x-www-form-urlencoded。同時，瀏覽器會自動把處於form標籤裡的表單元素的內容組織成鍵值對的方式（key1=val1&key2=val2）。其中，鍵 就是每個表單元素的name屬性的值；值就是表單元素的value屬性的值。鍵和值都進行了URL的轉碼。並放到請求實體裡面。（注意如果是中文或特殊字元如"/"、","、“:" 等會自動進行URL轉碼）。程式碼示例如下：

      如果使用ajax傳送post請求，需要用 setRequestHeader();設定content-type。程式碼如下：

      XMLHttpRequest物件.setRequestHeader("Content-type","application/x-www-form-urlencoded");

      2）multipart/form-data

      這個一般使用在檔案上傳時。表單提交方式，請求方式是post，form標籤的屬性 entry="multipart/form-data",請求頭中的content-type的值是： multipart/form-data; boundary=----WebKitFormBoundarybi5XUwMxC7yc9s5a。既可以上傳檔案等二進位制資料，也可以上傳表單鍵值對，只是最後會轉化為一條資訊。

      示例程式碼：

      3）application/json

      這種格式（json格式）是目前在前後端分離開發場景中使用最多的的。前後端的資料互動使用json格式進行，可閱讀性好，簡介，方便。

      這種格式一般用在傳送ajax請求時，要麼明確設定了 content-type 是application/json。要麼，有的第三方庫預設是application/json。如下示例程式碼：

      XMLHttpRequest物件.setRequestHeader("Content-type","application/json");

      4）text/xml

      這種格式（XML格式）是比較早的格式。現在用的比較少了，因為XML格式的資料被json的資料大，複雜。所以，基本上被淘汰了。

      4、響應頭中的常見的content-type

      響應頭中的content-type在chrome瀏覽器的network裡能夠看到。

      可以透過後端的響應物件進行設定，如php中的設定：

      header("content-type:text/html;charset=utf-8");

      5、前後端互動時，常用的content-type

      application/json。

      不管是前端給後端傳送資料，還是後端給前端傳送資料，最常用的型別就是application/json。

      以上就是Content-Type的介紹了，希望能幫到大家。