HTTP-一次完整的 HTTP 请求到底经历了什么？

前言

作为前端开发者，我们每天都在处理数据请求。但你是否清楚，从你点击鼠标到页面渲染，数据在网络中经历了一场怎样的“长途旅行”？本文将带你通过时序化的视角，完整拆解 HTTP 请求的每一个步骤。

一、 HTTP 请求全过程示意图

二、 详细流程分解

第一阶段：建立连接（打招呼）

1. 建立 TCP 连接：

   • 在发送 HTTP 请求前，客户端与服务器必须通过 TCP 三次握手 建立可靠的连接通道（基于 Socket）。

第二阶段：发送请求（客户端 -> 服务端）

2. 发送请求行：

   • 告知服务器动作、目标和协议。例如：POST /login.html HTTP/1.1。

3. 发送请求头：

   • 包含主机名（Host）、缓存控制、身份信息等。

4. 结束标志：

   • 发送一个空白行，告诉服务器：“我的请求头发完了，后面如果有数据就是请求体了。”

5. 发送请求体（如果有）：

   • 提交表单数据或 JSON 负载。

第三阶段：处理并应答（服务端 -> 客户端）

6. 服务器做出状态应答（状态行） ：

   • 反馈处理结果。例如：HTTP/1.1 200 OK。

7. 发送响应头信息：

   • 包含服务器类型（Server）、资源类型（Content-Type）、日期等。

8. 结束标志：

   • 同样发送一个空白行，标示响应头结束。

9. 发送响应体数据：

   • 按照 Content-Type 指定的格式（HTML/JSON/图片）将真实数据传给浏览器。

第四阶段：收尾（断开连接）

10. 关闭 TCP 连接：

    • 默认行为：在早期，数据传完后会进行四次挥手断开连接。
    • 持久连接优化：如果在头信息中加入了 Connection: keep-alive（HTTP/1.1 默认开启），TCP 连接将保持打开状态，下次请求可复用，极大节省了网络带宽和握手时间。