前端系统班 - 06. HTTP 入门

课程 01：

WWW 的历史

• 1989 年，万维网（World Wide Web）诞生。
• 1990 年，蒂姆·伯纳斯-李（Tim Berners-Lee）发明了用网址访问网页的办法，他发明了第一个网页、第一个浏览器和第一个服务器。
• 想了解更多可以去维基百科……

WWW 的发明

主要包含 3 个概念：

1. URI（Uniform Resource Identifier，统一资源标识符）；
2. HTTP（HyperText Transfer Protocol，超级文本传输协议）；
3. HTML（HyperText Markup Language，超文本标记语言）。

URI 是什么

URI 分为：

• URL（Uniform Resource Locator，统一资源定位符），我们一般使用 URL 作为网址；
• URN（Uniform Resource Name，统一资源名称），例如书籍的 ISBN 号码。

通过 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 地址以及与该域名服务器的连接情况。

请求与响应

• 浏览器负责发起请求；
• 服务器在 80 端口接收请求；
• 服务器负责返回内容（响应）；
• 浏览器负责下载响应内容。

在这过程中，HTTP 指导浏览器和服务器如何进行沟通。

请求示例

在命令行中，使用 curl 命令可以访问一个域名。例如：
curl -s -v -H "xxx" -- "https://www.baidu.com"
响应数据如下：

   
 
 
 
 
 
  
 
       
 
 
 
 新闻 hao123 地图 视频 贴吧   更多产品 
 
 
 
 
 
 关于百度 About Baidu 
 
©2017 Baidu 使用百度前必读  意见反馈 京ICP证030173号   
 
 
 
  
* 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

其中红色大于号开头的行，便是请求的内容；而后面的小于号开头的行则是返回内容。

GET 与 POST

改用 POST 请求，curl -X POST -s -v -H "xxx" -- "https://www.baidu.com"，返回“页面不存在”页面……

两者的区别可以从字面意思理解，GET 就是获取数据，POST 就是提交数据。

请求的格式

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 要上传的数据

1. 请求最多包含四部分，最少包含三部分（第四部分可以为空）。
2. 第三部分永远都是一个回车 \n，主要是用来区分第二部分和第四部分内容的。
3. 动词有 GET（获取）、POST（新增或上传）、PUT（整体更新）、PATCH（局部更新）、DELETE（删除）、HEAD、OPTIONS等。
4. 请求中的路径包括“查询参数”，但不包括“锚点”；因为“锚点”不是由服务器识别，而是由浏览器识别的。
5. 如果没有写路径，那么路径默认为 /，代表根目录。
6. 第二部分中的 Content-Type 标注了第四部分的格式。

响应

• GET 请求和 POST 请求对应的响应内容可能一样，也可能不一样。
• 响应的第四部分可以很长。

响应的格式

1 协议/版本 状态码 状态解释
2 key1: value1 // 例如：Content-Length: 17931
  key2: value2 // 例如：Content-Type: text/html
  ...
3
4 要下载的内容

• 状态码要背，是服务器对浏览器说的话：
  • 1xx，不常用；
  • 2xx，表示成功；
  • 3xx，表示滚吧；
  • 4xx，表示你丫错了；
  • 5xx，表示好吧，我错了。
• 状态解释没什么卵用。
• 第二部分的 Content-Type 标注了第四部分的格式，它遵循 MIME 规范。

如果要在 Chrome 里看请求或相应的代码时，记得点击 view source 选项……这老师念了 N 遍……