详解http之post
详解http之post
首先,我们先看看jquery中的post方法的使用:
$.ajax({ url:'api/bbg/goods/get_goods_list_wechat', data:{ 'data': JSON.stringify({"offset": 0, "pageSize": 25 }) }, beforeSend: function(request) { request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6"); }, type:'post', dataType:'json', success:function(data){ console.log(data); }, error: function (error) { console.log(err); }, complete: function () { } });
- url指定访问的接口。
- data表示post键值对。
- beforeSend里我们可以设置请求头。
- type表示请求的方法。
- dataType表示希望获得的数据形式。
- success表示成功后调用的函数。
- error表示失败后调用的函数。
- complete表示请求完成后的函数。
下面主要介绍post提交数据的方式。
我们知道post请求包括状态行、请求头、请求主体。 如下:
<method> <request-URL> <version> --- 状态行 <headers> --- 请求头 <entity-body> --- 请求主体
协议规定, post的数据即ajax中的data必须在请求主体中,但是协议并没有规定你请求主体中的数据格式,所以,这时我们就有自己的空间规定请求主体中的数据格式了。
但是,虽然你发送的格式是各种各样的,但还是要根据服务器端对你的数据的要求来确定,否则服务器端是无法正确解析的。
并且服务器端是根据请求头中的Content-Type字段获知请求主体中的数据是何种方式编码。然后根据格式再对其进行解析。
First --- application/x-www-form-urlencoded
这是最常见的提交post数据的方式,如果在form表单中我们没有设置enctype属性,那么表单最终就会以这种方式来提交数据了。请求类似于下面这样。
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
即在请求主体中的数据都是key1=value1&key2=value2&key3=value3的形式进行编码的, key1就对应于表单中的name属性的值,value1就对应于表单中的value中的值,这样的方式是最为普遍的方式。
大多数服务器端的语言对此都有很好的支持。并且,我们使用jquery、zepto时,默认的content-type的值也是 x-www-form-urlencoded 的编码方式。
之所以说是urlencoded,是因为浏览器会对其中的key和value都使用encodeURIComponent的方法进行编码。 form即为form表单。
举例: 我们登录github,然后找到相应的请求,可以看到请求中的Form Data如下:
这默认就是使用 x-www-form-urlencoded 的方式进行编码数据的,这为什么和上面讲述的不一样呢? 因为这里是parse过得,方便开发者查看,如果我们希望查看像之前所讲的那样的数据,可以点击view source,如下所示:
那么 view URL encoded是什么呢? 即对所有的特殊符号进行编码,类似于对整个URL使用 encodeURI 的方式进行编码是一样的,如下所示:
Second --- multipart/form-data
这也是一种非常常见的形式,比如当一个form表单中含有文件需要上传时,我们就需要将form的enctype的值设置为 multipart/form-data 这样才能成功上传文件。 下面是一个例子:
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 用于分割不同的字段,为了避免和正文内容重复,所以boundry很长很复杂。 且开头就指明了 Content-Type 是用multipart/form-data进行编码的。
消息主题按照字段的个数又分为了多个结构类似的部分。 每一部分都是用--boundry 开始,紧接着就是内容描述信息,接着就是描述字段的具体内容(或者是文本或者是二进制)。 如果包含的是文件,还要包含文件名和文件类型信息。
消息主体最后是用 --boundry--表示结束。
这种方式用来上传文件,各大服务器端语言对之都有很好的支持。
举例: 在知乎中上传图片时,使用的方式就是 multipart/form-data。
然后我们还可以看到请求主体中的内容:
可以看到在请求头中先设置了boundary(即分界线的意思), 然后再在请求主体中使用, 最后以 ------。。。--- 作为结束。
Third --- application/json
现在越来越多的人将 Content-Type 的值用 application 作为响应头, 这用来告诉服务器---消息主体是序列化之后的JSON字符串。
由于JSON规范的流行,除了低版本IE之外的各大浏览器都原生的支持JSON.stringify, 服务器端语言也都有处理JSON的函数, 使用JSON之后是不会遇到什么麻烦的。
好处: JSON格式支持比键值对复杂得多的结构化数据, 这一点很有用。
举例:在知乎中同样可以看到这样的使用方式。
其JSON内容为:
Fourth --- text/xml
使用这种传输方式的具体例子如下:
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> </params> </methodcall>
即其主体为XML格式的。
这种方式使用简单,但是比较臃肿,一般还是JSON用起来更为方便。