Http POST 提交数据的四种方式解析 - 简书
Http POST 提交数据的四种方式解析
我们知道，HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。HTTP 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。
协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。但是，数据发送出去，还要服务端解析成功才有意义。
服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。
POST 提交数据方案，包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。
在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)：
xmlHttpRequest.png
application/x-www-form-urlencoded （默认常用的）
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 &form& 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。
Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。例如 PHP 中，$_POST['title'] 可以获取到 title 的值，$_POST['sub'] 可以得到 sub 数组。
x-www-form-urlencoded.png
multipart/form-data
这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 &form& 表单的 enctyped 等于 multipart/form-data。直接来看一个请求示例：
提示 input type=file 浏览器处于安全考虑 ，
必须操作赋值，不能直接改value,比如canvas 直接生成图片之后上传 就不能使用 input type=file。可以直接把得到的图片转换成 base64 上传
multipart/form-data.png
boundary 文件分割线
application/json
application/json
这种方案，可以方便的提交复杂的结构化数据， 这个 Content-Type 作为响应头大家肯定不陌生。现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。
由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。
JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用 AngularJS 中的 Ajax 功能，默认就是提交 JSON 字符串。例如下面这段代码：
var data = {'title':'test', 'sub' : [1,2,3]};
$http.post(url, data).success(function(result) {
最终发送的请求是：
Content-Type: application/charset=utf-8
{"title":"test","sub":[1,2,3]}
application/json.png
JSON.parse()和JSON.stringify()
现在几乎不用
默认情况下，标准的跨域请求是不会发送cookie等用户认证凭据的，XMLHttpRequest 2的一个重要改进就是提供了对授信请求访问的支持。
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api');
xhr.withCredentials =
xhr.onload = onLoadH
xhr.send();
Access-Control-Allow-Credentials: true
Access-Control-Allow-Credentials.png
前端开发/iOS 开发/Node开发工程师
https://github...3953人阅读
根据网上资料整理, 出处不详。
一 GET 与 POST 区别和联系
很多地方这样写他们的区别:
1.GET使用URL或Cookie传参。而POST将数据放在BODY中。
2.GET的URL会有长度上的限制，则POST的数据则可以非常大。
3.POST比GET安全，因为数据在地址栏上不可见。
但是很不幸，这些区别全是错误的，更不幸的是，这个答案还是Google搜索的头版头条，然而我根本没想着这些是答案，因为在我看来他们都是错的。我来一一解释一下。
GET和POST是由HTTP协议定义的。在HTTP协议中，Method和Data（URL， Body， Header）是正交的两个概念，也就是说，使用哪个Method与应用层的数据如何传输是没有相互关系的。HTTP没有要求，如果Method是POST数据就要放在BODY中。也没有要求，如果Method是GET，数据（参数）就一定要放在URL中而不能放在BODY中。
那么，网上流传甚广的这个说法是从何而来的呢？我在HTML标准中，找到了相似的描述。这和网上流传的说法一致。但是这只是HTML标准对HTTP协议的用法的约定。怎么能当成GET和POST的区别呢？
而且，现代的Web Server都是支持GET中包含BODY这样的请求。虽然这种请求不可能从浏览器发出，但是现在的Web Server又不是只给浏览器用，已经完全地超出了HTML服务器的范畴了。
二 HTTP的GET和POST格式解析
HTTP报文是面向文本的，报文中的每一个字段都是一些ASCII码串，各个字段的长度是不确定的。HTTP有两类报文：请求报文和响应报文。
一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分组成，下图给出了请求报文的一般格式。
（1）请求行
请求行由请求方法字段、URL字段和HTTP协议版本字段3个字段组成，它们用空格分隔。例如，GET /index.html HTTP/1.1。
HTTP协议的请求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、 TRACE、CONNECT。这里介绍最常用的GET方法和POST方法。
GET：当客户端要从服务器中读取文档时，使用GET方法。GET方法 要求服务器将URL定位的资源放在响应报文的数据部分，回送给客户端。使用GET方法时，请求参数和对应的值附加在URL后面，利用一个问号（“?”）代 表URL的结尾与请求参数的开始，传递参数长度受限制。例如，/index.jsp?id=100&op=bind。
POST：当客户端 给服务器提供信息较多时可以使用POST方法。POST方法将请求参数封装在HTTP请求数据中，以名称/值的形式出现，可以传输大量数据，可用来传送文 件。
（2）请求头部
请求头部由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。请求头部通知服务器有关于客户端请求的信 息，典型的请求头有：
User-Agent：产生请求的浏览器类型。
Accept：客户端可识别的内容类型列表。
Host：请求 的主机名，允许多个域名同处一个IP地址，即虚拟主机。
最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不 再有请求头。
对于一个完整的http请求来说空行是必须的，否则服务器会认为本次请求的数据尚未完全发送到服务器，处于等待状态。
（4） 请求数据
请求数据不在GET方法中使用，而是在POST方法中使用。POST方法适用于需要客户填写表单的场合。与请求数据相关的最常使用的请求 头是Content-Type和Content-Length。
(5)请求示例
POST报文头如下：
POST /sn/index.php HTTP/1.1
Accept: **
Accept-Language: zh-cn
host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 12
Connection:close
GET请求报文例子
一个URL为&/toupiaoceshi.asp?name=朱云翔&的GET请求报文例子如下：
GET /toupiaoceshi.asp?name=朱云翔 HTTP/1.1
Accept: **&及其后的语句是&实体头信息&。
注意：在语句&Connection：Keep-Alive&下的空行是必须的。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1034412次
积分：9426
积分：9426
排名：第1510名
原创：229篇
转载：60篇
评论：328条
原创的博文，转载必须在明显位置注明出处和相关链接。交流可在文章评论或发邮件至:pony_
阅读：2604
文章：28篇
阅读：43821
文章：25篇
阅读：241835
文章：39篇
阅读：159539
文章：10篇
阅读：141941
(1)(7)(2)(5)(7)(8)(14)(8)(1)(2)(1)(3)(1)(3)(1)(4)(2)(3)(6)(15)(21)(1)(3)(6)(4)(11)(12)(9)(14)(5)(1)(1)(3)(3)(1)(1)(1)(2)(3)(2)(3)(4)(2)(1)(1)(2)(3)(2)(5)(1)(2)(3)(2)(3)(2)(7)(6)(46)}