Skip to content

HTTP

学习 HTTP——传输每个网页的协议，以及描述响应的状态码。

你将学到

  • HTTP 是什么、请求与响应如何工作
  • 常见 HTTP 方法（GET、POST、PUT、DELETE）的含义
  • 状态码如何分类响应
  • HTTP 与 HTTPS 的区别

概念讲解

HTTP

HTTP（HyperText Transfer Protocol，超文本传输协议）是规定客户端与服务器在 Web 上如何通信的一套规则。浏览器每次加载页面，都在和服务器说 HTTP。理解 HTTP 就是理解 Web 的对话。

请求与响应

一次 HTTP 交互分两部分：

请求（客户端 → 服务器）：

GET /users/42 HTTP/1.1
Host: api.example.com
Accept: application/json

响应（服务器 → 客户端）：

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

{"id": 42, "name": "Ada"}

请求有方法、路径和头。响应有状态码、头和体。

HTTP 方法

| 方法 | 用途 | |--------|---------| | GET | 读数据（取页面或资源） | | POST | 提交数据（创建新资源） | | PUT | 整体替换某资源 | | PATCH | 部分更新某资源 | | DELETE | 删除某资源 |

GET 和 POST 最常见。GET 绝不应改数据；POST 用于表单和创建。

状态码

首位数字表示类别：

  • 2xx —— 成功（200 OK、201 Created）。
  • 3xx —— 重定向（301 Moved、304 Not Modified）。
  • 4xx —— 客户端错误（404 Not Found、401 Unauthorized）。
  • 5xx —— 服务器错误（500 Internal Server Error、503 Service Unavailable）。

出问题时，状态码告诉你谁的锅：4xx 是你请求有问题，5xx 是服务器挂了。

HTTPS

HTTPS 是用 TLS 加密的 HTTP。"S"代表 Secure。没有它，流量是明文——网络上任何人都能读到密码和 cookie。现代浏览器大多功能都要求 HTTPS，敏感数据绝不应走明文 HTTP。

示例代码

              // 用 HTTP GET 从 API 取数据
async function getUser(id) {
  const response = await fetch(`https://api.example.com/users/${id}`);

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

  const user = await response.json();
  return user;
}

// 用 HTTP POST 发送数据
async function createUser(data) {
  const response = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });
  return response.json();
}

fetch() 是浏览器内置 HTTP 客户端。第一次调用做 GET 并解析 JSON；第二次发带 JSON 体的 POST。检查 response.ok 处理非 2xx 状态码。

动手试一试

  • JWT Decoder

    JWT 在 HTTP Authorization 头里传输。解码一个看服务器发的声明。

  • Hash Generator

    ETag 和完整性校验用经 HTTP 传输的哈希。生成一个看内容寻址如何工作。

常见错误

错误写法

在 fetch() 里忽略非 2xx 响应。

正确做法

fetch 在 404 或 500 时不会抛错——只有网络故障才抛。必须检查 response.ok 或 response.status 并显式处理错误。

错误写法

用 GET 在 URL 里传敏感数据。

正确做法

URL 会被服务器、代理记录并保存在浏览器历史。敏感数据用 POST 请求体，且永远走 HTTPS。

相关资源

相关指南

练习 HTTP

2 个练习

练习 HTTP

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误