HTTP略解

2018-09-28 本文已影响37人酒极子

HTTP(Hypertext Transfer Protocol )的中文名称是超文本传输协议。

它是客户端浏览器或其他程序(Client)与Web服务器（Server）之间的应用层通信协议。

客户机想要获得访问的信息，就必须按照HTTP协议规定的格式发出请求才能获得服务器正确的响应。

那么接下来我就用CURL命令模拟一下HTTP的Get和Post请求，帮助大家更直观的理解HTTP是什么吧。

首先是用curl命令模拟GET请求指令：

curl -s -v -H "xxx" -- "https://www.baidu.com"

这条指令的字符分别对应的意思是：

-s：silent 不要显示进度条
-v：verbose 要显示请求和响应
-H：header 添加响应头（可以不加）

这条指令的意思是我们对百度官网发起了一个get请求，于是我们获得了百度服务器的一个响应：

* Rebuilt URL to: https://www.baidu.com/
* Uses proxy env variable no_proxy == 'localhost,127.0.0.0/8,::1'
* Uses proxy env variable https_proxy == 'http://127.0.0.1:42363/'
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to 127.0.0.1 (127.0.0.1) port 42363 (#0)
* allocate connect buffer!
* Establish HTTP proxy tunnel to www.baidu.com:443
> CONNECT www.baidu.com:443 HTTP/1.1
> Host: www.baidu.com:443
> User-Agent: curl/7.61.1
> Proxy-Connection: Keep-Alive
> 
< HTTP/1.1 200 OK
< Date: Friday, 28-Sep-18 08:47:59 CST
< Keep-Alive: timeout=38
< Content-Length: 0
* Ignoring Content-Length in CONNECT 200 response
< 
* Proxy replied 200 to CONNECT request
* CONNECT phase completed!
* ALPN, offering h2
* ALPN, offering http/1.1
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/certs/ca-certificates.crt
  CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* CONNECT phase completed!
* CONNECT phase completed!
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES128-GCM-SHA256
* ALPN, server accepted to use http/1.1
* Server certificate:
*  subject: C=CN; ST=beijing; L=beijing; OU=service operation department; O=Beijing Baidu Netcom Science Technology Co., Ltd; CN=baidu.com
*  start date: Apr  3 03:26:03 2018 GMT
*  expire date: May 26 05:31:02 2019 GMT
*  subjectAltName: host "www.baidu.com" matched cert's "*.baidu.com"
*  issuer: C=BE; O=GlobalSign nv-sa; CN=GlobalSign Organization Validation CA - SHA256 - G2
*  SSL certificate verify ok.
> GET / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.61.1
> Accept: */*
> jiujizi:xxx
> 
< HTTP/1.1 200 OK
< Accept-Ranges: bytes
< Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
< Connection: Keep-Alive
< Content-Length: 2443
< Content-Type: text/html
< Date: Fri, 28 Sep 2018 00:48:00 GMT
< Etag: "5886041d-98b"
< Last-Modified: Mon, 23 Jan 2017 13:24:45 GMT
< Pragma: no-cache
< Server: bfe/1.0.8.18
< Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/
< 
<!DOCTYPE html>
<!--STATUS OK--><html> <head><meta http-equiv=content-type content=text/html;charset=utf-8><meta http-equiv=X-UA-Compatible content=IE=Edge><meta content=always name=referrer><link rel=stylesheet type=text/css href=https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/bdorz/baidu.min.css><title>百度一下，你就知道</title></head> <body link=#0000cc> <div id=wrapper> <div id=head> <div class=head_wrapper> <div class=s_form> <div class=s_form_wrapper> <div id=lg> <img hidefocus=true src=//www.baidu.com/img/bd_logo1.png width=270 height=129> </div> <form id=form name=f action=//www.baidu.com/s class=fm> <input type=hidden name=bdorz_come value=1> <input type=hidden name=ie value=utf-8> <input type=hidden name=f value=8> <input type=hidden name=rsv_bp value=1> <input type=hidden name=rsv_idx value=1> <input type=hidden name=tn value=baidu><span class="bg s_ipt_wr"><input id=kw name=wd class=s_ipt value maxlength=255 autocomplete=off autofocus=autofocus></span><span class="bg s_btn_wr"><input type=submit id=su value=百度一下 class="bg s_btn" autofocus></span> </form> </div> </div> <div id=u1> <a href=http://news.baidu.com name=tj_trnews class=mnav>新闻</a> <a href=https://www.hao123.com name=tj_trhao123 class=mnav>hao123</a> <a href=http://map.baidu.com name=tj_trmap class=mnav>地图</a> <a href=http://v.baidu.com name=tj_trvideo class=mnav>视频</a> <a href=http://tieba.baidu.com name=tj_trtieba class=mnav>贴吧</a> <noscript> <a href=http://www.baidu.com/bdorz/login.gif?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2f%3fbdorz_come%3d1 name=tj_login class=lb>登录</a> </noscript> <script>document.write('<a href="http://www.baidu.com/bdorz/login.gif?login&tpl=mn&u='+ encodeURIComponent(window.location.href+ (window.location.search === "" ? "?" : "&")+ "bdorz_come=1")+ '" name="tj_login" class="lb">登录</a>');
                </script> <a href=//www.baidu.com/more/ name=tj_briicon class=bri style="display: block;">更多产品</a> </div> </div> </div> <div id=ftCon> <div id=ftConw> <p id=lh> <a href=http://home.baidu.com>关于百度</a> <a href=http://ir.baidu.com>About Baidu</a> </p> <p id=cp>&copy;2017&nbsp;Baidu&nbsp;<a href=http://www.baidu.com/duty/>使用百度前必读</a>&nbsp; <a href=http://jianyi.baidu.com/ class=cp-feedback>意见反馈</a>&nbsp;京ICP证030173号&nbsp; <img src=//www.baidu.com/img/gs.gif> </p> </div> </div> </div> </body> </html>
* Connection #0 to host 127.0.0.1 left intact

其中开头字符的意思分别是
" * "：注释
" > "：请求内容
" < "：得到的响应

我们来重点看一下请求内容：

> GET / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.61.1
> Accept: */*
> jiujizi:xxx
>

第一行的意思是：获取根目录，使用的是HTTP协议（版本1.1）
第二行：域名解析网址为www.baidu.com
第三行：使用curl发起的请求（版本7.61.1）
第四行：我接受返回给我的任何内容
第五行：并没有意义，可以不加
第六行：上下文分隔行

ps:其实还有一个上传指令POST，但因为时间关系我就不讲了

经过提炼，我们发现

我们发出的请求的格式基本是这样的：

1 动词 路径 协议/版本
2 Key1: value1 [关键词1：值1]
2 Key2: value2 [关键词2：值2]
2 Key3: value3 [关键词3：值3]
2 Content-Type: application/x-www-form-urlencoded
2 Host: www.baidu.com  
2 User-Agent: curl/7.54.0 
3 
4 要上传的数据 [像POST，PUT，PATCH等动词都是有这部分的]

这里有几个注意点：

请求最多包含四部分，最少包含三部分。（也就是说第四部分可以为空）
第三部分永远都是一个回车（\n）
动词有 GET POST PUT PATCH DELETE HEAD OPTIONS 等
这里的路径包括「查询参数」，但不包括「锚点」
如果你没有写路径，那么路径默认为 /
第 2 部分中的 Content-Type 标注了第 4 部分的格式

接下来看一下响应的内容：

< HTTP/1.1 200 OK
< Accept-Ranges: bytes
< Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
< Connection: Keep-Alive
< Content-Length: 2443
< Content-Type: text/html
< Date: Fri, 28 Sep 2018 00:48:00 GMT
< Etag: "5886041d-98b"
< Last-Modified: Mon, 23 Jan 2017 13:24:45 GMT
< Pragma: no-cache
< Server: bfe/1.0.8.18
< Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/
< 
<!DOCTYPE html>
<!--STATUS OK--><html> <head><meta http-equiv=content-type content=text/html;charset=utf-8><meta http-equiv=X-UA-Compatible content=IE=Edge><meta content=always name=referrer><link rel=stylesheet type=text/css href=https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/bdorz/baidu.min.css><title>百度一下，你就知道</title></head> <body link=#0000cc> <div id=wrapper> <div id=head> <div class=head_wrapper> <div class=s_form> <div class=s_form_wrapper> <div id=lg> <img hidefocus=true src=//www.baidu.com/img/bd_logo1.png width=270 height=129> </div> <form id=form name=f action=//www.baidu.com/s class=fm> <input type=hidden name=bdorz_come value=1> <input type=hidden name=ie value=utf-8> <input type=hidden name=f value=8> <input type=hidden name=rsv_bp value=1> <input type=hidden name=rsv_idx value=1> <input type=hidden name=tn value=baidu><span class="bg s_ipt_wr"><input id=kw name=wd class=s_ipt value maxlength=255 autocomplete=off autofocus=autofocus></span><span class="bg s_btn_wr"><input type=submit id=su value=百度一下 class="bg s_btn" autofocus></span> </form> </div> </div> <div id=u1> <a href=http://news.baidu.com name=tj_trnews class=mnav>新闻</a> <a href=https://www.hao123.com name=tj_trhao123 class=mnav>hao123</a> <a href=http://map.baidu.com name=tj_trmap class=mnav>地图</a> <a href=http://v.baidu.com name=tj_trvideo class=mnav>视频</a> <a href=http://tieba.baidu.com name=tj_trtieba class=mnav>贴吧</a> <noscript> <a href=http://www.baidu.com/bdorz/login.gif?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2f%3fbdorz_come%3d1 name=tj_login class=lb>登录</a> </noscript> <script>document.write('<a href="http://www.baidu.com/bdorz/login.gif?login&tpl=mn&u='+ encodeURIComponent(window.location.href+ (window.location.search === "" ? "?" : "&")+ "bdorz_come=1")+ '" name="tj_login" class="lb">登录</a>');
                </script> <a href=//www.baidu.com/more/ name=tj_briicon class=bri style="display: block;">更多产品</a> </div> </div> </div> <div id=ftCon> <div id=ftConw> <p id=lh> <a href=http://home.baidu.com>关于百度</a> <a href=http://ir.baidu.com>About Baidu</a> </p> <p id=cp>&copy;2017&nbsp;Baidu&nbsp;<a href=http://www.baidu.com/duty/>使用百度前必读</a>&nbsp; <a href=http://jianyi.baidu.com/ class=cp-feedback>意见反馈</a>&nbsp;京ICP证030173号&nbsp; <img src=//www.baidu.com/img/gs.gif> </p> </div> </div> </div> </body> </html>
* Connection #0 to host 127.0.0.1 left intact

其实这部分理解起来不难，我就简单介绍几个吧：

Content-Length: 2443 ：页面数据的长度是2443字节
Content-Type: text/html ：文件格式是html文本
Server: bfe/1.0.8.18 ：百度的前端服务器，是百度自己写的

因为没什么重要的要素，我就直接写这部分的格式吧。

响应的格式就基本是这样的：

1  协议/版本号  状态码  状态解释
2  Key1 : value1 [关键词1：值1]
2  Key2 : value2 [关键词2：值2]
2  Content-Length  : 2443
2  Content-Type  :text/html
3
4  要下载的内容

这里也有几个注意点：

请求最多包含四部分
第三部分永远都是一个回车（\n）
状态码有1xx,2xx,3xx,4xx,5xx等
第 2 部分中的 Content-Type 标注了第 4 部分的格式
第 2 部分中的 Content-Type 遵循 MIME 规范

状态码是很重要的，意思是表达服务器对浏览器说的话

这里我们简单介绍一下状态码：

1xx ：消息，可以上维基百科（wikipedia）看一下意思
2xx ：成功，例如：200普通成功，204创建成功
3xx ：重定向，例如：301地址永久搬走，302临时不存在
4xx ：客户端错误，例如：404请求失败，403服务器拒绝
5xx ：服务器错误，例如：505服务器不支持，等等

HTTP响应也是包含四个部分的，其中第四部分可以很长很长，状态解释没什么用。

除了使用curl外，我们也可以使用浏览器的开发者工具来查看HTTP的请求和响应内容，最后我讲一下用Chrome开发者工具的方法：

用Chrome查看HTTP的请求和响应内容：

按F12或在设置里打开开发者工具
点击 Network
在地址栏输入网址，例：www.baidu.com
选择Name列的第一个文件（www.baidu.com），点击它
点击Header列表
其中Response Headers是响应头的意思，Resquesst Headers是请求头的意思
分别点击[view source]按钮就可以分别看到，响应内容的前三部分和请求内容的前三部分了
如果有请求的第四部分，那么在 FormData 或 Payload 里面可以看到
查看 Response 或者 Preview，你会看到响应的第 4 部分