web后端----HTTP协议与浏览器F12

这里写目录标题

http协议

请求(Request)

内容及举例

请求:表示用户在浏览器做了操作之后,浏览器发送给服务器的请求。

当用户做了某些操作后,浏览器会自动将该操作打包成http协议格式的数据

该协议的数据包含:

1、请求行 ,即上图中第一行,第一个位置表示请求类型(GET 还是 POST ...更多见下面《HTTP请求方法》),之后第二个位置是请求的资源路径(URL),第三个位置是使用的http版本

2、请求头 :如上图第2~8行

第2~8行:是一些服务器要使用的附加信息

(可以看到第7行的Connection的值是keep-alive,表示,http协议的传输层采用的是TCP协议,这里是在进行三次握手建立连接)

3、空行 :如上图第9行

第9行:是一个空行,这是必须的,他用于表示请求头部分的内容结束
而请求行+请求头+空行(即刨去数据主体),可以被称为"协议头"

3、请求体 (也称请求数据):如果一个请求需要从浏览器携带数据给服务器,那么数据内容会放在第9行之后,也就是"请求体"部分,如下图:

请求体里的数据一般使用JSON格式 或者表单信息格式

重要:
只有post或者put请求才有请求体,一般get请求不会有请求体(其参数都在URL中)

响应(Response)

包括:

1、状态行 :即上图第一行,包括http协议版本号,然后是状态码,状态码后面是对状态码的描述,即对状态码的解释。比如上图的200,表示的就是OK的意思,而我们常见的404,表示的就是找不到资源的意思(更多见下面《HTTP常用状态码》)

2、响应头 :上图中第2~8行,说明要传达给浏览器的一些附加信息(第4行和第9行必须有,其他的可以没有)

其中:第4行(必须有),表示这次要发送的数据是什么格式类型的,如(文本类型、img、png类型、mp3类型、mp4类型等等),以及该文件的编码格式(更多见下面《常见网络文件类型》)

第5行,要么不写,要么传-1,要么就算的精确

第8行,表示TCP连接断开,说明,http协议是每进行一次连接,互通一次数据,且立马断开。待下次建立连接,再互通一次数据,再断开

3、空行 :在消息报头之后,是一个空行,表示消息报头的结束
状态行+消息报头+空行(即刨去响应正文部分),称为协议头

4、响应体 (也称响应正文):即返回给浏览器的数据

如,JSON格式的数据、html页面、图片等

HTTP请求方法

常用的有:GET、POST、DELETE

HTTP常用状态码

常见网络文件类型


HTTP 和 HTTPS 的区别

HTTP:明文传输,不加密,容易被监听或篡改。

HTTPS:在 HTTP 上增加了 TLS/SSL 加密层,安全性更高。

可以理解为 HTTP 是普通电话聊天,HTTPS 是加密电话聊天。

补充

http协议自学网站:

https://www.runoob.com/

https://www.runoob.com/http/http-tutorial.html

开发视角下的http

前端

刚开始进入web页面时,如上图

在web页面上操作时,会调用前端开发的函数,如上图

总之,不用前端不用自己去封装http报文,浏览器会自动封装,前端只需要按照一定的API填入关键数据即可

如,传入请求方法(get/post)、请求路径(URL)、传入请求体(JSON数据)

后端

一般web后端都会使用一些后端框架

其中的:

2、表示,后端框架接收http报文,并且会自动帮你将http报文解析出来
我们不需要自己解析http报文,直接可以拿到其中的关键数据:

如,请求方法(get/post)、资源路径(URL)、请求体(JSON数据)

然后做下一步处理即可,如,先前会根据get/post+URL注册路由,即注册业务处理函数到这个请求路径上,此时根据收到的get/post+URL进行路由分发,分发到之前注册的函数进行处理,同时传入请求体的数据,等等

7、后端框架会将你想要返回的响应,自动封装成http报文:

我们不需要自己封装http报文,只需要填入一些返回的关键数据:

如,响应状态码、返回的JSON数据等,如下图:

浏览器(Google)的F12信息

请求(Request)

请求行

见下方"general"

请求头

点击"网络"--->"Header"

往下翻,会有一个"Request Headers",这个就是请求头

请求体

一般post请求会有这个选项:"payload",其中的"Request Payload"就是请求体

响应(Response)

响应行

见下方"general"

响应头

同样在"header"--->"Response headers",就是响应头

响应体


上图中的Response和Preview都是响应体的内容,只不过Response是最原始的响应体内容 ,Preview是对响应体的内容进行了一定的预览效果,看起来会很舒服

general(请求行、响应行)

其包含

1、请求方面:请求行中的内容:请求方法、请求路径URL

2、响应方面:响应行中的内容:状态码

一级目录

二级目录

二级目录

二级目录

一级目录

二级目录

二级目录

二级目录

相关推荐
前端大波2 小时前
Web Vitals 与前端性能监控实战
前端·javascript
AlienZHOU2 小时前
从零开始,跟着写一个产品级 Coding Agent
前端
RichardZhiLi2 小时前
大前端全栈实践课程:章节二(前端工程化建设)
前端
毕设源码-赖学姐2 小时前
【开题答辩全过程】以 基于VUE的环保网站设计为例,包含答辩的问题和答案
前端·javascript·vue.js
ZTrainWilliams2 小时前
swagger-mcp-toolkit 让 AI编辑器 更快“读懂并调用”你的接口
前端·后端·mcp
伊步沁心3 小时前
深入 useEffect:为什么 cleanup 总比 setup 先跑?顺手手写节流防抖 Hook
前端
小J听不清3 小时前
CSS 字体样式全解析:字体类型 / 大小 / 粗细 / 样式
前端·javascript·css·html·css3
500佰3 小时前
pencil on claude 让设计师和程序员少吵架的一种可能
前端