WWW 历史
WWW 包含概念
主要包含 3 个概念：
URI（Uniform Resource Identifier，统一资源标识符）。
HTTP（HyperText Transfer Protocol，超级文本传输协议）。
HTML（HyperText Markup Language，超文本标记语言）。
认识 URI
URI 分为：
通过 URL 可以确定一个“唯一的”地址（网址），例如：
https://www.baidu.com/s?wd=hello&rsv_spt=1#5
这就是一个 URL 地址，其中：https:// 表示协议；www.baidu.com 表示域名；/s 表示路径；wd=hello&rsv_spt=1 是查询参数；最后 #5 是锚点。
DNS 是什么
DNS（Domain Name System，域名系统），它的作用简单来讲就是：输入域名，输出 IP（Internet Protocol，互联网协议）。
在命令行中，使用 nslookup 命令可以查看域名对应的 IP 地址；使用 ping 命令可以知道域名对应的 IP 地址以及与该域名服务器的连接情况。
HTTP 入门
HTTP 翻译过来是超文本传输协议，可以简单理解为：对客户端和服务端之间数据传输的格式规范。
请求与响应
浏览器与服务器之间数据传输的过程大概是这样的：
浏览器负责发起请求；
服务器在 80 端口接收请求；
服务器负责返回内容（响应）；
浏览器负责下载响应内容。
在这过程中，HTTP 指导浏览器和服务器如何进行沟通。
请求示例
在 Git Bash 中，使用 curl 命令可以访问一个域名。例如：
curl -s -v -H "xxx" -- "https://www.baidu.com"
确认后会打印出响应内容，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!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=http://s1.bdstatic.com/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></span><span class="bg s_btn_wr"><input type=submit id=su value=百度一下 class="bg s_btn"></span> </form> </div> </div> <div id=u1> <a href=http://news.baidu.com name=tj_trnews class=mnav>新闻</a> <a href=http://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&tpl=mn&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>©2017 Baidu <a href=http://www.baidu.com/duty/>使用百度前必读</a> <a href=http://jianyi.baidu.com/ class=cp-feedback>意见反馈</a> 京ICP证030173号 <img src=//www.baidu.com/img/gs.gif> </p> </div> </div> </div> </body> </html>
* STATE: INIT => CONNECT handle 0x48ef160; line 1404 (connection #-5000)
* Rebuilt URL to: http://www.baidu.com/
* Added connection 0. The cache now contains 1 members
* STATE: CONNECT => WAITRESOLVE handle 0x48ef160; line 1440 (connection #0)
* Trying 61.135.169.125...
* TCP_NODELAY set
* STATE: WAITRESOLVE => WAITCONNECT handle 0x48ef160; line 1521 (connection #0)
* Connected to www.baidu.com (61.135.169.125) port 80 (#0)
* STATE: WAITCONNECT => SENDPROTOCONNECT handle 0x48ef160; line 1573 (connection #0)
* Marked for [keep alive]: HTTP default
* STATE: SENDPROTOCONNECT => DO handle 0x48ef160; line 1591 (connection #0)
> GET / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.59.0
> Accept: */*
>
* STATE: DO => DO_DONE handle 0x48ef160; line 1670 (connection #0)
* STATE: DO_DONE => WAITPERFORM handle 0x48ef160; line 1795 (connection #0)
* STATE: WAITPERFORM => PERFORM handle 0x48ef160; line 1811 (connection #0)
* HTTP 1.1 or later with persistent connection, pipelining supported
< HTTP/1.1 200 OK
* Server bfe/1.0.8.18 is not blacklisted
< Server: bfe/1.0.8.18
< Date: Mon, 07 May 2018 08:02:59 GMT
< Content-Type: text/html
< Content-Length: 2381
< Last-Modified: Mon, 23 Jan 2017 13:27:32 GMT
< Connection: Keep-Alive
< ETag: "588604c4-94d"
< Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
< Pragma: no-cache
< Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/
< Accept-Ranges: bytes
<
{ [2381 bytes data]
* STATE: PERFORM => DONE handle 0x48ef160; line 1980 (connection #0)
* multi_done
* Connection #0 to host www.baidu.com left intact
* Expire cleared
|
可以看到开头为大于号的内容行为发送的请求内容；而开头为小于号的内容行则是返回内容；开头的 HTML 格式内容则是下载的响应内容；其余以星号开头的都是注释。
GET 与 POST
改用 POST 请求，curl -X POST -s -v -H "xxx" -- "https://www.baidu.com"，返回“页面不存在”页面……
两者的区别可以从字面意思理解，“GET”就是获取数据，“POST”就是提交数据。
请求的格式
请求内容是有固定格式的：
1
2
3
4
5
6
7
| 1 动词 路径 协议/版本
2 key1: value1 // 例如：Content-Type: application/x-www-form-urlencoded
key2: value2 // 例如：Host: www.baidu.com
key3: value3 // 例如：User-Agent: curl/7.54.0
...
3
4 要上传的数据
|
请求最多包含四部分，最少包含三部分（第四部分可以为空）。
第三部分永远都是一个回车 \n，主要是用来区分第二部分和第四部分内容的。
动词有 GET（获取）、POST（新增或上传）、PUT（整体更新）、PATCH（局部更新）、DELETE（删除）、HEAD、OPTIONS等。
请求中的路径包括“查询参数”，但不包括“锚点”；因为“锚点”不是由服务器识别，而是由浏览器识别的。
如果没有写路径，那么路径默认为 /，代表根目录。
第二部分中的“Content-Type”标注了第四部分的格式。
响应的格式
1
2
3
4
5
6
| 1 协议/版本 状态码 状态解释
2 key1: value1 // 例如：Content-Length: 17931
key2: value2 // 例如：Content-Type: text/html
...
3
4 要下载的内容
|
使用 Chrome 查看请求数据与响应数据
打开浏览器后，再按 F12 打开 Dev Tools（开发者工具）；
打开“Network”选项卡；
打开一个网页，网页打开后，“Network”内容下会出现很多请求列表；
点击你想查看的请求列表项的“Name”项，右侧便会显示该项的 Header 信息；
Header 信息里的“Request Header”，就是请求数据；而“Response Header”则是响应数据；
要想看到请求数据与响应数据的源码，请展开响应数据后，点击“view source”，不然一辈子也看不到哦！这老师念了 N 遍……