什么是HTTP请求与响应

客户端与服务器的对话

当你在浏览器中打开一个网页，背后其实发生了一场"对话"。浏览器（客户端）发出请求（Request），服务器收到后返回响应（Response）。

这种对话遵循的规则就是 HTTP（HyperText Transfer Protocol，超文本传输协议）。

💡 类比：HTTP 就像餐厅的点菜流程。你（客户端）看菜单点菜（发送请求），服务员把你的需求告诉厨房（服务器），厨房做好菜端上来（返回响应）。

HTTP 请求的结构

一个 HTTP 请求由三部分组成：

实际的请求长什么样？

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

HTTP 响应的结构

实际的响应长什么样？

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

{
  "articles": [
    { "id": 1, "title": "Hello World" },
    { "id": 2, "title": "Learning HTTP" }
  ]
}

一次完整的网页加载过程

当你访问 https://example.com 时，浏览器和服务器之间不只是一次对话，而是多轮对话：

用代码发送HTTP请求

JavaScript（浏览器/Node.js）

// 使用 fetch API
const response = await fetch("https://api.example.com/articles");
const data = await response.json();
console.log(data);

// 带参数的请求
const response2 = await fetch("https://api.example.com/articles", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ title: "新文章", content: "内容..." }),
});

Python

import requests

# GET 请求
response = requests.get("https://api.example.com/articles")
data = response.json()
print(data)

# POST 请求
response = requests.post(
    "https://api.example.com/articles",
    json={"title": "新文章", "content": "内容..."}
)

在浏览器中查看HTTP请求

按 F12 打开开发者工具 → 点击 Network（网络） 标签，就能看到页面加载的所有HTTP请求：

🎯 AI编程小贴士：当接口调用出问题时，打开 Network 面板查看请求和响应的详细信息，是定位问题最快的方式。你还可以把这些信息截图发给AI帮你分析。

小结

• HTTP 是客户端和服务器之间通信的协议
• 请求由方法、路径、请求头、请求体组成
• 响应由状态码、响应头、响应体组成
• 一次网页加载通常包含多个HTTP请求
• 浏览器 F12 → Network 是查看HTTP请求的利器