HTTP 协议全解析：从输入网址到页面渲染的全过程（附请求/响应详解） 本文带你从浏览器地址栏开始，

林希_Rachel_傻希希
363 阅读4分钟

HTTP 协议全解析：从输入网址到页面渲染的全过程（附请求/响应详解）

本文带你从浏览器地址栏开始，一步步拆解网络通信全过程，理解 HTTP 协议、TCP/IP 协议族、请求与响应报文格式，以及 Express、AJAX 等相关后续内容的基础。

一、HTTP 协议与网络基础

1. 网络通信的本质

互联网通信的核心是 “请求（Request）” 与 “响应（Response）” 。
浏览器（客户端）向服务器发送请求，服务器接收后返回响应数据。
整个过程遵循 HTTP 协议 规范。

2. URL 的组成

以示例地址为例：

https://lilichao.com/hello/index.html
组成部分含义
https://协议名（如 HTTP、HTTPS、FTP 等）
lilichao.com域名（Domain）
/hello/index.html资源路径（Path）

域名与 IP 地址：

  • 每台服务器都有唯一的 IP 地址（如 192.168.1.17）。
  • IP 不易记忆，因此使用域名作为别名。
  • 浏览器在访问网站前，会将域名解析成对应的 IP 地址（DNS 解析）。

二、浏览器输入网址后发生了什么？

当你输入 https://lilichao.com/hello/index.html 并回车，浏览器会依次执行以下步骤：

1️⃣ DNS 解析：将域名转换为 IP 地址
2️⃣ 建立连接：浏览器与服务器通过 TCP 协议进行三次握手
3️⃣ 发送请求：浏览器按照 HTTP 协议格式发送请求报文
4️⃣ 服务器处理请求：并生成响应报文返回
5️⃣ 浏览器渲染页面：解析 HTML、CSS、JS 渲染出页面
6️⃣ 断开连接：四次挥手关闭 TCP 连接

三、TCP 三次握手 & 四次挥手

三次握手（建立连接）

步骤说明报文标志
1客户端 → 服务器：请求建立连接SYN
2服务器 → 客户端：同意连接SYN + ACK
3客户端 → 服务器：确认连接建立ACK

四次挥手（断开连接）

步骤说明报文标志
1客户端 → 服务器：请求断开连接FIN
2服务器 → 客户端：收到请求ACK
3服务器 → 客户端：准备断开FIN + ACK
4客户端 → 服务器：确认断开ACK

四、TCP/IP 协议族（了解）

TCP/IP 协议族是一组规定了互联网通信细节的协议。整个通信过程可分为四层：

层级功能说明
应用层软件层（如浏览器、服务器、HTTP 协议）
传输层负责数据分段、可靠传输（如 TCP）
网络层负责给数据包添加路由信息（如 IP 协议）
数据链路层负责实际的数据传输

HTTP 协议属于 应用层，主要用于定义请求和响应的格式。

五、HTTP 报文结构详解

HTTP 报文（message）是客户端与服务器通信的数据单位，分为：

  • 请求报文（Request）
  • 响应报文（Response）

📨 请求报文结构

请求首行
请求头
空行
请求体
1. 请求首行
GET /index.html?username=sunwukong HTTP/1.1
部分含义
GET请求方法（常见：GET、POST）
/index.html?username=sunwukong请求路径与查询参数
HTTP/1.1协议版本
查询字符串
  • 格式：key=value&key2=value2
  • 示例：username=admin&password=123123
  • GET 请求：数据在 URL 中传输，安全性较差、长度有限。
  • POST 请求：数据在请求体中传输，安全性更高、无大小限制。
2. 请求头（Headers）

请求头以键值对形式传递信息：

Accept: text/html
Accept-Encoding: gzip, deflate, br
User-Agent: Mozilla/5.0
常见字段含义
Accept可接受的文件类型
Accept-Encoding支持的压缩方式
User-Agent浏览器及系统信息
3. 请求体（Body）

  • 仅 POST、PUT 等请求方式包含

  • 在 Chrome → 网络面板中通过「载荷（Payload）」可查看

  • 示例：

    {
  "username": "sunwukong",
  "password": "123456"
}

响应报文结构

响应首行
响应头
空行
响应体
1. 响应首行
HTTP/1.1 200 OK
元素说明
HTTP/1.1协议版本
200状态码
OK状态描述

常见状态码：

状态码含义
1xx请求处理中
2xx成功（200 OK）
3xx重定向
4xx客户端错误（404、403）
5xx服务器错误（500）
2. 响应头（Headers）
Content-Type: text/html; charset=UTF-8
Content-Length: 2017
字段含义
Content-Type响应内容类型
Content-Length响应体大小
3. 响应体（Body）

就是服务器返回的实际数据，例如：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <form method="post" action="./02_target.html">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button>提交</button>
  </form>
</body>
</html>

六、实际请求示例

请求报文：

GET /index.html?username=sunwukong HTTP/1.1
Host: 127.0.0.1:5500
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml
Connection: keep-alive

响应报文：

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 2017
Connection: keep-alive
Date: Thu, 27 Oct 2022 11:52:29 GMT

七、后续学习方向

Express 框架

用于构建 Node.js Web 服务器，核心模块包括：

  • 路由（Router）

  • 中间件（Middleware）

    • 静态资源
    • 请求体解析（body-parser / json）
    • Cookie、Session

  • 模板引擎（如 EJS）

  • MVC 架构模式

AJAX

浏览器端向服务器发送异步请求的技术，用于：

  • 局部刷新页面
  • 异步数据交互
  • 与后端接口对接

总结

HTTP 协议是前端开发的基石，理解它能帮助我们：

  • 掌握浏览器与服务器的通信流程；
  • 分析请求与响应，优化性能；
  • 理解 Express / AJAX 的底层逻辑；
  • 为学习前后端分离与 API 通信打下基础。
avatar
文章
阅读
粉丝