URL及HTTP协议详解

文章目录

1 URL
2 HTTP 协议
3 HTTP 报文
4 HTTP 协议通信

1 URL

统一资源定位符，(Uniform Resoure Locator) 通俗理解就是网络资源地址，通过 URL 能够找到对应的资源数据。

URL 地址：https://www.baidu.com/10/E178J2O489FH.html?page=1&count=10

<协议部分 + 域名 + 资源路径 + 查询参数>

协议部分: https://、http://、ftp://
域名：IP 地址的别名，它是用点进行分割使用英文字母和数字组成的名字，使用域名目的就是方便的记住某台主机 IP 地址。
参数说明：? 后面的 page 表示第一个参数，后面的参数都使用 & 进行连接

2 HTTP 协议

HTTP 协议的全称是 (HyperText Transfer Protocol)，超文本传输协议。
超文本是指在文本数据的基础上还包括非文本数据，非文本数据有图片、音乐、视频等，而这些非文本数据会使用链接的方式进行加载显示，通俗来说超文本就是带有链接的文本数据也就是我们常说的网页数据。

HTTP 协议的制作者是蒂姆・伯纳斯 - 李，1991 年设计出来的，HTTP 协议设计之前目的是传输网页数据的，现在允许传输任意类型的数据。
传输 HTTP 协议格式的数据是基于 TCP 传输协议的，发送数据之前需要先建立连接。
TCP 传输协议是用来保证网络中传输的数据的安全性的，HTTP 协议是用来规定这些数据的具体格式的。
HTTP 协议规定的数据格式是浏览器和 Web 服务器通信数据的格式，也就是说浏览器和 Web 服务器通信需要使用 HTTP 协议。

3 HTTP 报文

HTTP 请求报文

GET 方式的请求报文：获取 Web 服务器数据

---- 请求行 ----
GET /a/b/c HTTP/1.1  # GET请求方式 请求资源路径 HTTP协议版本
---- 请求头 -----
Host: www.itcast.cn  # 服务器的主机地址和端口号,默认是80
Connection: keep-alive # 和服务端保持长连接
Upgrade-Insecure-Requests: 1 # 让浏览器升级不安全请求，使用https请求
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36  # 用户代理，也就是客户端的名称
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 # 可接受的数据类型
Accept-Encoding: gzip, deflate # 可接受的压缩格式
Accept-Language: zh-CN,zh;q=0.9 #可接受的语言
Cookie: pgv_pvi=1246921728; # 登录用户的身份标识
---- 空行 ----

注意：每项数据之间使用:\r\n

POST 方式的请求报文：向 Web 服务器提交数据

---- 请求行 ----
POST /xmweb?host=mail.itcast.cn&_t=1542884567319 HTTP/1.1 # POST请求方式 请求资源路径 HTTP协议版本
---- 请求头 ----
Host: mail.itcast.cn # 服务器的主机地址和端口号,默认是80
Connection: keep-alive # 和服务端保持长连接
Content-Type: application/x-www-form-urlencoded  # 告诉服务端请求的数据类型
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 # 客户端的名称
---- 空行 ----
---- 请求体 ----
username=hello&pass=hello # 请求参数

注意：每项数据之间使用:\r\n

总结：

一个 HTTP 请求报文可以由请求行、请求头、空行和请求体 4 个部分组成。
请求行是由三部分组成: 请求方式 请求资源路径 HTTP 协议版本
GET 方式的请求报文没有请求体，只有请求行、请求头、空行组成。
POST 方式的请求报文可以有请求行、请求头、空行、请求体四部分组成。

注意：POST 方式可以允许没有请求体，但是这种格式很少见。

HTTP 响应报文

--- 响应行/状态行 ---
HTTP/1.1 200 OK # HTTP协议版本 状态码 状态描述
--- 响应头 ---
Server: Tengine # 服务器名称
Content-Type: text/html; charset=UTF-8 # 内容类型
Connection: keep-alive # 和客户端保持长连接
Date: Fri, 23 Nov 2018 02:01:05 GMT # 服务端的响应时间
--- 空行 ---
--- 响应体 ---
<!DOCTYPE html><html lang=“en”> …</html> # 响应给客户端的数据

注意：每项数据之间使用:\r\n

HTTP 状态码：表示 Web 服务器响应状态

状态码	说明
200	服务器已成功处理了请求
400	错误的请求，请求地址或者参数有误
404	请求资源在服务器不存在
500	服务器内部源代码出现错误

总结：

一个 HTTP 响应报文是由响应行、响应头、空行和响应体 4 个部分组成。
响应行是由三部分组成：HTTP 协议版本状态码状态描述，最常见的状态码是 200

4 HTTP 协议通信

通信原理

注意：每一次浏览器和服务器的数据通讯，都是成对出现的即请求和响应，

同时每一次请求和响应都必须符合 HTTP 协议的格式

谷歌浏览器开发者工具的使用
- 标签选项说明：
  - 元素（Elements）：用于查看或修改 HTML 标签
  - 控制台（Console）：执行 JS 代码
  - 源代码（Sources）：查看静态资源文件，断点调试 JS 代码
  - 网络（Network）：查看 http 协议的通信过程
- 使用说明：
  
  ①点击 Network 标签选项
  
  ②在浏览器地址栏输入百度的网址，就能看到请求百度首页的 HTTP 的通信过程
  
  ③这里的每项记录都是请求 + 响应的一次过程
  - 查看 HTTP 协议的通信过程

总结：

谷歌浏览器的开发者工具是查看 http 协议的通信过程利器，通过 Network 标签选项可以查看每一次的请求和响应的通信过程，调出开发者工具的通用方法是在网页右击选择检查。
Headers 选项总共有三部分组成:

①General: 主要信息

②Response Headers: 响应头

③Request Headers: 请求头
Response 选项是查看响应体信息的