Day 12 - HTTP 协议详解

今天学完你能做什么

• 理解浏览器和服务器怎么"对话"
• 看懂 HTTP 请求和响应的结构
• 知道 GET/POST/PUT/DELETE 什么时候用
• 理解状态码的含义（200/404/500 等）

---

一、HTTP 是什么？——网上的"快递协议"

当你打开一个网页，发生了什么？

你（浏览器）                    服务器
    │                             │
    │  ──── 我要看首页 ──────→    │   （HTTP 请求）
    │                             │
    │  ←──── 给你首页 ────────    │   （HTTP 响应）
    │                             │

HTTP 就是浏览器和服务器之间通信的"语言"。 就像快递有标准的面单格式（收件人、地址），HTTP 也有标准的格式。

---

二、HTTP 请求的结构——快递面单

一个 HTTP 请求包含三部分：

┌─────────────────────────────┐
│  请求行（Request Line）       │  → 要干什么？去哪？
├─────────────────────────────┤
│  请求头（Headers）           │  → 附加信息（谁发的？什么格式？）
├─────────────────────────────┤
│  请求体（Body）              │  → 要传的数据（可选）
└─────────────────────────────┘

2.1 实际例子

POST /api/users HTTP/1.1
Host: api.example.com
Content-Type: application/json
Authorization: Bearer abc123

{
    "name": "张三",
    "email": "zhangsan@test.com"
}

解读：

• POST → 要创建一个新用户
• /api/users → 接口路径
• Content-Type: application/json → 发送的是 JSON 数据
• 下面的 JSON → 具体的用户数据

---

三、HTTP 方法——“动词”

方法	含义	类比	什么时候用
GET	获取数据	看书	访问网页、查列表、搜东西
POST	创建数据	写新的一页	注册、登录、提交表单
PUT	完整更新	撕掉重写	编辑用户全部信息
PATCH	部分更新	涂改几个字	只改用户名
DELETE	删除数据	撕掉一页	删除用户、删除文章

// GET —— 获取数据（参数通常在 URL 里）
fetch("https://api.example.com/users?page=1&size=20");

// POST —— 创建数据（数据放在 Body 里）
fetch("https://api.example.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "张三", email: "zs@test.com" })
});

// PUT —— 完整替换
fetch("https://api.example.com/users/1", {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "张三改", email: "new@test.com" })
});

// DELETE —— 删除
fetch("https://api.example.com/users/1", {
    method: "DELETE"
});

---

四、HTTP 状态码——服务器的"回复"

4.1 五大类

范围	含义	记忆法
1xx	信息	知道了，继续
2xx	成功	搞定了！
3xx	重定向	去别的地方找
4xx	客户端错误	你的问题
5xx	服务器错误	我的问题

4.2 常见状态码速查

状态码	含义	什么时候遇到
200	OK	一切正常 ✅
201	Created	创建成功 ✅
301	永久重定向	网址换了
302	临时重定向	暂时跳转
304	未修改	用缓存就行
400	Bad Request	请求参数错了
401	Unauthorized	没登录
403	Forbidden	没权限
404	Not Found	找不到页面/数据
500	Internal Server Error	服务器崩了
502	Bad Gateway	网关错误
503	Service Unavailable	服务器维护中

最常写代码遇到的：200、400、401、404、500。

---

五、请求头和响应头——附加信息

常用请求头

头部	含义	例子
Content-Type	发送的数据格式	application/json
Authorization	身份令牌	Bearer eyJhbG...
Cookie	携带 Cookie	sessionId=abc123
User-Agent	浏览器信息	Mozilla/5.0...
Accept	希望接收的格式	application/json

常用响应头

头部	含义	例子
Content-Type	返回的数据格式	application/json
Set-Cookie	设置 Cookie	session=xyz; HttpOnly
Cache-Control	缓存策略	max-age=3600
Access-Control-Allow-Origin	跨域允许	* 或具体域名

---

六、RESTful API —— 接口设计的"规范"

RESTful 是一种 API 设计风格，核心思想：用 URL 表示资源，用 HTTP 方法表示操作。

GET    /users          → 获取用户列表
GET    /users/1        → 获取 ID 为 1 的用户
POST   /users          → 创建新用户
PUT    /users/1        → 完整更新用户 1
PATCH  /users/1        → 部分更新用户 1
DELETE /users/1        → 删除用户 1

GET    /users/1/orders → 获取用户 1 的所有订单

---

七、在代码中发 HTTP 请求

7.1 浏览器：fetch

async function getUsers() {
    try {
        const response = await fetch("https://api.example.com/users");

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();
        console.log(data);
    } catch (err) {
        console.error("请求失败:", err);
    }
}

7.2 Node.js：各种 HTTP 库

// 使用 axios（最流行）
import axios from "axios";

const { data } = await axios.get("https://api.example.com/users");
const result = await axios.post("https://api.example.com/users", {
    name: "张三"
});

---

八、HTTPS —— HTTP 的安全版

HTTP  → 明文传输（别人能偷看）
HTTPS → 加密传输（别人看不到）

就像：
HTTP  → 明信片（谁都能看）
HTTPS → 密封信封（只有收件人能看）

---

今日小结

┌──────────────────────────────────────────┐
│                                          │
│  HTTP = 浏览器和服务器通信的语言           │
│                                          │
│  方法：GET查 POST增 PUT改 DELETE删        │
│                                          │
│  状态码：2xx成功 4xx你的错 5xx我的错       │
│  200 OK / 404 找不到 / 500 服务器炸了     │
│                                          │
│  RESTful：URL 表资源，方法表操作           │
│                                          │
│  fetch() 或 axios 发请求                 │
│                                          │
│  口诀：GET 拿 POST 发，状态码看是哪个岔    │
│                                          │
└──────────────────────────────────────────┘