web中HTTP协议详解

每日分享：

不要垂头丧气，即使失去一切，明天仍在你手里。

目录：

1. HTTP协议
2. URL
3. 查看HTTP协议的通信过程
4. HTTP请求报文
5. HTTP响应报文

一、HTTP协议

1. HTTP协议的介绍

HTTP协议（HyperText Transfer Protocol）：超文本传输协议

超文本是超级文本的缩写，是指超越文本限制或者超链接，比如图片、音乐、视频、超链接等等都属于超文本。

HTTP协议之前的目的是传输网页数据的，现在允许传输任意类型的数据

传输HTTP协议格式的数据是基于TCP传输协议的，发送数据之前需要建立连接

2. HTTP协议的作用

它规定了浏览器和Web服务器通信数据的格式，也就是说浏览器和Web服务器通信需要使用HTTP协议

3. 浏览器访问web服务器的通信过程

4. 小结

•  HTTP协议是一个超文本传输协议
• HTTP协议是一个基于TCP传输协议传输数据的
• HTTP协议规定了浏览器和web服务器通信数据的格式

二、URL

1. URL的概念

URL（Uniform Resoure Locator），表达的意思是统一资源定位符，通俗理解就是网络资源地址，也就是我们常说的网址

2. URL的组成

URL的样子：

https://news.163.com/18/1122/10/E178J2O4000189FH.html

URL的组成部分：

1. 协议部分：https://、http://、ftp://
2. 域名部分：news.163.com
3. 资源路径部分：/18/1122/10/E178J2O4000189FH.html

域名：

域名就是IP地址的别名，它是用点分割使用英文字母和数字组成的名字，使用域名目的就是方便的记住某台主机IP地址

URL的扩展：

https://news.163.com/hello.html?page=1&count=10

• 查询参数部分：?page=1&count=10

参数说明：

• ？后面的page表示第一个参数，后面的参数都使用&进行连接

3. 小结

• URL就是网络资源的地址，简称网址，通过URL能够找到网络中对应的资源数据
• URL组成部分

1. 协议部分
2. 域名部分
3. 资源路径部分
4. 查询参数部分（可选）

三、查看HTTP协议的通信过程

1. 谷歌浏览器开发者工具的使用

右键->检查（或者快捷键F12）

 

 开发者工具标签选项说明：

• 元素（Elements）：用于查看或修改HTML标签
• 控制台（Console）：执行js代码
• 源代码（Sources）：查看静态资源文件，断点调试JS代码
• 网络（Network）：查看http协议的通信过程

开发者工具使用效果图：

开发者工具的使用说明：

1. 点击Network标签选项
2. 在浏览器的地址栏输入百度的网址，就能看到请求百度首页的http的通信过程
3. 这里的每项记录都是请求+响应的一次过程

2. 查看HTTP协议的通信过程

查看HTTP请求信息的效果图：

 

 

 3. 小结

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

1. General：主要信息
2. Response Headers：响应头
3. Request Headers：请求头

• Response选项是查看响应体信息的

四、HTTP请求报文

1. HTTP请求报文介绍

HTTP最常见的请求报文有两种：

1. GET方式请求报文
2. POST方式的请求报文

说明：

• GET：获取web服务器数据
• POST：向web服务器提交数据

2. HTTP GeT 请求报文分析

HTTP GET请求报文：

 ---------- 请求行 -----------

GET / HTTP/1.1         GET请求方式   请求资源路径   HTTP协议版本

 ---------- 请求头 -----------

Host: www.itcast.cn     服务器的主机地址和端口号，默认是80

Connection: keep-alive    和服务器保持长连接

Cache-Control: max-age=0    缓存头，指定缓存机制

Upgrade-Insecure-Requests: 1    浏览器升级不安全请求，使用 https请求

User-Agent: Mozilla/5.0……       用户代理，也就是客户端名称

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9                 可接受的数据类型

Accept-Encoding: gzip, deflate         可接受的压缩格式

Accept-Language: zh-CN,zh;q=0.9    可接受的语言

Cookie: UM_distinctid=17d3c435deb834……   登录用户的身份标识

 ---------- 空行 -----------

GET请求原始报文：

GET / HTTP/1.1\r\n

Host: www.itcast.cn\r\n

Connection: keep-alive\r\n

Cache-Control: max-age=0\r\n

Upgrade-Insecure-Requests: 1\r\n

User-Agent: Mozilla/5.0……\r\n

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n

Accept-Encoding: gzip, deflate\r\n

Accept-Language: zh-CN,zh;q=0.9\r\n

Cookie: UM_distinctid=17d3c435deb834……\r\n

\r\n（请求头信息后面还有一个单独的‘\r\n’不能省略）

说明：

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

3. HTTP POST请求报文分析

HTTP POST请求报文（部分截图）：

 请求体效果图（部分截图）： 

POST比GET最后（空行后）多了一个请求体，其余相同

4. 小结

• 一个HTTP请求报文可以由请求行、请求头、空行和请求体4个部分组成
• 其中请求行由三部分组成：

1. 请求方式
2. 请求资源路径
3. HTTP协议版本

• GET方式的请求报文没有请求体，只有请求行、请求头、空行组成
• POST方式的请求报文可以有请求行、请求头、空行、请求体四部分组成

五、HTTP响应报文

1. HTTP响应报文分析2.

HTTP响应报文部分截图： 

2. HTTP状态码介绍

HTTP状态码是用于表示web服务器响应状态的3位数字代码

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

说明：

307：重定向（它更改了你的请求地址）

例：

访问http://www.baidu.com它会给你重定向为http://www.baidu.com

3. 小结

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