【HTML】POST的Content-Type引发的HTTP相关知识思考

关于Content-Type

Content-Type是实体头域(或称为实体头部,entity header)用于向接收方指示实体(entity body)的介质类型的,或称为资源的MIME类型,现在通常称media type更为合适。(例如,指定HEAD方法送到接收方的实体介质类型,或GET方法发送的请求介质类型,表示后面的文档属于什么MIME类型。)

在响应中,Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME嗅探,并不一定遵循此标题的值; 为了防止这种行为,可以将标题 X-Content-Type-Options 设置为 nosniff。

在请求中(如POST 或 PUT),客户端告诉服务器实际发送的数据类型

语法

Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something[1 to 70 characters]

  • media-type 资源或数据的 media type
  • charset 字符编码标准
  • boundary 对于多部分(multipart)实体,boundary是必需的,它用于封装消息的多个部分的边界,其由1到70个字符组成,浏览器自动生成,该字符集对于通过网关鲁棒性良好,不以空白结尾
例子

content-type 在HTML表单中

在通过HTML form提交生成的POST请求中,请求头的Content-Type由元素上的enctype属性指定:

<form action="/" method="post" enctype="multipart/form-data">
  <input type="text" name="description" value="some text">
  <input type="file" name="myFile">
  <button type="submit">Submit</button>
</form>

请求头看起来像这样(在这里省略了一些 headers):

在这里插入图片描述

POST常见数据提交类型

HTTP中,提交数据的方式,最常用的就是 GET 和 POST

  • GET方式,是把参数按键值对通过QueryString的方式放在URL尾部,比如:http://www.example.com/test.html?a=1&b=2
  • POST方法,通常是把要提交的表单放在一个Form中,指明action后就可以提交数据(这里是粗略的) 👇详解

提交数据时需要通过表单enctype属性(规定在发送到服务器之前应该如何对表单数据进行编码)根据content type进行编码。并且,如果是GET,用”?”连接,编码方式为“application/x-www-form-urlencoded”;如果是POST则根据enctype属性确定content type,默认也为”application/x-www-form-urlencoded”。

在这里插入图片描述

application/x-www-form-urlencoded

最常见的 POST 提交数据的方式,原生Form表单,如果不设置 enctype 属性,默认为application/x-www-form-urlencoded方式提交数据。请求类似于下面这样(无关的请求头域已略去):

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

name=test&val1=1&val2=%E6%B5%8B%E8%AF%95&val3%5B%5D=2
  • 首先,Content-Type被指定为application/x-www-form-urlencoded;其次,提交的表单数据会转换为键值对并按照key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL转码。大部分服务端语言都对这种方式有很好的支持
  • 另外,如利用AJAX 提交数据时,也可使用这种方式。例如 jQuery,Content-Type默认值都是”application/x-www-form-urlencoded;charset=utf-8”
multipart/form-data

另一个常见的 POST 数据提交的方式, Form 表单的 enctype 设置为multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符(这就是boundary的作用)分开,类似我们上面Content-Type中的例子

由于这种方式将数据有很多部分,它既可以上传键值对,也可以上传文件,甚至多个文件。当上传的字段是文件时,会有Content-Type来说明文件类型;Content-disposition,用来说明字段的一些信息。每部分都是以 –boundary 开始,紧接着是内容描述信息,然后是回车,最后是字段具体内容(字段、文本或二进制等)。如果传输的是文件,还要包含文件名和文件类型信息。消息主体最后以 –boundary– 标示结束

在这里插入图片描述

application/json

Content-Type: application/json 作为响应头比较常见。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串,其中一个好处就是JSON 格式支持比键值对复杂得多的结构化数据。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持JSON.stringify,服务端语言也都有处理 JSON 的函数,使用起来没有困难

Google 的 AngularJS 中的 Ajax 功能,默认就是提交 JSON 字符串。例如下面这段代码:

var 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]}
text/xml

XML的作用不言而喻,用于传输和存储数据,它非常适合万维网传输,提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据,在JSON出现之前是业界一大标准(当然现在也是),相比JSON的优缺点大家有兴趣可以上网search。因此,在POST提交数据时,xml类型也是不可缺少的一种,虽然一般场景上使用JSON可能更轻巧、灵活

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值