跳至正文

理解HTTP请求/响应 📡

当您访问网站或使用应用程序时，计算机和服务器如何通信？它们使用一种叫做HTTP的规则！让我以简单的方式解释，即使是初学者也能理解。

用日常生活比喻HTTP？​

让我们把HTTP比作餐厅点餐。

餐厅的故事 🍽️​

1. 顾客："请给我意大利面！"（请求）
2. 服务员：传达给厨房
3. 厨房：烹饪意大利面
4. 服务员："您的意大利面来了！"（响应）
5. 顾客：收到意大利面

HTTP也一样：

1. 浏览器："请给我index.html！"（HTTP请求）
2. 服务器：查找文件
3. 服务器："这里是！"（HTTP响应）
4. 浏览器：显示页面

HTTP的定义​

HTTP (HyperText Transfer Protocol)

  • Web浏览器和服务器交换数据的规则
  • 协议 = 约定的规则
  • Web的基础通信方法

HTTP请求/响应流程​

┌─────────┐                              ┌─────────┐
│         │   ── HTTP请求 (Request) →    │         │
│ 浏览器  │                              │  服务器 │
│         │   ← HTTP响应 (Response) ──   │         │
└─────────┘                              └─────────┘

完整过程​

  1. 请求 (Request)：浏览器向服务器请求某些内容
  2. 处理 (Processing)：服务器处理请求
  3. 响应 (Response)：服务器将结果发送给浏览器
  4. 渲染 (Rendering)：浏览器在屏幕上显示

HTTP方法（请求方法）​

这些是告诉服务器**"如何"**操作的动词。

1. GET 📖​

"获取" - 请求数据

GET /products/123

示例：

  • 查看网页
  • 获取搜索结果
  • 查看产品列表

特点：

  • 只获取数据
  • 不修改服务器数据
  • 数据显示在URL中
  • 可以添加书签

实际使用：

https://google.com/search?q=javascript
                         └───────┬──────┘
                         GET参数

2. POST 📝​

"创建" - 向服务器发送新数据

POST /users
{
  "name": "李明",
  "email": "liming@example.com"
}

示例：

  • 会员注册
  • 写文章
  • 下订单

特点：

  • 在服务器上创建数据
  • 数据在正文（Body）中
  • 数据不显示在URL中
  • 不能添加书签

3. PUT ✏️​

"修改" - 完全替换现有数据

PUT /users/123
{
  "name": "王芳",
  "email": "wangfang@example.com"
}

示例：

  • 修改整个个人资料
  • 修改整篇文章

4. PATCH 🔧​

"部分修改" - 只修改现有数据的一部分

PATCH /users/123
{
  "email": "newemail@example.com"
}

示例：

  • 只更改电子邮件
  • 只更改密码

5. DELETE 🗑️​

"删除" - 删除数据

DELETE /users/123

示例：

  • 删除账户
  • 删除文章
  • 删除产品

HTTP方法比较表​

方法用途数据修改数据位置
GET查询❌URL
POST创建✅Body
PUT完全修改✅Body
PATCH部分修改✅Body
DELETE删除✅URL

HTTP请求结构​

GET /api/users?page=1 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer token123

{正文数据（POST、PUT、PATCH时）}

组成部分​

  1. 请求行：GET /api/users HTTP/1.1

    • 方法：GET
    • 路径：/api/users
    • HTTP版本：1.1

  2. 头部（Headers）：附加信息

    Host: 哪个服务器？
    User-Agent: 哪个浏览器？
    Accept: 接收什么格式？
    Authorization: 认证信息

  3. 正文（Body）：实际数据（POST、PUT、PATCH）

HTTP响应结构​

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 1234

{
  "id": 1,
  "name": "李明"
}

组成部分​

  1. 状态行：HTTP/1.1 200 OK

    • HTTP版本：1.1
    • 状态码：200
    • 状态消息：OK

  2. 头部（Headers）：响应信息

    Content-Type: 什么格式？
    Content-Length: 数据大小

  3. 正文（Body）：实际数据

HTTP状态码 🚦​

服务器用数字告诉你**"发生了什么"**。

2xx - 成功 ✅​

代码含义说明
200OK成功！
201Created已创建新内容
204No Content成功但没有内容

3xx - 重定向 🔄​

代码含义说明
301Moved Permanently永久移动
302Found临时在别处
304Not Modified未修改，使用缓存

4xx - 客户端错误 ❌​

代码含义说明
400Bad Request请求错误
401Unauthorized需要登录
403Forbidden没有权限
404Not Found找不到
429Too Many Requests请求过多

5xx - 服务器错误 🔥​

代码含义说明
500Internal Server Error服务器出现问题
502Bad Gateway网关错误
503Service Unavailable服务不可用
提示

在HTTP Status Guide查看所有状态码！

实践示例​

示例 1：搜索 🔍​

请求：

GET https://google.com/search?q=javascript

响应：

HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>搜索结果...</body>
</html>

示例 2：登录 🔐​

请求：

POST https://api.example.com/login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "password123"
}

响应（成功）：

HTTP/1.1 200 OK
Content-Type: application/json

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "id": 1,
    "name": "李明"
  }
}

响应（失败）：

HTTP/1.1 401 Unauthorized
Content-Type: application/json

{
  "error": "Invalid email or password"
}

示例 3：创建文章 ✍️​

请求：

POST https://api.example.com/posts
Content-Type: application/json
Authorization: Bearer token123

{
  "title": "第一篇文章",
  "content": "你好！"
}

响应：

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": 42,
  "title": "第一篇文章",
  "content": "你好！",
  "createdAt": "2025-01-23T10:30:00Z"
}

示例 4：修改个人资料 ✏️​

请求：

PATCH https://api.example.com/users/me
Content-Type: application/json
Authorization: Bearer token123

{
  "email": "newemail@example.com"
}

响应：

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": 1,
  "name": "李明",
  "email": "newemail@example.com"
}

示例 5：删除文章 🗑️​

请求：

DELETE https://api.example.com/posts/42
Authorization: Bearer token123

响应：

HTTP/1.1 204 No Content

理解HTTP头部​

常用请求头部​

Content-Type: application/json    # 发送的数据格式
Accept: application/json           # 想要接收的数据格式
Authorization: Bearer token123     # 认证令牌
User-Agent: Mozilla/5.0...         # 浏览器信息
Cookie: session=abc123             # Cookie

常用响应头部​

Content-Type: application/json    # 响应数据格式
Content-Length: 1234               # 数据大小
Set-Cookie: session=abc123         # 设置Cookie
Cache-Control: no-cache            # 缓存设置
Access-Control-Allow-Origin: *     # CORS设置

使用HTTP工具​

用API Tester实践​

在API Tester中：

  1. 输入URL
  2. 选择方法（GET、POST、PUT、DELETE）
  3. 添加头部
  4. 编写正文（POST、PUT、PATCH）
  5. 点击Send按钮！

示例实践​

GET请求测试：

URL: https://api.github.com/users/github
Method: GET

结果：

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  ...
}

常见问题（FAQ）​

Q1：何时使用GET和POST？​

A：

  • GET：查询数据（只读）
  • POST：创建数据（写入）

Q2：PUT和PATCH的区别？​

A：

  • PUT：替换全部 
    PUT /users/1
    {"name": "王芳", "email": "wangfang@example.com", "age": 25}
  • PATCH：只修改部分 
    PATCH /users/1
    {"email": "newemail@example.com"}

Q3：为什么会出现404错误？​

A：找不到请求的页面或数据时！

  • URL拼写错误
  • 页面已删除
  • 路径错误

Q4：500错误是什么？​

A：服务器出现问题了！

  • 服务器代码错误
  • 数据库连接失败
  • 服务器过载

Q5：HTTPS和HTTP有什么不同？​

A：增加了安全性！

  • HTTP：明文传输（任何人都能看到）
  • HTTPS：加密传输（安全）🔒

CRUD和HTTP方法​

CRUD = 数据的基本操作

CRUD含义HTTP方法
Create创建POST
Read读取GET
Update更新PUT / PATCH
Delete删除DELETE

示例：博客文章​

查看文章列表：  GET /posts
阅读文章：      GET /posts/123
创建文章：      POST /posts
修改文章：      PUT /posts/123
删除文章：      DELETE /posts/123

RESTful API​

REST = 有效使用HTTP的设计方法

良好的API设计 ✅​

GET    /users          # 用户列表
GET    /users/123      # 特定用户
POST   /users          # 创建用户
PUT    /users/123      # 修改用户
DELETE /users/123      # 删除用户

不良的API设计 ❌​

GET  /getUsers
POST /createUser
POST /updateUser
POST /deleteUser

下一步 🚀​

如果你理解了HTTP：

  1. ✅ API Tester - 直接发送HTTP请求
  2. ✅ HTTP Status Guide - 学习所有状态码
  3. ✅ cURL Converter - 转换cURL命令
  4. ✅ 什么是API？ - 重新理解API概念
  5. ✅ 理解JSON数据格式 - HTTP交换的数据

总结​

HTTP是Web的基础！🌐

要记住的要点：

  • GET：查询（读取）
  • POST：创建（写入）
  • PUT/PATCH：修改
  • DELETE：删除
  • 状态码：2xx（成功）、4xx（客户端错误）、5xx（服务器错误）

用API Tester直接实验就会很快熟悉！🎉

现在你理解网站和服务器如何通信了吗？