Java充电社
专辑
博文
联系我
本人继续续收门徒,亲手指导
Http中的Content-Type详解
相关专辑:
SpringMVC教程
<div style="display:none"></div> ## 目录 [TOC] ## 1. 前言 现在搞前端的不学好http有关的知识已经不行啦~笔者也是后知后觉,在搞node的时候意识到网络方面的薄弱,开始学起http相关知识。这一篇是非常基础的讲解,适合入门人员掌握content-type的知识和有经验的人员查阅。可以说,弄懂了content-type,你才能在学习http的道路上走的更加顺畅,让我们满怀激情的开始吧~~ ## 2. Http请求头中的content-type ### 2.1 认识content-type 要学习content-type,必须事先知道它到底是什么,是干什么用的。 HTTP协议(RFC2616)采用了请求/响应模型。客户端向服务器发送一个请求,请求头包含请求的方法、URI、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应,相应的内容包括消息协议的版本,成功或者错误编码加上包含服务器信息、实体元信息以 及可能的实体内容。 通常HTTP消息由一个起始行,一个或者多个头域,一个只是头域结束的空行和可选的消息体组成。 HTTP的头域包括通用头,请求头,响应头和实体头四个部分。每个头域由一个域名,冒号(:)和域值三部分组成。域名是大小写无关的,域值前可以添加任何数量的空格符,头域可以被扩展为多行,在每行开始处,使用至少一个空格或制表符。 请求消息和响应消息都可以包含实体信息,实体信息一般由实体头域和实体组成。实体头域包含关于实体的原信息,实体头包括Allow、Content- Base、Content-Encoding、Content-Language、 Content-Length、Content-Location、Content-MD5、Content-Range、Content-Type、 Etag、Expires、Last-Modified、extension-header。 Content-Type是返回消息中非常重要的内容,表示后面的文档属于什么MIME类型。Content-Type: [type]/[subtype]; parameter。例如最常见的就是text/html,它的意思是说返回的内容是文本类型,这个文本又是HTML格式的。原则上浏览器会根据Content-Type来决定如何显示返回的消息体内容。 ### 2.2 Content-type与Accept (1)Accept属于请求头, Content-Type属于实体头。 Http报头分为通用报头,请求报头,响应报头和实体报头。 请求方的http报头结构:通用报头|请求报头|实体报头 响应方的http报头结构:通用报头|响应报头|实体报头 (2)Accept代表发送端(客户端)希望接受的数据类型。 比如:Accept:text/xml; 代表客户端希望接受的数据类型是xml类型 Content-Type代表发送端(客户端|服务器)发送的实体数据的数据类型。 比如:Content-Type:text/html; 代表发送端发送的数据格式是html。 二者合起来 Accept:text/xml Content-Type:text/html 即代表希望接受的数据类型是xml格式,本次请求发送的数据的数据格式是html。 ### 2.3 content-type速查 更全面的请访问:`https://www.runoob.com/http/http-content-type.html` 常见的媒体格式类型如下: ```http text/html : HTML格式 text/plain :纯文本格式 text/xml : XML格式 image/gif :gif图片格式 image/jpeg :jpg图片格式 image/png:png图片格式 ``` 以application开头的媒体格式类型: ```http application/xhtml+xml :XHTML格式 application/xml : XML数据格式 application/atom+xml :Atom XML聚合格式 application/json : JSON数据格式 application/pdf :pdf格式 application/msword : Word文档格式 application/octet-stream : 二进制流数据(如常见的文件下载) application/x-www-form-urlencoded : <form encType=””>中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式) ``` 以audio开头的常见媒体格式文件: ```http audio/x-wav : wav文件 audio/x-ms-wma : wma 文件 audio/mp3 : mp3文件 ``` 以video开头的常见媒体格式文件: ```http video/x-ms-wmv : wmv文件 video/mpeg4 : mp4文件 video/avi : avi文件 ``` 另外一种常见的媒体格式是上传文件之时使用的: ```http multipart/form-data : 需要在表单中进行文件上传时,就需要使用该格式 ``` ### 2.4 常见的content-type讲解 #### (1)application/x-www-form-urlencoded 这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样(无关的请求头在本文中都省略掉了): ```http POST http://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 转码。**大部分服务端语言都对这种方式有很好的支持。 很多时候,我们用 Ajax 提交数据时,也是使用这种方式。例如 JQuery 和 QWrap 的 Ajax,Content-Type 默认值都是「application/x-www-form-urlencoded;charset=utf-8」。 #### (2)multipart/form-data 这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 form 的 enctyped 等于这个值。 客户端form标签: ```html <form action="url" enctype="multipart/form-data" method="post"></form> ``` 直接来看一个生成的请求示例: ```http 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 里指明了数据是以 mutipart/form-data 来编码,本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分,每部分都是以 –boundary 开始,紧接着内容描述信息,然后是回车,最后是字段具体内容(文本或二进制)。如果传输的是文件,还要包含文件名和文件类型信息。消息主体最后以 –boundary– 标示结束。关于 mutipart/form-data 的详细定义,请前往 rfc1867 查看。 这种方式一般用来上传文件,各大服务端语言对它也有着良好的支持。 上面提到的这两种 POST 数据的方式,都是浏览器原生支持的,而且现阶段原生 form 表单也只支持这两种方式。但是随着越来越多的 Web 站点,尤其是 WebApp,全部使用 Ajax 进行数据交互之后,我们完全可以定义新的数据提交方式,给开发带来更多便利。 #### (3)application/json application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。 JSON 格式支持比键值对复杂得多的结构化数据,这一点也很有用。记得我几年前做一个项目时,需要提交的数据层次非常深,我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val,仍然放在键值对里,以 x-www-form-urlencoded 方式提交。 Google 的 AngularJS 中的 Ajax 功能,默认就是提交 JSON 字符串。例如下面这段代码: ```javascript var data = {'title':'test', 'sub' : [1,2,3]}; $http.post(url, data).success(function(result) { ... }); ``` 最终发送的请求是: ```http 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 框架已经开始这么做了。 #### (4)text/xml 它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范。典型的 XML-RPC 请求是这样的: ```http 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> ``` XML-RPC 协议简单、功能够用,各种语言的实现都有。它的使用也很广泛,如 WordPress 的 XML-RPC Api,搜索引擎的 ping 服务等等。JavaScript 中,也有现成的库支持以这种方式进行数据交互,能很好的支持已有的 XML-RPC 服务。不过,我个人觉得 XML 结构还是过于臃肿,一般场景用 JSON 会更灵活方便。 ## 3. HTTP响应头中的content-type Content-Type(内容类型),一般是指网页中存在的 Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件,这就是经常看到一些 PHP 网页点击的结果却是下载一个文件或一张图片的原因。 Content-Type 标头告诉客户端实际返回的内容的内容类型。 语法格式: ```http Content-Type: text/html; charset=utf-8 Content-Type: multipart/form-data; boundary=something ``` 实例: ![](https://itsoku.oss-cn-hangzhou.aliyuncs.com/itsoku/blog/article/199/4127af1f-e001-44d0-b5ea-b13e3482d969.jpg) 常见的媒体格式类型如下: - text/html : HTML格式 - text/plain :纯文本格式 - text/xml : XML格式 - image/gif :gif图片格式 - image/jpeg :jpg图片格式 - image/png:png图片格式 以application开头的媒体格式类型: - application/xhtml+xml :XHTML格式 - application/xml: XML数据格式 - application/atom+xml :Atom XML聚合格式 - application/json: JSON数据格式 - application/pdf:pdf格式 - application/msword : Word文档格式 - application/octet-stream : 二进制流数据(如常见的文件下载) - application/x-www-form-urlencoded : <form encType=””>中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式) 另外一种常见的媒体格式是上传文件之时使用的: - multipart/form-data : 需要在表单中进行文件上传时,就需要使用该格式 ## 4. HTTP content-type 对照表 | 文件扩展名 | Content-Type(Mime-Type) | 文件扩展名 | Content-Type(Mime-Type) | | :---------------------------------- | :-------------------------------------- | :--------- | :---------------------------------- | | .*( 二进制流,不知道下载文件类型) | application/octet-stream | .tif | image/tiff | | .001 | application/x-001 | .301 | application/x-301 | | .323 | text/h323 | .906 | application/x-906 | | .907 | drawing/907 | .a11 | application/x-a11 | | .acp | audio/x-mei-aac | .ai | application/postscript | | .aif | audio/aiff | .aifc | audio/aiff | | .aiff | audio/aiff | .anv | application/x-anv | | .asa | text/asa | .asf | video/x-ms-asf | | .asp | text/asp | .asx | video/x-ms-asf | | .au | audio/basic | .avi | video/avi | | .awf | application/vnd.adobe.workflow | .biz | text/xml | | .bmp | application/x-bmp | .bot | application/x-bot | | .c4t | application/x-c4t | .c90 | application/x-c90 | | .cal | application/x-cals | .cat | application/vnd.ms-pki.seccat | | .cdf | application/x-netcdf | .cdr | application/x-cdr | | .cel | application/x-cel | .cer | application/x-x509-ca-cert | | .cg4 | application/x-g4 | .cgm | application/x-cgm | | .cit | application/x-cit | .class | java/* | | .cml | text/xml | .cmp | application/x-cmp | | .cmx | application/x-cmx | .cot | application/x-cot | | .crl | application/pkix-crl | .crt | application/x-x509-ca-cert | | .csi | application/x-csi | .css | text/css | | .cut | application/x-cut | .dbf | application/x-dbf | | .dbm | application/x-dbm | .dbx | application/x-dbx | | .dcd | text/xml | .dcx | application/x-dcx | | .der | application/x-x509-ca-cert | .dgn | application/x-dgn | | .dib | application/x-dib | .dll | application/x-msdownload | | .doc | application/msword | .dot | application/msword | | .drw | application/x-drw | .dtd | text/xml | | .dwf | Model/vnd.dwf | .dwf | application/x-dwf | | .dwg | application/x-dwg | .dxb | application/x-dxb | | .dxf | application/x-dxf | .edn | application/vnd.adobe.edn | | .emf | application/x-emf | .eml | message/rfc822 | | .ent | text/xml | .epi | application/x-epi | | .eps | application/x-ps | .eps | application/postscript | | .etd | application/x-ebx | .exe | application/x-msdownload | | .fax | image/fax | .fdf | application/vnd.fdf | | .fif | application/fractals | .fo | text/xml | | .frm | application/x-frm | .g4 | application/x-g4 | | .gbr | application/x-gbr | . | application/x- | | .gif | image/gif | .gl2 | application/x-gl2 | | .gp4 | application/x-gp4 | .hgl | application/x-hgl | | .hmr | application/x-hmr | .hpg | application/x-hpgl | | .hpl | application/x-hpl | .hqx | application/mac-binhex40 | | .hrf | application/x-hrf | .hta | application/hta | | .htc | text/x-component | .htm | text/html | | .html | text/html | .htt | text/webviewhtml | | .htx | text/html | .icb | application/x-icb | | .ico | image/x-icon | .ico | application/x-ico | | .iff | application/x-iff | .ig4 | application/x-g4 | | .igs | application/x-igs | .iii | application/x-iphone | | .img | application/x-img | .ins | application/x-internet-signup | | .isp | application/x-internet-signup | .IVF | video/x-ivf | | .java | java/* | .jfif | image/jpeg | | .jpe | image/jpeg | .jpe | application/x-jpe | | .jpeg | image/jpeg | .jpg | image/jpeg | | .jpg | application/x-jpg | .js | application/x-javascript | | .jsp | text/html | .la1 | audio/x-liquid-file | | .lar | application/x-laplayer-reg | .latex | application/x-latex | | .lavs | audio/x-liquid-secure | .lbm | application/x-lbm | | .lmsff | audio/x-la-lms | .ls | application/x-javascript | | .ltr | application/x-ltr | .m1v | video/x-mpeg | | .m2v | video/x-mpeg | .m3u | audio/mpegurl | | .m4e | video/mpeg4 | .mac | application/x-mac | | .man | application/x-troff-man | .math | text/xml | | .mdb | application/msaccess | .mdb | application/x-mdb | | .mfp | application/x-shockwave-flash | .mht | message/rfc822 | | .mhtml | message/rfc822 | .mi | application/x-mi | | .mid | audio/mid | .midi | audio/mid | | .mil | application/x-mil | .mml | text/xml | | .mnd | audio/x-musicnet-download | .mns | audio/x-musicnet-stream | | .mocha | application/x-javascript | .movie | video/x-sgi-movie | | .mp1 | audio/mp1 | .mp2 | audio/mp2 | | .mp2v | video/mpeg | .mp3 | audio/mp3 | | .mp4 | video/mpeg4 | .mpa | video/x-mpg | | .mpd | application/vnd.ms-project | .mpe | video/x-mpeg | | .mpeg | video/mpg | .mpg | video/mpg | | .mpga | audio/rn-mpeg | .mpp | application/vnd.ms-project | | .mps | video/x-mpeg | .mpt | application/vnd.ms-project | | .mpv | video/mpg | .mpv2 | video/mpeg | | .mpw | application/vnd.ms-project | .mpx | application/vnd.ms-project | | .mtx | text/xml | .mxp | application/x-mmxp | | .net | image/pnetvue | .nrf | application/x-nrf | | .nws | message/rfc822 | .odc | text/x-ms-odc | | .out | application/x-out | .p10 | application/pkcs10 | | .p12 | application/x-pkcs12 | .p7b | application/x-pkcs7-certificates | | .p7c | application/pkcs7-mime | .p7m | application/pkcs7-mime | | .p7r | application/x-pkcs7-certreqresp | .p7s | application/pkcs7-signature | | .pc5 | application/x-pc5 | .pci | application/x-pci | | .pcl | application/x-pcl | .pcx | application/x-pcx | | .pdf | application/pdf | .pdf | application/pdf | | .pdx | application/vnd.adobe.pdx | .pfx | application/x-pkcs12 | | .pgl | application/x-pgl | .pic | application/x-pic | | .pko | application/vnd.ms-pki.pko | .pl | application/x-perl | | .plg | text/html | .pls | audio/scpls | | .plt | application/x-plt | .png | image/png | | .png | application/x-png | .pot | application/vnd.ms-powerpoint | | .ppa | application/vnd.ms-powerpoint | .ppm | application/x-ppm | | .pps | application/vnd.ms-powerpoint | .ppt | application/vnd.ms-powerpoint | | .ppt | application/x-ppt | .pr | application/x-pr | | .prf | application/pics-rules | .prn | application/x-prn | | .prt | application/x-prt | .ps | application/x-ps | | .ps | application/postscript | .ptn | application/x-ptn | | .pwz | application/vnd.ms-powerpoint | .r3t | text/vnd.rn-realtext3d | | .ra | audio/vnd.rn-realaudio | .ram | audio/x-pn-realaudio | | .ras | application/x-ras | .rat | application/rat-file | | .rdf | text/xml | .rec | application/vnd.rn-recording | | .red | application/x-red | .rgb | application/x-rgb | | .rjs | application/vnd.rn-realsystem-rjs | .rjt | application/vnd.rn-realsystem-rjt | | .rlc | application/x-rlc | .rle | application/x-rle | | .rm | application/vnd.rn-realmedia | .rmf | application/vnd.adobe.rmf | | .rmi | audio/mid | .rmj | application/vnd.rn-realsystem-rmj | | .rmm | audio/x-pn-realaudio | .rmp | application/vnd.rn-rn_music_package | | .rms | application/vnd.rn-realmedia-secure | .rmvb | application/vnd.rn-realmedia-vbr | | .rmx | application/vnd.rn-realsystem-rmx | .rnx | application/vnd.rn-realplayer | | .rp | image/vnd.rn-realpix | .rpm | audio/x-pn-realaudio-plugin | | .rsml | application/vnd.rn-rsml | .rt | text/vnd.rn-realtext | | .rtf | application/msword | .rtf | application/x-rtf | | .rv | video/vnd.rn-realvideo | .sam | application/x-sam | | .sat | application/x-sat | .sdp | application/sdp | | .sdw | application/x-sdw | .sit | application/x-stuffit | | .slb | application/x-slb | .sld | application/x-sld | | .slk | drawing/x-slk | .smi | application/smil | | .smil | application/smil | .smk | application/x-smk | | .snd | audio/basic | .sol | text/plain | | .sor | text/plain | .spc | application/x-pkcs7-certificates | | .spl | application/futuresplash | .spp | text/xml | | .ssm | application/streamingmedia | .sst | application/vnd.ms-pki.certstore | | .stl | application/vnd.ms-pki.stl | .stm | text/html | | .sty | application/x-sty | .svg | text/xml | | .swf | application/x-shockwave-flash | .tdf | application/x-tdf | | .tg4 | application/x-tg4 | .tga | application/x-tga | | .tif | image/tiff | .tif | application/x-tif | | .tiff | image/tiff | .tld | text/xml | | .top | drawing/x-top | .torrent | application/x-bittorrent | | .tsd | text/xml | .txt | text/plain | | .uin | application/x-icq | .uls | text/iuls | | .vcf | text/x-vcard | .vda | application/x-vda | | .vdx | application/vnd.visio | .vml | text/xml | | .vpg | application/x-vpeg005 | .vsd | application/vnd.visio | | .vsd | application/x-vsd | .vss | application/vnd.visio | | .vst | application/vnd.visio | .vst | application/x-vst | | .vsw | application/vnd.visio | .vsx | application/vnd.visio | | .vtx | application/vnd.visio | .vxml | text/xml | | .wav | audio/wav | .wax | audio/x-ms-wax | | .wb1 | application/x-wb1 | .wb2 | application/x-wb2 | | .wb3 | application/x-wb3 | .wbmp | image/vnd.wap.wbmp | | .wiz | application/msword | .wk3 | application/x-wk3 | | .wk4 | application/x-wk4 | .wkq | application/x-wkq | | .wks | application/x-wks | .wm | video/x-ms-wm | | .wma | audio/x-ms-wma | .wmd | application/x-ms-wmd | | .wmf | application/x-wmf | .wml | text/vnd.wap.wml | | .wmv | video/x-ms-wmv | .wmx | video/x-ms-wmx | | .wmz | application/x-ms-wmz | .wp6 | application/x-wp6 | | .wpd | application/x-wpd | .wpg | application/x-wpg | | .wpl | application/vnd.ms-wpl | .wq1 | application/x-wq1 | | .wr1 | application/x-wr1 | .wri | application/x-wri | | .wrk | application/x-wrk | .ws | application/x-ws | | .ws2 | application/x-ws | .wsc | text/scriptlet | | .wsdl | text/xml | .wvx | video/x-ms-wvx | | .xdp | application/vnd.adobe.xdp | .xdr | text/xml | | .xfd | application/vnd.adobe.xfd | .xfdf | application/vnd.adobe.xfdf | | .xhtml | text/html | .xls | application/vnd.ms-excel | | .xls | application/x-xls | .xlw | application/x-xlw | | .xml | text/xml | .xpl | audio/scpls | | .xq | text/xml | .xql | text/xml | | .xquery | text/xml | .xsd | text/xml | | .xsl | text/xml | .xslt | text/xml | | .xwd | application/x-xwd | .x_b | application/x-x_b | | .sis | application/vnd.symbian.install | .sisx | application/vnd.symbian.install | | .x_t | application/x-x_t | .ipa | application/vnd.iphone | | .apk | application/vnd.android.package-archive | .xap | application/x-silverlight-app | <a style="display:none" target="_blank" href="https://mp.weixin.qq.com/s/_S1DD2JADnXvpexxaBwLLg" style="color:red; font-size:20px; font-weight:bold">继续收门徒,亲手带,月薪 4W 以下的可以来找我</a> ## 最新资料 1. <a href="https://mp.weixin.qq.com/s?__biz=MzkzOTI3Nzc0Mg==&mid=2247484964&idx=2&sn=c81bce2f26015ee0f9632ddc6c67df03&scene=21#wechat_redirect" target="_blank">尚硅谷 Java 学科全套教程(总 207.77GB)</a> 2. <a href="https://mp.weixin.qq.com/s?__biz=MzkwOTAyMTY2NA==&mid=2247484192&idx=1&sn=505f2faaa4cc911f553850667749bcbb&scene=21#wechat_redirect" target="_blank">2021 最新版 Java 微服务学习线路图 + 视频</a> 3. <a href="https://mp.weixin.qq.com/s?__biz=MzkwOTAyMTY2NA==&mid=2247484573&idx=1&sn=7f3d83892186c16c57bc0b99f03f1ffd&scene=21#wechat_redirect" target="_blank">阿里技术大佬整理的《Spring 学习笔记.pdf》</a> 4. <a href="https://mp.weixin.qq.com/s?__biz=MzkwOTAyMTY2NA==&mid=2247484544&idx=2&sn=c1dfe907cfaa5b9ae8e66fc247ccbe84&scene=21#wechat_redirect" target="_blank">阿里大佬的《MySQL 学习笔记高清.pdf》</a> 5. <a href="https://mp.weixin.qq.com/s?__biz=MzkwOTAyMTY2NA==&mid=2247485167&idx=1&sn=48d75c8e93e748235a3547f34921dfb7&scene=21#wechat_redirect" target="_blank">2021 版 java 高并发常见面试题汇总.pdf</a> 6. <a href="https://mp.weixin.qq.com/s?__biz=MzkwOTAyMTY2NA==&mid=2247485664&idx=1&sn=435f9f515a8f881642820d7790ad20ce&scene=21#wechat_redirect" target="_blank">Idea 快捷键大全.pdf</a> ![](https://itsoku.oss-cn-hangzhou.aliyuncs.com/itsoku/blog/article/1/2883e86e-3eff-404a-8943-0066e5e2b454.png)
相关专辑:
SpringMVC教程