1、概念

　　Content-Type表示內(nèi)容類型和字符編碼。內(nèi)容類型也叫做MIME類型。是Internet Media Type，互聯(lián)網(wǎng)媒體類型。在互聯(lián)網(wǎng)上傳輸?shù)臄?shù)據(jù)有不同的數(shù)據(jù)類型，HTTP在傳輸數(shù)據(jù)對象時會為他們打上稱為MIME的數(shù)據(jù)格式標(biāo)簽，用于區(qū)分數(shù)據(jù)類型。

　　請求頭中的content-type，就是 B端發(fā)給S端的數(shù)據(jù)類型描述 。即告訴服務(wù)器端，我給你傳的數(shù)據(jù)是某種類型的，服務(wù)器端針對不同類型的數(shù)據(jù)，做法當(dāng)時是不相同的。就像，我們平時面對，人，豬，狗等不同類型的動物做法不同。見到狗，你得“汪汪汪”，見到人，你得說”您好“。

　　響應(yīng)頭中的content-type，就是 S端發(fā)給B端的數(shù)據(jù)類型描述 。即告訴瀏覽器端，我給你發(fā)的是什么樣格式的數(shù)據(jù)，那么瀏覽器端針對不同類型的數(shù)據(jù)，處理方法不同。

　　2、語法格式：

　　不管是出現(xiàn)在請求頭還是響應(yīng)頭里，都是鍵值對的方式。

　　content-type: 值

　　如：Content-Type: text/html; charset=utf-8。

　　解釋：如果在響應(yīng)頭里，有Content-Type: text/html; charset=utf-8。表示，我服務(wù)器端給你客戶端響應(yīng)的內(nèi)容是html格式的內(nèi)容，字符集是utf-8。

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

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

　　1)、application/x-www-form-urlencoded

　　在使用表單提交時，請求方式是post時，form標(biāo)簽的屬性entry=”application/x-www-form-urlencoded“(這也是默認值)，請求頭中的content-type的值就是 application/x-www-form-urlencoded。同時，瀏覽器會自動把處于form標(biāo)簽里的表單元素的內(nèi)容組織成鍵值對的方式(key1=val1&key2=val2)。其中，鍵 就是每個表單元素的name屬性的值;值就是表單元素的value屬性的值。鍵和值都進行了URL的轉(zhuǎn)碼。并放到請求實體里面。(注意如果是中文或特殊字符如"/"、","、“:" 等會自動進行URL轉(zhuǎn)碼)。代碼示例如下：

  <form method="POST" action="regSave.php" >

        用戶名：<input type="text" name="username" /><br/>

        密  碼：<input type="password" name="userpass" /><br/>

        重復(fù)密碼：<input type="password"  /><br/>

        <input type="submit" value="注冊" />

    </form>   

　　如果使用ajax發(fā)送post請求，需要用 setRequestHeader();設(shè)置content-type。代碼如下：

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

　　2)、multipart/form-data

　　這個一般使用在文件上傳時。表單提交方式，請求方式是post，form標(biāo)簽的屬性 entry="multipart/form-data",請求頭中的content-type的值是： multipart/form-data; boundary=----WebKitFormBoundarybi5XUwMxC7yc9s5a。既可以上傳文件等二進制數(shù)據(jù)，也可以上傳表單鍵值對，只是最后會轉(zhuǎn)化為一條信息。

   <form action="/upload" enctype="multipart/form-data" method="post">

        <input type=file  name="fieldname" />

        <input type="submit" value="上傳">

    </form>

　　3)、application/json

　　這種格式(json格式)是目前在前后端分離開發(fā)場景中使用最多的的。前后端的數(shù)據(jù)交互使用json格式進行，可閱讀性好，簡介，方便。

　　這種格式一般用在發(fā)送ajax請求時，要么明確設(shè)置了 content-type 是application/json。要么，有的第三方庫默認是application/json。如下示例代碼：

　　XMLHttpRequest對象.setRequestHeader("Content-type","application/json");

　　4)、text/xml

　　這種格式(XML格式)是比較早的格式。現(xiàn)在用的比較少了，因為XML格式的數(shù)據(jù)被json的數(shù)據(jù)大，復(fù)雜。所以，基本上被淘汰了。

　　4、響應(yīng)頭中的常見的content-type

　　響應(yīng)頭中的content-type在chrome瀏覽器的network里能夠看到。

　　可以通過后端的響應(yīng)對象進行設(shè)置，如php中的設(shè)置：

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

　　1)、text/html ： HTML格式

　　2)、text/plain ：純文本格式

　　3)、application/json：json格式

　　4)、text/xml ： XML格式

　　5)、image/gif ：gif圖片格式

　　6)、image/jpeg ：jpg圖片格式

　　7)、image/png：png圖片格式

　　8)、application/pdf：pdf格式

　　9)、application/msword ： Word文檔格式

　　10)、application/octet-stream ： 二進制流數(shù)據(jù)(如常見的文件下載)

　　5、前后端交互時，常用的content-type

　　application/json。

　　不管是前端給后端發(fā)送數(shù)據(jù)，還是后端給前端發(fā)送數(shù)據(jù)，最常用的類型就是application/json。

　　更多關(guān)于“前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。