HTTP协议深度解析：从请求响应到状态管理与安全传输

文章目录

引言
[一. HTTP协议的本质](#一. HTTP协议的本质)
- [1. HTTP是什么](#1. HTTP是什么)
- [2. HTTP请求的本质：一个大的字符串](#2. HTTP请求的本质：一个大的字符串)
- [3. HTTP与文件系统的关系](#3. HTTP与文件系统的关系)
[二. HTTP请求与响应格式](#二. HTTP请求与响应格式)
- [1. HTTP请求格式](#1. HTTP请求格式)
- [2. HTTP响应格式](#2. HTTP响应格式)
- [3. 接收方的解析任务](#3. 接收方的解析任务)
[三. HTTP方法：GET与POST](#三. HTTP方法：GET与POST)
- [1. GET方法](#1. GET方法)
- [2. POST方法](#2. POST方法)
- [3. GET与POST的对比](#3. GET与POST的对比)
- [4. 表单提交与HTTP请求的关系](#4. 表单提交与HTTP请求的关系)
[四. HTTP状态码](#四. HTTP状态码)
- [1. 1xx：信息性状态码](#1. 1xx：信息性状态码)
- [2. 2xx：成功状态码](#2. 2xx：成功状态码)
- [3. 3xx：重定向状态码](#3. 3xx：重定向状态码)
- [4. 4xx：客户端错误状态码](#4. 4xx：客户端错误状态码)
- [5. 5xx：服务器错误状态码](#5. 5xx：服务器错误状态码)
[五. HTTP连接管理](#五. HTTP连接管理)
- [1. 短连接与长连接](#1. 短连接与长连接)
- [2. 管道化与队头阻塞](#2. 管道化与队头阻塞)
[六. HTTPS：安全的HTTP](#六. HTTPS：安全的HTTP)
- [1. 为什么需要HTTPS](#1. 为什么需要HTTPS)
- [2. HTTPS的工作原理](#2. HTTPS的工作原理)
- [3. SSL/TLS握手过程](#3. SSL/TLS握手过程)
- [4. 如何证明HTTPS的安全性](#4. 如何证明HTTPS的安全性)
[七. HTTP状态管理：Cookie机制](#七. HTTP状态管理：Cookie机制)
- [1. HTTP的无状态特性](#1. HTTP的无状态特性)
- [2. Cookie的工作原理](#2. Cookie的工作原理)
- [3. Cookie的属性](#3. Cookie的属性)
- [4. Cookie的安全问题与防护](#4. Cookie的安全问题与防护)
[八. URL的构成与解析](#八. URL的构成与解析)
- [1. URL的组成部分](#1. URL的组成部分)
[九. HTTP协议的发展与演进](#九. HTTP协议的发展与演进)
- [1. HTTP/1.0到HTTP/1.1](#1. HTTP/1.0到HTTP/1.1)
- [2. HTTP/2](#2. HTTP/2)
- [3. HTTP/3](#3. HTTP/3)
[十. 总结](#十. 总结)

哈喽，编程搭子们！😜 又到了沉浸式敲代码的快乐时间～把生活调成「代码模式」，带着满满的热爱钻进编程的奇妙世界------今天也要敲出超酷的代码，冲鸭！🚀

✨ 我的博客主页：喜欢吃燃面

📚 我的专栏（持续更新ing）：
《C语言》 |
《C语言之数据结构》 |
《C++》 |
《Linux系统编程》

💖 超感谢你点开这篇博客！真心希望这些内容能帮到正在打怪升级的你～如果有任何想法、疑问，或者想交流学习心得，都欢迎留言/私信，咱们一起在编程路上互相陪伴、共同进步呀！

引言

HTTP（HyperText Transfer Protocol，超文本传输协议）是互联网上应用最为广泛的协议之一，它构成了**万维网（World Wide Web）**的数据通信基础。从我们每天在浏览器中输入网址访问网页，到手机App与后端服务器的每一次数据交互，HTTP协议无处不在。本文将从HTTP协议的本质出发，深入剖析请求与响应的格式结构、URL的解析机制、GET与POST方法的区别、HTTP状态码的含义、连接管理机制，以及HTTPS的安全传输原理和Cookie的状态保持机制，帮助读者建立对HTTP协议的系统性认知。

理解HTTP协议不仅是Web开发者的必修课，对于任何涉及网络通信的程序员来说，掌握HTTP的工作原理都能帮助更好地设计和调试系统。HTTP协议的设计哲学体现了简洁与扩展性的完美平衡------它使用纯文本传输，易于阅读和调试，同时又通过头部字段的灵活扩展支持了从简单网页浏览到复杂API交互的各种场景。

一. HTTP协议的本质

1. HTTP是什么

HTTP是一种应用层协议 ，它定义了客户端（通常是浏览器或App）与服务器之间如何交换数据。从本质上讲，HTTP协议的核心任务就是：客户端向服务器请求资源，服务器将资源返回给客户端。这里的"资源"可以是HTML页面、CSS样式表、JavaScript脚本、图片、视频、音频文件，或者是服务器动态生成的数据。

HTTP协议工作在TCP/IP协议栈的应用层，默认使用TCP端口80进行通信。当用户在浏览器地址栏输入http://www.xxx.com/a/b/c/d.html时，浏览器会解析这个URL，建立与服务器的TCP连接，然后发送HTTP请求，服务器处理请求后返回HTTP响应，最终浏览器解析响应内容并呈现给用户。

2. HTTP请求的本质：一个大的字符串

从协议实现的角度来看，HTTP请求本质上就是一个大的字符串（字节流） 。这个字符串遵循特定的格式规范，包含了请求方法、请求路径、协议版本、请求头部和请求正文等部分。服务器接收到这个字符串后，按照HTTP协议的规则进行解析，提取出各个字段的含义，然后根据请求内容做出相应的处理。

这种基于文本的协议设计带来了巨大的优势：它使得HTTP协议极其易于理解和调试。开发人员可以直接使用Telnet工具或者网络抓包工具（如Wireshark、Fiddler）查看HTTP请求的原始内容，而不需要借助复杂的二进制解析工具。这种透明性是HTTP协议能够迅速普及的重要原因之一。
#mermaid-svg-RQGkX98UyYkRvUcw{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-RQGkX98UyYkRvUcw .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-RQGkX98UyYkRvUcw .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-RQGkX98UyYkRvUcw .error-icon{fill:#552222;}#mermaid-svg-RQGkX98UyYkRvUcw .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-RQGkX98UyYkRvUcw .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-RQGkX98UyYkRvUcw .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-RQGkX98UyYkRvUcw .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-RQGkX98UyYkRvUcw .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-RQGkX98UyYkRvUcw .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-RQGkX98UyYkRvUcw .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-RQGkX98UyYkRvUcw .marker{fill:#333333;stroke:#333333;}#mermaid-svg-RQGkX98UyYkRvUcw .marker.cross{stroke:#333333;}#mermaid-svg-RQGkX98UyYkRvUcw svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-RQGkX98UyYkRvUcw p{margin:0;}#mermaid-svg-RQGkX98UyYkRvUcw .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-RQGkX98UyYkRvUcw .cluster-label text{fill:#333;}#mermaid-svg-RQGkX98UyYkRvUcw .cluster-label span{color:#333;}#mermaid-svg-RQGkX98UyYkRvUcw .cluster-label span p{background-color:transparent;}#mermaid-svg-RQGkX98UyYkRvUcw .label text,#mermaid-svg-RQGkX98UyYkRvUcw span{fill:#333;color:#333;}#mermaid-svg-RQGkX98UyYkRvUcw .node rect,#mermaid-svg-RQGkX98UyYkRvUcw .node circle,#mermaid-svg-RQGkX98UyYkRvUcw .node ellipse,#mermaid-svg-RQGkX98UyYkRvUcw .node polygon,#mermaid-svg-RQGkX98UyYkRvUcw .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-RQGkX98UyYkRvUcw .rough-node .label text,#mermaid-svg-RQGkX98UyYkRvUcw .node .label text,#mermaid-svg-RQGkX98UyYkRvUcw .image-shape .label,#mermaid-svg-RQGkX98UyYkRvUcw .icon-shape .label{text-anchor:middle;}#mermaid-svg-RQGkX98UyYkRvUcw .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-RQGkX98UyYkRvUcw .rough-node .label,#mermaid-svg-RQGkX98UyYkRvUcw .node .label,#mermaid-svg-RQGkX98UyYkRvUcw .image-shape .label,#mermaid-svg-RQGkX98UyYkRvUcw .icon-shape .label{text-align:center;}#mermaid-svg-RQGkX98UyYkRvUcw .node.clickable{cursor:pointer;}#mermaid-svg-RQGkX98UyYkRvUcw .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-RQGkX98UyYkRvUcw .arrowheadPath{fill:#333333;}#mermaid-svg-RQGkX98UyYkRvUcw .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-RQGkX98UyYkRvUcw .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-RQGkX98UyYkRvUcw .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-RQGkX98UyYkRvUcw .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-RQGkX98UyYkRvUcw .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-RQGkX98UyYkRvUcw .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-RQGkX98UyYkRvUcw .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-RQGkX98UyYkRvUcw .cluster text{fill:#333;}#mermaid-svg-RQGkX98UyYkRvUcw .cluster span{color:#333;}#mermaid-svg-RQGkX98UyYkRvUcw div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-RQGkX98UyYkRvUcw .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-RQGkX98UyYkRvUcw rect.text{fill:none;stroke-width:0;}#mermaid-svg-RQGkX98UyYkRvUcw .icon-shape,#mermaid-svg-RQGkX98UyYkRvUcw .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-RQGkX98UyYkRvUcw .icon-shape p,#mermaid-svg-RQGkX98UyYkRvUcw .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-RQGkX98UyYkRvUcw .icon-shape .label rect,#mermaid-svg-RQGkX98UyYkRvUcw .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-RQGkX98UyYkRvUcw .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-RQGkX98UyYkRvUcw .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-RQGkX98UyYkRvUcw :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} HTTP请求字符串
HTTP响应字符串
HTTP请求示例
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
浏览器
服务器

3. HTTP与文件系统的关系

HTTP协议的一个重要特性是它与文件系统的天然映射关系。在早期的Web设计中，URL路径直接对应服务器文件系统中的目录结构。例如，URLhttp://www.xxx.com/a/b/c/d.html对应服务器上的wwwroot/a/b/c/d.html文件。服务器接收到请求后，只需要根据URL路径找到对应的文件，读取其内容并返回给客户端即可。

这种设计使得Web服务器的实现变得非常简单------本质上就是一个文件读取和传输程序。即使在现代Web应用中，静态资源（如HTML、CSS、JS、图片等）的访问仍然遵循这一模式。服务器上的wwwroot目录（或称为public、static目录）存放着所有可以直接通过URL访问的静态文件。
#mermaid-svg-jEkVzYjAvOvBlcT3{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-jEkVzYjAvOvBlcT3 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-jEkVzYjAvOvBlcT3 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-jEkVzYjAvOvBlcT3 .error-icon{fill:#552222;}#mermaid-svg-jEkVzYjAvOvBlcT3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-jEkVzYjAvOvBlcT3 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-jEkVzYjAvOvBlcT3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-jEkVzYjAvOvBlcT3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-jEkVzYjAvOvBlcT3 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-jEkVzYjAvOvBlcT3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-jEkVzYjAvOvBlcT3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-jEkVzYjAvOvBlcT3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-jEkVzYjAvOvBlcT3 .marker.cross{stroke:#333333;}#mermaid-svg-jEkVzYjAvOvBlcT3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-jEkVzYjAvOvBlcT3 p{margin:0;}#mermaid-svg-jEkVzYjAvOvBlcT3 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-jEkVzYjAvOvBlcT3 .cluster-label text{fill:#333;}#mermaid-svg-jEkVzYjAvOvBlcT3 .cluster-label span{color:#333;}#mermaid-svg-jEkVzYjAvOvBlcT3 .cluster-label span p{background-color:transparent;}#mermaid-svg-jEkVzYjAvOvBlcT3 .label text,#mermaid-svg-jEkVzYjAvOvBlcT3 span{fill:#333;color:#333;}#mermaid-svg-jEkVzYjAvOvBlcT3 .node rect,#mermaid-svg-jEkVzYjAvOvBlcT3 .node circle,#mermaid-svg-jEkVzYjAvOvBlcT3 .node ellipse,#mermaid-svg-jEkVzYjAvOvBlcT3 .node polygon,#mermaid-svg-jEkVzYjAvOvBlcT3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-jEkVzYjAvOvBlcT3 .rough-node .label text,#mermaid-svg-jEkVzYjAvOvBlcT3 .node .label text,#mermaid-svg-jEkVzYjAvOvBlcT3 .image-shape .label,#mermaid-svg-jEkVzYjAvOvBlcT3 .icon-shape .label{text-anchor:middle;}#mermaid-svg-jEkVzYjAvOvBlcT3 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-jEkVzYjAvOvBlcT3 .rough-node .label,#mermaid-svg-jEkVzYjAvOvBlcT3 .node .label,#mermaid-svg-jEkVzYjAvOvBlcT3 .image-shape .label,#mermaid-svg-jEkVzYjAvOvBlcT3 .icon-shape .label{text-align:center;}#mermaid-svg-jEkVzYjAvOvBlcT3 .node.clickable{cursor:pointer;}#mermaid-svg-jEkVzYjAvOvBlcT3 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-jEkVzYjAvOvBlcT3 .arrowheadPath{fill:#333333;}#mermaid-svg-jEkVzYjAvOvBlcT3 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-jEkVzYjAvOvBlcT3 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-jEkVzYjAvOvBlcT3 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-jEkVzYjAvOvBlcT3 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-jEkVzYjAvOvBlcT3 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-jEkVzYjAvOvBlcT3 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-jEkVzYjAvOvBlcT3 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-jEkVzYjAvOvBlcT3 .cluster text{fill:#333;}#mermaid-svg-jEkVzYjAvOvBlcT3 .cluster span{color:#333;}#mermaid-svg-jEkVzYjAvOvBlcT3 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-jEkVzYjAvOvBlcT3 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-jEkVzYjAvOvBlcT3 rect.text{fill:none;stroke-width:0;}#mermaid-svg-jEkVzYjAvOvBlcT3 .icon-shape,#mermaid-svg-jEkVzYjAvOvBlcT3 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-jEkVzYjAvOvBlcT3 .icon-shape p,#mermaid-svg-jEkVzYjAvOvBlcT3 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-jEkVzYjAvOvBlcT3 .icon-shape .label rect,#mermaid-svg-jEkVzYjAvOvBlcT3 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-jEkVzYjAvOvBlcT3 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-jEkVzYjAvOvBlcT3 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-jEkVzYjAvOvBlcT3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} URL路径

/css/style.css
服务器文件系统
URL路径

/js/app.js
URL路径

/images/logo.png
URL路径

/index.html
wwwroot/css/style.css
wwwroot/js/app.js
wwwroot/images/logo.png
wwwroot/index.html

二. HTTP请求与响应格式

1. HTTP请求格式

一个标准的HTTP请求由以下几个部分组成，各部分之间通过换行符（）分隔：

请求行（Request Line）：包含请求方法、请求URI和HTTP协议版本。例如：GET /index.html HTTP/1.1。

请求头部（Request Headers）：包含一系列的键值对，用于传递附加信息。每个头部字段占一行，格式为字段名: 字段值。常见的请求头部包括：

Host：指定请求的目标主机和端口

User-Agent：标识客户端的软件信息

Accept：指定客户端可接受的MIME类型

Content-Type：指定请求正文的MIME类型（用于POST请求）

Content-Length：指定请求正文的长度

空行：请求头部和请求正文之间用一个空行分隔。

请求正文（Request Body）：可选部分，用于传输数据。通常在POST、PUT等请求方法中使用。
#mermaid-svg-VanGO4Ll6zG0ujco{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-VanGO4Ll6zG0ujco .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-VanGO4Ll6zG0ujco .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-VanGO4Ll6zG0ujco .error-icon{fill:#552222;}#mermaid-svg-VanGO4Ll6zG0ujco .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-VanGO4Ll6zG0ujco .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-VanGO4Ll6zG0ujco .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-VanGO4Ll6zG0ujco .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-VanGO4Ll6zG0ujco .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-VanGO4Ll6zG0ujco .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-VanGO4Ll6zG0ujco .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-VanGO4Ll6zG0ujco .marker{fill:#333333;stroke:#333333;}#mermaid-svg-VanGO4Ll6zG0ujco .marker.cross{stroke:#333333;}#mermaid-svg-VanGO4Ll6zG0ujco svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-VanGO4Ll6zG0ujco p{margin:0;}#mermaid-svg-VanGO4Ll6zG0ujco .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-VanGO4Ll6zG0ujco .cluster-label text{fill:#333;}#mermaid-svg-VanGO4Ll6zG0ujco .cluster-label span{color:#333;}#mermaid-svg-VanGO4Ll6zG0ujco .cluster-label span p{background-color:transparent;}#mermaid-svg-VanGO4Ll6zG0ujco .label text,#mermaid-svg-VanGO4Ll6zG0ujco span{fill:#333;color:#333;}#mermaid-svg-VanGO4Ll6zG0ujco .node rect,#mermaid-svg-VanGO4Ll6zG0ujco .node circle,#mermaid-svg-VanGO4Ll6zG0ujco .node ellipse,#mermaid-svg-VanGO4Ll6zG0ujco .node polygon,#mermaid-svg-VanGO4Ll6zG0ujco .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-VanGO4Ll6zG0ujco .rough-node .label text,#mermaid-svg-VanGO4Ll6zG0ujco .node .label text,#mermaid-svg-VanGO4Ll6zG0ujco .image-shape .label,#mermaid-svg-VanGO4Ll6zG0ujco .icon-shape .label{text-anchor:middle;}#mermaid-svg-VanGO4Ll6zG0ujco .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-VanGO4Ll6zG0ujco .rough-node .label,#mermaid-svg-VanGO4Ll6zG0ujco .node .label,#mermaid-svg-VanGO4Ll6zG0ujco .image-shape .label,#mermaid-svg-VanGO4Ll6zG0ujco .icon-shape .label{text-align:center;}#mermaid-svg-VanGO4Ll6zG0ujco .node.clickable{cursor:pointer;}#mermaid-svg-VanGO4Ll6zG0ujco .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-VanGO4Ll6zG0ujco .arrowheadPath{fill:#333333;}#mermaid-svg-VanGO4Ll6zG0ujco .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-VanGO4Ll6zG0ujco .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-VanGO4Ll6zG0ujco .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-VanGO4Ll6zG0ujco .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-VanGO4Ll6zG0ujco .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-VanGO4Ll6zG0ujco .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-VanGO4Ll6zG0ujco .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-VanGO4Ll6zG0ujco .cluster text{fill:#333;}#mermaid-svg-VanGO4Ll6zG0ujco .cluster span{color:#333;}#mermaid-svg-VanGO4Ll6zG0ujco div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-VanGO4Ll6zG0ujco .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-VanGO4Ll6zG0ujco rect.text{fill:none;stroke-width:0;}#mermaid-svg-VanGO4Ll6zG0ujco .icon-shape,#mermaid-svg-VanGO4Ll6zG0ujco .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-VanGO4Ll6zG0ujco .icon-shape p,#mermaid-svg-VanGO4Ll6zG0ujco .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-VanGO4Ll6zG0ujco .icon-shape .label rect,#mermaid-svg-VanGO4Ll6zG0ujco .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-VanGO4Ll6zG0ujco .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-VanGO4Ll6zG0ujco .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-VanGO4Ll6zG0ujco :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} HTTP请求
请求行

GET /index.html HTTP/1.1
请求头部

Host: www.example.com

User-Agent: Mozilla/5.0
空行

请求正文

可选

2. HTTP响应格式

HTTP响应的格式与请求类似，也分为几个部分：

状态行（Status Line）：包含HTTP协议版本、状态码和状态描述。例如：HTTP/1.1 200 OK。

响应头部（Response Headers）：包含服务器返回的附加信息。常见的响应头部包括：

Content-Type：指定响应内容的MIME类型

Content-Length：指定响应内容的长度

Server：标识服务器软件信息

Set-Cookie：设置客户端Cookie

Location：用于重定向，指定新的URL

空行：响应头部和响应正文之间用一个空行分隔。

响应正文（Response Body）：包含实际的响应内容，如HTML页面、JSON数据、图片二进制数据等。
#mermaid-svg-WJoR782on6NA1Cv1{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-WJoR782on6NA1Cv1 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-WJoR782on6NA1Cv1 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-WJoR782on6NA1Cv1 .error-icon{fill:#552222;}#mermaid-svg-WJoR782on6NA1Cv1 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WJoR782on6NA1Cv1 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-WJoR782on6NA1Cv1 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WJoR782on6NA1Cv1 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WJoR782on6NA1Cv1 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-WJoR782on6NA1Cv1 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WJoR782on6NA1Cv1 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WJoR782on6NA1Cv1 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WJoR782on6NA1Cv1 .marker.cross{stroke:#333333;}#mermaid-svg-WJoR782on6NA1Cv1 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WJoR782on6NA1Cv1 p{margin:0;}#mermaid-svg-WJoR782on6NA1Cv1 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-WJoR782on6NA1Cv1 .cluster-label text{fill:#333;}#mermaid-svg-WJoR782on6NA1Cv1 .cluster-label span{color:#333;}#mermaid-svg-WJoR782on6NA1Cv1 .cluster-label span p{background-color:transparent;}#mermaid-svg-WJoR782on6NA1Cv1 .label text,#mermaid-svg-WJoR782on6NA1Cv1 span{fill:#333;color:#333;}#mermaid-svg-WJoR782on6NA1Cv1 .node rect,#mermaid-svg-WJoR782on6NA1Cv1 .node circle,#mermaid-svg-WJoR782on6NA1Cv1 .node ellipse,#mermaid-svg-WJoR782on6NA1Cv1 .node polygon,#mermaid-svg-WJoR782on6NA1Cv1 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WJoR782on6NA1Cv1 .rough-node .label text,#mermaid-svg-WJoR782on6NA1Cv1 .node .label text,#mermaid-svg-WJoR782on6NA1Cv1 .image-shape .label,#mermaid-svg-WJoR782on6NA1Cv1 .icon-shape .label{text-anchor:middle;}#mermaid-svg-WJoR782on6NA1Cv1 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-WJoR782on6NA1Cv1 .rough-node .label,#mermaid-svg-WJoR782on6NA1Cv1 .node .label,#mermaid-svg-WJoR782on6NA1Cv1 .image-shape .label,#mermaid-svg-WJoR782on6NA1Cv1 .icon-shape .label{text-align:center;}#mermaid-svg-WJoR782on6NA1Cv1 .node.clickable{cursor:pointer;}#mermaid-svg-WJoR782on6NA1Cv1 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-WJoR782on6NA1Cv1 .arrowheadPath{fill:#333333;}#mermaid-svg-WJoR782on6NA1Cv1 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WJoR782on6NA1Cv1 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WJoR782on6NA1Cv1 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-WJoR782on6NA1Cv1 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-WJoR782on6NA1Cv1 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-WJoR782on6NA1Cv1 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-WJoR782on6NA1Cv1 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WJoR782on6NA1Cv1 .cluster text{fill:#333;}#mermaid-svg-WJoR782on6NA1Cv1 .cluster span{color:#333;}#mermaid-svg-WJoR782on6NA1Cv1 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-WJoR782on6NA1Cv1 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-WJoR782on6NA1Cv1 rect.text{fill:none;stroke-width:0;}#mermaid-svg-WJoR782on6NA1Cv1 .icon-shape,#mermaid-svg-WJoR782on6NA1Cv1 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-WJoR782on6NA1Cv1 .icon-shape p,#mermaid-svg-WJoR782on6NA1Cv1 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-WJoR782on6NA1Cv1 .icon-shape .label rect,#mermaid-svg-WJoR782on6NA1Cv1 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-WJoR782on6NA1Cv1 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-WJoR782on6NA1Cv1 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-WJoR782on6NA1Cv1 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} HTTP响应
状态行

HTTP/1.1 200 OK
响应头部

Content-Type: text/html

Content-Length: 1234
空行

响应正文

HTML内容/JSON数据/二进制文件

3. 接收方的解析任务

对于HTTP协议的接收方（无论是客户端接收响应还是服务器接收请求），需要解决两个核心问题：

第一，如何把报头读完？ HTTP协议的头部和正文之间通过一个空行分隔。接收方需要逐行读取数据，直到遇到空行为止，此时头部读取完毕。这种设计使得解析器可以方便地定位头部和正文的分界点。

第二，如何反序列化？读取到头部数据后，需要将其解析为结构化的键值对形式，以便程序能够方便地访问各个字段的值。同样，对于正文部分，根据Content-Type头部指定的格式（如application/json、application/x-www-form-urlencoded等），需要进行相应的解析处理。

三. HTTP方法：GET与POST

1. GET方法

GET是最常用的HTTP方法，用于从服务器获取资源。GET请求的特点包括：

参数通过URL传递：GET请求的参数附加在URL后面，以问号?开头，参数之间用&分隔。例如：GET /search?q=keyword&page=1 HTTP/1.1。这种设计使得GET请求可以被收藏、分享，并且会留在浏览器历史记录中。

幂等性 ：多次相同的GET请求应该产生相同的结果，不会对服务器状态造成副作用。这是HTTP协议对GET方法的语义规定。

数据长度限制：由于参数包含在URL中，而URL长度受浏览器和服务器限制（通常为2048个字符左右），因此GET请求不适合传输大量数据。

安全性考虑：GET请求的参数直接暴露在URL中，因此不适合传输敏感信息（如密码、银行卡号等）。

2. POST方法

POST方法用于向服务器提交数据，通常用于表单提交、文件上传等场景。POST请求的特点包括：

参数通过正文传递：POST请求的参数放在请求正文中，而不是URL中。这使得POST可以传输更大量的数据，并且数据不会暴露在URL中。

非幂等性：POST请求可能会对服务器状态产生副作用，如创建新资源、修改数据等。多次相同的POST请求可能会产生不同的结果（如重复提交表单导致多次创建记录）。

数据格式灵活：POST请求的正文可以采用多种格式，常见的包括：

application/x-www-form-urlencoded：表单数据编码为键值对字符串

multipart/form-data：用于文件上传，支持二进制数据

application/json：JSON格式的数据，常用于API接口

3. GET与POST的对比

特性 GET POST

参数位置 URL查询字符串请求正文

数据可见性暴露在URL中隐藏在正文中

数据长度限制受URL长度限制理论上无限制

缓存可以被缓存通常不被缓存

书签/历史记录可以收藏不可以收藏

幂等性幂等非幂等

用途获取资源提交数据
#mermaid-svg-lmS5jdp9IFFLENcA{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-lmS5jdp9IFFLENcA .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-lmS5jdp9IFFLENcA .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-lmS5jdp9IFFLENcA .error-icon{fill:#552222;}#mermaid-svg-lmS5jdp9IFFLENcA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lmS5jdp9IFFLENcA .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-lmS5jdp9IFFLENcA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lmS5jdp9IFFLENcA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lmS5jdp9IFFLENcA .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-lmS5jdp9IFFLENcA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lmS5jdp9IFFLENcA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lmS5jdp9IFFLENcA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lmS5jdp9IFFLENcA .marker.cross{stroke:#333333;}#mermaid-svg-lmS5jdp9IFFLENcA svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lmS5jdp9IFFLENcA p{margin:0;}#mermaid-svg-lmS5jdp9IFFLENcA .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-lmS5jdp9IFFLENcA .cluster-label text{fill:#333;}#mermaid-svg-lmS5jdp9IFFLENcA .cluster-label span{color:#333;}#mermaid-svg-lmS5jdp9IFFLENcA .cluster-label span p{background-color:transparent;}#mermaid-svg-lmS5jdp9IFFLENcA .label text,#mermaid-svg-lmS5jdp9IFFLENcA span{fill:#333;color:#333;}#mermaid-svg-lmS5jdp9IFFLENcA .node rect,#mermaid-svg-lmS5jdp9IFFLENcA .node circle,#mermaid-svg-lmS5jdp9IFFLENcA .node ellipse,#mermaid-svg-lmS5jdp9IFFLENcA .node polygon,#mermaid-svg-lmS5jdp9IFFLENcA .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lmS5jdp9IFFLENcA .rough-node .label text,#mermaid-svg-lmS5jdp9IFFLENcA .node .label text,#mermaid-svg-lmS5jdp9IFFLENcA .image-shape .label,#mermaid-svg-lmS5jdp9IFFLENcA .icon-shape .label{text-anchor:middle;}#mermaid-svg-lmS5jdp9IFFLENcA .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-lmS5jdp9IFFLENcA .rough-node .label,#mermaid-svg-lmS5jdp9IFFLENcA .node .label,#mermaid-svg-lmS5jdp9IFFLENcA .image-shape .label,#mermaid-svg-lmS5jdp9IFFLENcA .icon-shape .label{text-align:center;}#mermaid-svg-lmS5jdp9IFFLENcA .node.clickable{cursor:pointer;}#mermaid-svg-lmS5jdp9IFFLENcA .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-lmS5jdp9IFFLENcA .arrowheadPath{fill:#333333;}#mermaid-svg-lmS5jdp9IFFLENcA .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-lmS5jdp9IFFLENcA .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-lmS5jdp9IFFLENcA .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-lmS5jdp9IFFLENcA .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-lmS5jdp9IFFLENcA .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-lmS5jdp9IFFLENcA .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-lmS5jdp9IFFLENcA .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-lmS5jdp9IFFLENcA .cluster text{fill:#333;}#mermaid-svg-lmS5jdp9IFFLENcA .cluster span{color:#333;}#mermaid-svg-lmS5jdp9IFFLENcA div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-lmS5jdp9IFFLENcA .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-lmS5jdp9IFFLENcA rect.text{fill:none;stroke-width:0;}#mermaid-svg-lmS5jdp9IFFLENcA .icon-shape,#mermaid-svg-lmS5jdp9IFFLENcA .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-lmS5jdp9IFFLENcA .icon-shape p,#mermaid-svg-lmS5jdp9IFFLENcA .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-lmS5jdp9IFFLENcA .icon-shape .label rect,#mermaid-svg-lmS5jdp9IFFLENcA .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-lmS5jdp9IFFLENcA .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-lmS5jdp9IFFLENcA .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-lmS5jdp9IFFLENcA :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} POST请求
POST /login
正文: name=aaa&passwd=bbb
浏览器
服务器
GET请求
GET /login?name=aaa&passwd=bbb
浏览器
服务器

4. 表单提交与HTTP请求的关系

在Web开发中，HTML表单是用户与服务器交互的重要方式。当用户填写表单并点击提交按钮时，浏览器会自动将表单数据转换为HTTP请求发送给服务器。

表单的两个重要属性决定了HTTP请求的格式：

method属性：指定使用的HTTP方法，通常为GET或POST。

action属性：指定请求的目标URL。

当method为GET时，浏览器会将表单中所有输入字段的名称和值编码为查询字符串，附加到action指定的URL后面。当method为POST时，浏览器会将表单数据编码后放入请求正文中。

html 复制代码

<!-- GET方式提交 -->
<form method="GET" action="/search">
    <input type="text" name="keyword" value="HTTP协议">
    <input type="submit" value="搜索">
</form>
<!-- 生成的请求: GET /search?keyword=HTTP%E5%8D%8F%E8%AE%AE HTTP/1.1 -->

<!-- POST方式提交 -->
<form method="POST" action="/login">
    <input type="text" name="username" value="admin">
    <input type="password" name="password" value="123456">
    <input type="submit" value="登录">
</form>
<!-- 生成的请求: POST /login HTTP/1.1 -->
<!-- 正文: username=admin&password=123456 -->

四. HTTP状态码

HTTP状态码是服务器对客户端请求的响应结果的三位数字代码，用于表示请求的处理状态。状态码分为五个类别：

1. 1xx：信息性状态码

表示请求已被接收，需要继续处理。这类状态码在实际应用中较少见。

100 Continue：服务器已收到请求的初始部分，客户端应继续发送剩余部分。

2. 2xx：成功状态码

表示请求已被成功接收、理解和处理。

200 OK：请求成功，响应正文包含请求的资源。

201 Created：请求成功，并且服务器创建了新的资源。

204 No Content：请求成功，但响应中没有正文内容。

3. 3xx：重定向状态码

表示需要客户端采取进一步的操作才能完成请求，通常用于URL重定向。

301 Moved Permanently：永久重定向，请求的资源已被永久移动到新的URL。浏览器应自动访问新的URL，并更新书签。响应头部中的Location字段指定新的URL。

302 Found（或307 Temporary Redirect）：临时重定向，请求的资源临时位于不同的URL。浏览器应自动访问新的URL，但不应更新书签。

304 Not Modified：资源未修改，客户端可以使用缓存的版本。
服务器客户端服务器客户端 #mermaid-svg-6pI35PrCEnCbv2q2{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-6pI35PrCEnCbv2q2 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-6pI35PrCEnCbv2q2 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-6pI35PrCEnCbv2q2 .error-icon{fill:#552222;}#mermaid-svg-6pI35PrCEnCbv2q2 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-6pI35PrCEnCbv2q2 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-6pI35PrCEnCbv2q2 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-6pI35PrCEnCbv2q2 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-6pI35PrCEnCbv2q2 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-6pI35PrCEnCbv2q2 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-6pI35PrCEnCbv2q2 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-6pI35PrCEnCbv2q2 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-6pI35PrCEnCbv2q2 .marker.cross{stroke:#333333;}#mermaid-svg-6pI35PrCEnCbv2q2 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-6pI35PrCEnCbv2q2 p{margin:0;}#mermaid-svg-6pI35PrCEnCbv2q2 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-6pI35PrCEnCbv2q2 text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-6pI35PrCEnCbv2q2 .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-6pI35PrCEnCbv2q2 .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-6pI35PrCEnCbv2q2 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-6pI35PrCEnCbv2q2 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-6pI35PrCEnCbv2q2 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-6pI35PrCEnCbv2q2 .sequenceNumber{fill:white;}#mermaid-svg-6pI35PrCEnCbv2q2 #sequencenumber{fill:#333;}#mermaid-svg-6pI35PrCEnCbv2q2 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-6pI35PrCEnCbv2q2 .messageText{fill:#333;stroke:none;}#mermaid-svg-6pI35PrCEnCbv2q2 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-6pI35PrCEnCbv2q2 .labelText,#mermaid-svg-6pI35PrCEnCbv2q2 .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-6pI35PrCEnCbv2q2 .loopText,#mermaid-svg-6pI35PrCEnCbv2q2 .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-6pI35PrCEnCbv2q2 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-6pI35PrCEnCbv2q2 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-6pI35PrCEnCbv2q2 .noteText,#mermaid-svg-6pI35PrCEnCbv2q2 .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-6pI35PrCEnCbv2q2 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-6pI35PrCEnCbv2q2 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-6pI35PrCEnCbv2q2 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-6pI35PrCEnCbv2q2 .actorPopupMenu{position:absolute;}#mermaid-svg-6pI35PrCEnCbv2q2 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-6pI35PrCEnCbv2q2 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-6pI35PrCEnCbv2q2 .actor-man circle,#mermaid-svg-6pI35PrCEnCbv2q2 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-6pI35PrCEnCbv2q2 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} GET /old-page HTTP/1.1 HTTP/1.1 301 Moved Permanently Location: /new-page GET /new-page HTTP/1.1 HTTP/1.1 200 OK $页面内容$

4. 4xx：客户端错误状态码

表示请求包含语法错误或无法完成，责任在客户端。

400 Bad Request：请求格式错误，服务器无法理解。

401 Unauthorized：请求需要用户身份认证。

403 Forbidden：服务器理解请求，但拒绝执行，通常是权限不足。

404 Not Found：服务器找不到请求的资源，是最常见的客户端错误。

5. 5xx：服务器错误状态码

表示服务器在处理请求的过程中发生了错误。

500 Internal Server Error：服务器内部错误，无法完成请求。

502 Bad Gateway：作为网关或代理的服务器从上游服务器收到无效响应。

503 Service Unavailable：服务器暂时无法处理请求，通常是由于过载或维护。
#mermaid-svg-WluTQPqgGoeQm1g7{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-WluTQPqgGoeQm1g7 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-WluTQPqgGoeQm1g7 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-WluTQPqgGoeQm1g7 .error-icon{fill:#552222;}#mermaid-svg-WluTQPqgGoeQm1g7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WluTQPqgGoeQm1g7 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-WluTQPqgGoeQm1g7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WluTQPqgGoeQm1g7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WluTQPqgGoeQm1g7 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-WluTQPqgGoeQm1g7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WluTQPqgGoeQm1g7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WluTQPqgGoeQm1g7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WluTQPqgGoeQm1g7 .marker.cross{stroke:#333333;}#mermaid-svg-WluTQPqgGoeQm1g7 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WluTQPqgGoeQm1g7 p{margin:0;}#mermaid-svg-WluTQPqgGoeQm1g7 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-WluTQPqgGoeQm1g7 .cluster-label text{fill:#333;}#mermaid-svg-WluTQPqgGoeQm1g7 .cluster-label span{color:#333;}#mermaid-svg-WluTQPqgGoeQm1g7 .cluster-label span p{background-color:transparent;}#mermaid-svg-WluTQPqgGoeQm1g7 .label text,#mermaid-svg-WluTQPqgGoeQm1g7 span{fill:#333;color:#333;}#mermaid-svg-WluTQPqgGoeQm1g7 .node rect,#mermaid-svg-WluTQPqgGoeQm1g7 .node circle,#mermaid-svg-WluTQPqgGoeQm1g7 .node ellipse,#mermaid-svg-WluTQPqgGoeQm1g7 .node polygon,#mermaid-svg-WluTQPqgGoeQm1g7 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WluTQPqgGoeQm1g7 .rough-node .label text,#mermaid-svg-WluTQPqgGoeQm1g7 .node .label text,#mermaid-svg-WluTQPqgGoeQm1g7 .image-shape .label,#mermaid-svg-WluTQPqgGoeQm1g7 .icon-shape .label{text-anchor:middle;}#mermaid-svg-WluTQPqgGoeQm1g7 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-WluTQPqgGoeQm1g7 .rough-node .label,#mermaid-svg-WluTQPqgGoeQm1g7 .node .label,#mermaid-svg-WluTQPqgGoeQm1g7 .image-shape .label,#mermaid-svg-WluTQPqgGoeQm1g7 .icon-shape .label{text-align:center;}#mermaid-svg-WluTQPqgGoeQm1g7 .node.clickable{cursor:pointer;}#mermaid-svg-WluTQPqgGoeQm1g7 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-WluTQPqgGoeQm1g7 .arrowheadPath{fill:#333333;}#mermaid-svg-WluTQPqgGoeQm1g7 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WluTQPqgGoeQm1g7 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WluTQPqgGoeQm1g7 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-WluTQPqgGoeQm1g7 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-WluTQPqgGoeQm1g7 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-WluTQPqgGoeQm1g7 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-WluTQPqgGoeQm1g7 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WluTQPqgGoeQm1g7 .cluster text{fill:#333;}#mermaid-svg-WluTQPqgGoeQm1g7 .cluster span{color:#333;}#mermaid-svg-WluTQPqgGoeQm1g7 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-WluTQPqgGoeQm1g7 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-WluTQPqgGoeQm1g7 rect.text{fill:none;stroke-width:0;}#mermaid-svg-WluTQPqgGoeQm1g7 .icon-shape,#mermaid-svg-WluTQPqgGoeQm1g7 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-WluTQPqgGoeQm1g7 .icon-shape p,#mermaid-svg-WluTQPqgGoeQm1g7 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-WluTQPqgGoeQm1g7 .icon-shape .label rect,#mermaid-svg-WluTQPqgGoeQm1g7 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-WluTQPqgGoeQm1g7 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-WluTQPqgGoeQm1g7 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-WluTQPqgGoeQm1g7 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} HTTP状态码
1xx 信息
2xx 成功
3xx 重定向
4xx 客户端错误
5xx 服务器错误
200 OK
301 永久重定向
302 临时重定向
400 Bad Request
404 Not Found
500 Internal Error
503 Service Unavailable

五. HTTP连接管理

1. 短连接与长连接

HTTP/1.0默认使用短连接：每个HTTP请求/响应对都需要建立一个新的TCP连接，请求完成后立即关闭连接。这种方式的缺点是频繁的TCP连接建立和断开带来了较大的开销（每次都需要三次握手和四次挥手）。

HTTP/1.1引入了**长连接（Keep-Alive）**机制：TCP连接在发送完一个请求后不会立即关闭，而是保持打开状态，以便后续请求复用该连接。通过Connection: keep-alive头部（HTTP/1.1默认启用），客户端和服务器可以协商保持连接的时间。

长连接的优势在于减少了TCP连接建立的开销，提高了传输效率，特别是在请求大量小资源（如网页中的多个CSS、JS、图片文件）时效果尤为明显。
服务器客户端服务器客户端 #mermaid-svg-340ijj4zDzr9XHYC{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-340ijj4zDzr9XHYC .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-340ijj4zDzr9XHYC .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-340ijj4zDzr9XHYC .error-icon{fill:#552222;}#mermaid-svg-340ijj4zDzr9XHYC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-340ijj4zDzr9XHYC .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-340ijj4zDzr9XHYC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-340ijj4zDzr9XHYC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-340ijj4zDzr9XHYC .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-340ijj4zDzr9XHYC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-340ijj4zDzr9XHYC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-340ijj4zDzr9XHYC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-340ijj4zDzr9XHYC .marker.cross{stroke:#333333;}#mermaid-svg-340ijj4zDzr9XHYC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-340ijj4zDzr9XHYC p{margin:0;}#mermaid-svg-340ijj4zDzr9XHYC .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-340ijj4zDzr9XHYC text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-340ijj4zDzr9XHYC .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-340ijj4zDzr9XHYC .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-340ijj4zDzr9XHYC .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-340ijj4zDzr9XHYC .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-340ijj4zDzr9XHYC #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-340ijj4zDzr9XHYC .sequenceNumber{fill:white;}#mermaid-svg-340ijj4zDzr9XHYC #sequencenumber{fill:#333;}#mermaid-svg-340ijj4zDzr9XHYC #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-340ijj4zDzr9XHYC .messageText{fill:#333;stroke:none;}#mermaid-svg-340ijj4zDzr9XHYC .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-340ijj4zDzr9XHYC .labelText,#mermaid-svg-340ijj4zDzr9XHYC .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-340ijj4zDzr9XHYC .loopText,#mermaid-svg-340ijj4zDzr9XHYC .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-340ijj4zDzr9XHYC .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-340ijj4zDzr9XHYC .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-340ijj4zDzr9XHYC .noteText,#mermaid-svg-340ijj4zDzr9XHYC .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-340ijj4zDzr9XHYC .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-340ijj4zDzr9XHYC .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-340ijj4zDzr9XHYC .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-340ijj4zDzr9XHYC .actorPopupMenu{position:absolute;}#mermaid-svg-340ijj4zDzr9XHYC .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-340ijj4zDzr9XHYC .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-340ijj4zDzr9XHYC .actor-man circle,#mermaid-svg-340ijj4zDzr9XHYC line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-340ijj4zDzr9XHYC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} HTTP1.0 短连接 TCP三次握手 GET /1.html 200 OK TCP四次挥手 TCP三次握手 GET /2.html 200 OK TCP四次挥手 TCP三次握手 GET /3.html 200 OK TCP四次挥手
服务器客户端服务器客户端 #mermaid-svg-TL6qjz7KNpEJ2WZJ{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-TL6qjz7KNpEJ2WZJ .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .error-icon{fill:#552222;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .marker.cross{stroke:#333333;}#mermaid-svg-TL6qjz7KNpEJ2WZJ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-TL6qjz7KNpEJ2WZJ p{margin:0;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-TL6qjz7KNpEJ2WZJ text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-TL6qjz7KNpEJ2WZJ .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-TL6qjz7KNpEJ2WZJ #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .sequenceNumber{fill:white;}#mermaid-svg-TL6qjz7KNpEJ2WZJ #sequencenumber{fill:#333;}#mermaid-svg-TL6qjz7KNpEJ2WZJ #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .messageText{fill:#333;stroke:none;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .labelText,#mermaid-svg-TL6qjz7KNpEJ2WZJ .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .loopText,#mermaid-svg-TL6qjz7KNpEJ2WZJ .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-TL6qjz7KNpEJ2WZJ .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .noteText,#mermaid-svg-TL6qjz7KNpEJ2WZJ .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .actorPopupMenu{position:absolute;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-TL6qjz7KNpEJ2WZJ .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-TL6qjz7KNpEJ2WZJ .actor-man circle,#mermaid-svg-TL6qjz7KNpEJ2WZJ line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-TL6qjz7KNpEJ2WZJ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} HTTP1.1 长连接 TCP三次握手 GET /1.html 200 OK GET /2.html 200 OK GET /3.html 200 OK TCP四次挥手

2. 管道化与队头阻塞

HTTP/1.1还引入了**管道化（Pipelining）机制：客户端可以在收到前一个响应之前连续发送多个请求。然而，由于HTTP/1.x要求响应必须按照请求的顺序返回，如果第一个请求的处理时间较长，后续请求的响应即使已经准备好也必须等待，这就导致了队头阻塞（Head-of-Line Blocking）**问题。

HTTP/2通过引入二进制分帧层和多路复用机制彻底解决了队头阻塞问题，允许在一个TCP连接上同时传输多个请求和响应，且互不干扰。

六. HTTPS：安全的HTTP

1. 为什么需要HTTPS

标准的HTTP协议以明文方式传输数据，存在严重的安全隐患：

窃听风险：攻击者可以在网络传输路径上截获数据包，读取其中的敏感信息（如用户名、密码、银行卡号等）。

篡改风险：攻击者可以修改传输中的数据内容，例如注入恶意脚本、修改交易金额等。

冒充风险：攻击者可以伪造服务器身份，诱骗用户访问钓鱼网站。

HTTPS（HTTP Secure）通过在HTTP和TCP之间加入SSL/TLS安全层，解决了上述所有安全问题。

2. HTTPS的工作原理

HTTPS的核心是SSL/TLS协议，它通过以下机制保证通信安全：

加密传输：使用对称加密算法对传输的数据进行加密，即使数据被截获，攻击者也无法读取其内容。

身份认证：服务器通过数字证书向客户端证明自己的身份。证书由受信任的证书颁发机构（CA）签发，包含服务器的公钥和身份信息。

数据完整性：使用消息认证码（MAC）机制，确保数据在传输过程中未被篡改。
#mermaid-svg-mZxKxVtXMjei0jUb{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-mZxKxVtXMjei0jUb .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-mZxKxVtXMjei0jUb .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-mZxKxVtXMjei0jUb .error-icon{fill:#552222;}#mermaid-svg-mZxKxVtXMjei0jUb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-mZxKxVtXMjei0jUb .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-mZxKxVtXMjei0jUb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-mZxKxVtXMjei0jUb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-mZxKxVtXMjei0jUb .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-mZxKxVtXMjei0jUb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-mZxKxVtXMjei0jUb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-mZxKxVtXMjei0jUb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-mZxKxVtXMjei0jUb .marker.cross{stroke:#333333;}#mermaid-svg-mZxKxVtXMjei0jUb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-mZxKxVtXMjei0jUb p{margin:0;}#mermaid-svg-mZxKxVtXMjei0jUb .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-mZxKxVtXMjei0jUb .cluster-label text{fill:#333;}#mermaid-svg-mZxKxVtXMjei0jUb .cluster-label span{color:#333;}#mermaid-svg-mZxKxVtXMjei0jUb .cluster-label span p{background-color:transparent;}#mermaid-svg-mZxKxVtXMjei0jUb .label text,#mermaid-svg-mZxKxVtXMjei0jUb span{fill:#333;color:#333;}#mermaid-svg-mZxKxVtXMjei0jUb .node rect,#mermaid-svg-mZxKxVtXMjei0jUb .node circle,#mermaid-svg-mZxKxVtXMjei0jUb .node ellipse,#mermaid-svg-mZxKxVtXMjei0jUb .node polygon,#mermaid-svg-mZxKxVtXMjei0jUb .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-mZxKxVtXMjei0jUb .rough-node .label text,#mermaid-svg-mZxKxVtXMjei0jUb .node .label text,#mermaid-svg-mZxKxVtXMjei0jUb .image-shape .label,#mermaid-svg-mZxKxVtXMjei0jUb .icon-shape .label{text-anchor:middle;}#mermaid-svg-mZxKxVtXMjei0jUb .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-mZxKxVtXMjei0jUb .rough-node .label,#mermaid-svg-mZxKxVtXMjei0jUb .node .label,#mermaid-svg-mZxKxVtXMjei0jUb .image-shape .label,#mermaid-svg-mZxKxVtXMjei0jUb .icon-shape .label{text-align:center;}#mermaid-svg-mZxKxVtXMjei0jUb .node.clickable{cursor:pointer;}#mermaid-svg-mZxKxVtXMjei0jUb .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-mZxKxVtXMjei0jUb .arrowheadPath{fill:#333333;}#mermaid-svg-mZxKxVtXMjei0jUb .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-mZxKxVtXMjei0jUb .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-mZxKxVtXMjei0jUb .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-mZxKxVtXMjei0jUb .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-mZxKxVtXMjei0jUb .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-mZxKxVtXMjei0jUb .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-mZxKxVtXMjei0jUb .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-mZxKxVtXMjei0jUb .cluster text{fill:#333;}#mermaid-svg-mZxKxVtXMjei0jUb .cluster span{color:#333;}#mermaid-svg-mZxKxVtXMjei0jUb div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-mZxKxVtXMjei0jUb .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-mZxKxVtXMjei0jUb rect.text{fill:none;stroke-width:0;}#mermaid-svg-mZxKxVtXMjei0jUb .icon-shape,#mermaid-svg-mZxKxVtXMjei0jUb .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-mZxKxVtXMjei0jUb .icon-shape p,#mermaid-svg-mZxKxVtXMjei0jUb .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-mZxKxVtXMjei0jUb .icon-shape .label rect,#mermaid-svg-mZxKxVtXMjei0jUb .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-mZxKxVtXMjei0jUb .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-mZxKxVtXMjei0jUb .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-mZxKxVtXMjei0jUb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} HTTPS_加密传输
应用层

HTTP
安全层

SSL/TLS

加密/解密
传输层

TCP
网络层

IP
HTTP_明文传输
应用层

HTTP
传输层

TCP
网络层

3. SSL/TLS握手过程

在HTTPS通信开始之前，客户端和服务器需要进行SSL/TLS握手，协商加密参数并建立安全通道：

客户端问候：客户端发送支持的SSL/TLS版本、加密算法列表、随机数等信息。

服务器问候：服务器选择加密算法，发送服务器证书（包含公钥）和随机数。

证书验证：客户端验证服务器证书的有效性（检查是否由受信任CA签发、是否过期、域名是否匹配等）。

密钥交换：客户端生成预主密钥，使用服务器公钥加密后发送给服务器。双方根据预主密钥和之前的随机数生成会话密钥。

完成握手：双方发送Finished消息，确认握手成功。后续通信使用会话密钥进行对称加密。
服务器客户端服务器客户端 #mermaid-svg-1d1GKI1pxCjXKLKG{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-1d1GKI1pxCjXKLKG .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-1d1GKI1pxCjXKLKG .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-1d1GKI1pxCjXKLKG .error-icon{fill:#552222;}#mermaid-svg-1d1GKI1pxCjXKLKG .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-1d1GKI1pxCjXKLKG .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-1d1GKI1pxCjXKLKG .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-1d1GKI1pxCjXKLKG .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-1d1GKI1pxCjXKLKG .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-1d1GKI1pxCjXKLKG .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-1d1GKI1pxCjXKLKG .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-1d1GKI1pxCjXKLKG .marker{fill:#333333;stroke:#333333;}#mermaid-svg-1d1GKI1pxCjXKLKG .marker.cross{stroke:#333333;}#mermaid-svg-1d1GKI1pxCjXKLKG svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-1d1GKI1pxCjXKLKG p{margin:0;}#mermaid-svg-1d1GKI1pxCjXKLKG .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-1d1GKI1pxCjXKLKG text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-1d1GKI1pxCjXKLKG .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-1d1GKI1pxCjXKLKG .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-1d1GKI1pxCjXKLKG .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-1d1GKI1pxCjXKLKG .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-1d1GKI1pxCjXKLKG #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-1d1GKI1pxCjXKLKG .sequenceNumber{fill:white;}#mermaid-svg-1d1GKI1pxCjXKLKG #sequencenumber{fill:#333;}#mermaid-svg-1d1GKI1pxCjXKLKG #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-1d1GKI1pxCjXKLKG .messageText{fill:#333;stroke:none;}#mermaid-svg-1d1GKI1pxCjXKLKG .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-1d1GKI1pxCjXKLKG .labelText,#mermaid-svg-1d1GKI1pxCjXKLKG .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-1d1GKI1pxCjXKLKG .loopText,#mermaid-svg-1d1GKI1pxCjXKLKG .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-1d1GKI1pxCjXKLKG .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-1d1GKI1pxCjXKLKG .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-1d1GKI1pxCjXKLKG .noteText,#mermaid-svg-1d1GKI1pxCjXKLKG .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-1d1GKI1pxCjXKLKG .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-1d1GKI1pxCjXKLKG .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-1d1GKI1pxCjXKLKG .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-1d1GKI1pxCjXKLKG .actorPopupMenu{position:absolute;}#mermaid-svg-1d1GKI1pxCjXKLKG .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-1d1GKI1pxCjXKLKG .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-1d1GKI1pxCjXKLKG .actor-man circle,#mermaid-svg-1d1GKI1pxCjXKLKG line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-1d1GKI1pxCjXKLKG :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 握手完成使用会话密钥加密通信 ClientHello 支持的版本/算法/随机数 ServerHello 选择的算法/随机数 Certificate 服务器证书+公钥验证证书生成预主密钥 ClientKeyExchange 加密的预主密钥 ChangeCipherSpec Finished 解密预主密钥生成会话密钥 ChangeCipherSpec Finished

4. 如何证明HTTPS的安全性

要验证一个网站是否真正使用了HTTPS，可以通过以下方式：

浏览器地址栏：现代浏览器会在地址栏显示锁形图标，点击可以查看证书的详细信息，包括颁发机构、有效期、域名等。

抓包工具：使用Fiddler、Wireshark等工具抓包时，HTTPS流量显示为加密数据，无法直接读取内容。而HTTP流量则完全明文可见。

命令行工具：使用curl -v https://www.example.com可以查看TLS握手过程和证书信息。

七. HTTP状态管理：Cookie机制

1. HTTP的无状态特性

HTTP协议被设计为**无状态（Stateless）**的，即服务器不会保存关于客户端的任何信息，每个请求都是独立的。这种设计简化了服务器的实现，使得服务器可以更容易地扩展和负载均衡。

然而，无状态特性也带来了问题：对于需要保持用户状态的应用（如登录状态、购物车内容等），服务器无法区分不同请求是否来自同一个用户。为了解决这个问题，HTTP引入了Cookie机制。

2. Cookie的工作原理

Cookie是一种在客户端存储小型数据片段的机制，用于在多个请求之间保持状态信息。其工作流程如下：

第一次请求：客户端首次访问服务器，服务器在响应头部中包含Set-Cookie字段，将需要保存的状态信息发送给客户端。客户端（浏览器）收到后将其保存到本地。

后续请求：客户端在后续访问同一服务器时，会自动在请求头部中包含Cookie字段，将之前保存的Cookie数据发送给服务器。服务器通过解析Cookie内容，识别出用户的身份和状态。
服务器客户端服务器客户端 #mermaid-svg-iKBiK1TZ85GfhELa{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-iKBiK1TZ85GfhELa .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-iKBiK1TZ85GfhELa .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-iKBiK1TZ85GfhELa .error-icon{fill:#552222;}#mermaid-svg-iKBiK1TZ85GfhELa .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-iKBiK1TZ85GfhELa .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-iKBiK1TZ85GfhELa .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-iKBiK1TZ85GfhELa .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-iKBiK1TZ85GfhELa .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-iKBiK1TZ85GfhELa .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-iKBiK1TZ85GfhELa .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-iKBiK1TZ85GfhELa .marker{fill:#333333;stroke:#333333;}#mermaid-svg-iKBiK1TZ85GfhELa .marker.cross{stroke:#333333;}#mermaid-svg-iKBiK1TZ85GfhELa svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-iKBiK1TZ85GfhELa p{margin:0;}#mermaid-svg-iKBiK1TZ85GfhELa .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-iKBiK1TZ85GfhELa text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-iKBiK1TZ85GfhELa .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-iKBiK1TZ85GfhELa .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-iKBiK1TZ85GfhELa .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-iKBiK1TZ85GfhELa .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-iKBiK1TZ85GfhELa #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-iKBiK1TZ85GfhELa .sequenceNumber{fill:white;}#mermaid-svg-iKBiK1TZ85GfhELa #sequencenumber{fill:#333;}#mermaid-svg-iKBiK1TZ85GfhELa #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-iKBiK1TZ85GfhELa .messageText{fill:#333;stroke:none;}#mermaid-svg-iKBiK1TZ85GfhELa .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-iKBiK1TZ85GfhELa .labelText,#mermaid-svg-iKBiK1TZ85GfhELa .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-iKBiK1TZ85GfhELa .loopText,#mermaid-svg-iKBiK1TZ85GfhELa .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-iKBiK1TZ85GfhELa .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-iKBiK1TZ85GfhELa .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-iKBiK1TZ85GfhELa .noteText,#mermaid-svg-iKBiK1TZ85GfhELa .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-iKBiK1TZ85GfhELa .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-iKBiK1TZ85GfhELa .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-iKBiK1TZ85GfhELa .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-iKBiK1TZ85GfhELa .actorPopupMenu{position:absolute;}#mermaid-svg-iKBiK1TZ85GfhELa .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-iKBiK1TZ85GfhELa .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-iKBiK1TZ85GfhELa .actor-man circle,#mermaid-svg-iKBiK1TZ85GfhELa line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-iKBiK1TZ85GfhELa :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 浏览器保存Cookie GET /login $无Cookie$ 200 OK Set-Cookie: session_id=abc123 GET /profile Cookie: session_id=abc123 解析Cookie 识别用户身份 200 OK $用户个人资料$ GET /settings Cookie: session_id=abc123 200 OK $用户设置页面$

3. Cookie的属性

Cookie可以设置多种属性来控制其行为：

Expires/Max-Age：指定Cookie的过期时间。如果不设置，Cookie会在浏览器关闭时删除（会话Cookie）。

Domain：指定Cookie所属的域名，只有该域名及其子域名可以访问此Cookie。

Path：指定Cookie生效的路径前缀。

Secure：标记为Secure的Cookie只会在HTTPS连接中传输，防止明文传输时被窃取。

HttpOnly：标记为HttpOnly的Cookie无法通过JavaScript的document.cookie访问，可以有效防止XSS（跨站脚本攻击）窃取Cookie。

SameSite：控制Cookie在跨站请求中的发送行为，用于防止CSRF（跨站请求伪造）攻击。可选值为Strict、Lax和None。

4. Cookie的安全问题与防护

Cookie机制虽然解决了状态管理问题，但也引入了安全风险：

Cookie被盗：如果攻击者通过XSS漏洞或网络嗅探获取了用户的Cookie，就可以冒充用户身份进行操作。防护措施包括设置HttpOnly和Secure标志、使用HTTPS传输、定期更换Session ID等。

Cookie篡改：攻击者可能尝试修改Cookie中的值。防护措施包括在Cookie中加入签名或加密，服务器端验证Cookie的完整性。

Session Fixation攻击：攻击者诱导用户使用攻击者指定的Session ID登录，然后利用该Session ID冒充用户。防护措施包括在登录成功后重新生成Session ID。

八. URL的构成与解析

1. URL的组成部分

URL（Uniform Resource Locator，统一资源定位符）是互联网上资源的地址。一个完整的URL包含以下部分：

复制代码

http://www.example.com:8080/path/to/resource?key1=value1&key2=value2#fragment

协议（Scheme）：http或https，指定使用的协议。

主机（Host）：www.example.com，指定服务器域名或IP地址。

端口（Port）：8080，可选，指定服务器端口。HTTP默认80，HTTPS默认443。

路径（Path）：/path/to/resource，指定服务器上的资源路径。

查询字符串（Query String）：?key1=value1&key2=value2，可选，传递附加参数。

片段（Fragment）：#fragment，可选，指定资源内的锚点，不会发送到服务器。
#mermaid-svg-HgAZL7HFADz70tJp{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-HgAZL7HFADz70tJp .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-HgAZL7HFADz70tJp .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-HgAZL7HFADz70tJp .error-icon{fill:#552222;}#mermaid-svg-HgAZL7HFADz70tJp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-HgAZL7HFADz70tJp .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-HgAZL7HFADz70tJp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-HgAZL7HFADz70tJp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-HgAZL7HFADz70tJp .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-HgAZL7HFADz70tJp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-HgAZL7HFADz70tJp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-HgAZL7HFADz70tJp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-HgAZL7HFADz70tJp .marker.cross{stroke:#333333;}#mermaid-svg-HgAZL7HFADz70tJp svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-HgAZL7HFADz70tJp p{margin:0;}#mermaid-svg-HgAZL7HFADz70tJp .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-HgAZL7HFADz70tJp .cluster-label text{fill:#333;}#mermaid-svg-HgAZL7HFADz70tJp .cluster-label span{color:#333;}#mermaid-svg-HgAZL7HFADz70tJp .cluster-label span p{background-color:transparent;}#mermaid-svg-HgAZL7HFADz70tJp .label text,#mermaid-svg-HgAZL7HFADz70tJp span{fill:#333;color:#333;}#mermaid-svg-HgAZL7HFADz70tJp .node rect,#mermaid-svg-HgAZL7HFADz70tJp .node circle,#mermaid-svg-HgAZL7HFADz70tJp .node ellipse,#mermaid-svg-HgAZL7HFADz70tJp .node polygon,#mermaid-svg-HgAZL7HFADz70tJp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-HgAZL7HFADz70tJp .rough-node .label text,#mermaid-svg-HgAZL7HFADz70tJp .node .label text,#mermaid-svg-HgAZL7HFADz70tJp .image-shape .label,#mermaid-svg-HgAZL7HFADz70tJp .icon-shape .label{text-anchor:middle;}#mermaid-svg-HgAZL7HFADz70tJp .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-HgAZL7HFADz70tJp .rough-node .label,#mermaid-svg-HgAZL7HFADz70tJp .node .label,#mermaid-svg-HgAZL7HFADz70tJp .image-shape .label,#mermaid-svg-HgAZL7HFADz70tJp .icon-shape .label{text-align:center;}#mermaid-svg-HgAZL7HFADz70tJp .node.clickable{cursor:pointer;}#mermaid-svg-HgAZL7HFADz70tJp .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-HgAZL7HFADz70tJp .arrowheadPath{fill:#333333;}#mermaid-svg-HgAZL7HFADz70tJp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-HgAZL7HFADz70tJp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-HgAZL7HFADz70tJp .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-HgAZL7HFADz70tJp .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-HgAZL7HFADz70tJp .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-HgAZL7HFADz70tJp .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-HgAZL7HFADz70tJp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-HgAZL7HFADz70tJp .cluster text{fill:#333;}#mermaid-svg-HgAZL7HFADz70tJp .cluster span{color:#333;}#mermaid-svg-HgAZL7HFADz70tJp div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-HgAZL7HFADz70tJp .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-HgAZL7HFADz70tJp rect.text{fill:none;stroke-width:0;}#mermaid-svg-HgAZL7HFADz70tJp .icon-shape,#mermaid-svg-HgAZL7HFADz70tJp .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-HgAZL7HFADz70tJp .icon-shape p,#mermaid-svg-HgAZL7HFADz70tJp .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-HgAZL7HFADz70tJp .icon-shape .label rect,#mermaid-svg-HgAZL7HFADz70tJp .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-HgAZL7HFADz70tJp .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-HgAZL7HFADz70tJp .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-HgAZL7HFADz70tJp :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 完整URL
协议

http://
主机

www.example.com
端口

:8080
路径

/path/to/resource
查询

?key=value
片段

#section

URL中只能使用特定的字符集（ASCII字母、数字、部分特殊符号）。对于不在允许范围内的字符（如中文、空格、特殊符号等），需要进行URL编码（也称为百分号编码）。

URL编码将字符转换为%后跟两位十六进制数的形式。例如：

空格编码为%20或+

中文字符"协议"编码为%E5%8D%8F%E8%AE%AE

&编码为%26，以避免与参数分隔符冲突

浏览器在发送请求前会自动对URL进行编码，服务器在接收到请求后需要进行相应的解码处理。

九. HTTP协议的发展与演进

1. HTTP/1.0到HTTP/1.1

HTTP/1.1相比HTTP/1.0引入了多项重要改进：

默认长连接（Keep-Alive）

管道化请求（虽然实际应用受限）

分块传输编码（Chunked Transfer Encoding）

Host头部（支持虚拟主机）

更多的缓存控制机制

2. HTTP/2

HTTP/2于2015年发布，带来了革命性的变化：

二进制分帧：将数据分割为二进制帧，提高传输效率。

多路复用：在一个TCP连接上同时传输多个请求和响应，彻底解决队头阻塞。

头部压缩：使用HPACK算法压缩HTTP头部，减少传输开销。

服务器推送：服务器可以主动向客户端推送资源，减少请求延迟。

3. HTTP/3

HTTP/3基于QUIC协议 （基于UDP实现），进一步提升了性能：

使用UDP代替TCP，减少连接建立延迟。

内置TLS 1.3加密，握手更快。

连接迁移：网络切换时（如WiFi切换到4G）连接不会中断。

十. 总结

HTTP协议作为互联网的基石，其设计简洁而强大。本文从HTTP的本质出发，系统梳理了以下核心知识点：

请求与响应格式：HTTP请求和响应都是由报头（头部字段）和正文组成，中间用空行分隔。理解这种格式是进行HTTP编程和调试的基础。

GET与POST方法：GET用于获取资源，参数通过URL传递；POST用于提交数据，参数通过正文传递。两者在语义、安全性和使用场景上有明确区分。

状态码：1xx信息、2xx成功、3xx重定向、4xx客户端错误、5xx服务器错误。正确理解和使用状态码是设计良好API的关键。

连接管理：从HTTP/1.0的短连接到HTTP/1.1的长连接，再到HTTP/2的多路复用，连接管理机制的不断演进显著提升了Web性能。

HTTPS安全传输：通过SSL/TLS协议实现加密传输、身份认证和数据完整性保护，是现代Web应用的安全基石。

Cookie状态管理：在HTTP无状态特性的基础上，通过客户端存储和自动回传Cookie，实现了用户状态的跨请求保持。

掌握HTTP协议不仅有助于Web开发，也是理解现代互联网架构的必经之路。随着HTTP/2和HTTP/3的普及，HTTP协议仍在不断演进，但其核心设计理念------简洁、可扩展、无状态------将始终是指导其发展的基本原则。