Skip to content

Latest commit

 

History

History
136 lines (89 loc) · 6.78 KB

File metadata and controls

136 lines (89 loc) · 6.78 KB

← 模块首页 · 下一章: 数据建模 →

01: 互联网是怎么工作的(HTTP 请求与响应)

一句话:你在浏览器输入一个网址,按下回车,发生了什么?

为什么 Coding Agent 用户需要懂这个

当你让 Claude Code 或 Cursor"加一个页面"时,你其实在要求它做一件非常具体的事:创建一个 URL,让服务器在收到这个 URL 的请求时返回一段 HTML 响应。

如果你不理解"页面 = URL = 请求 + 响应"这个等式,你就没法准确描述你想要什么。你可能会说"加一个关于我们的页面",但你真正需要说的是"加一个 /about 路由,返回公司介绍页面"。

后一种说法,AI 能更准确地执行。

核心心智模型

餐厅点餐类比

整个互联网的运作逻辑,和去餐厅吃饭差不多:

餐厅 互联网
你(顾客) 浏览器(Browser)
你想吃的菜名 网址 / URL
你的点菜单 请求(Request)
厨房 服务器(Server)
端上来的菜 响应(Response)

流程是这样的:

  1. 你(浏览器)走进餐厅,告诉服务员你要什么(输入 URL)
  2. 服务员把你的点菜单递给厨房(发送 HTTP 请求)
  3. 厨房做菜(服务器处理请求、查数据库、生成页面)
  4. 菜端上来(服务器返回 HTTP 响应)
  5. 你看到菜了(浏览器渲染页面)

每一次你在网上点击一个链接、提交一个表单、刷新一个页面,都是在重复这个过程。没有例外。

HTTP 方法:你在对服务器说什么

不是所有请求都一样。最常用的两种:

  • GET — "给我看一下这个东西"。你打开一个页面、查看一篇文章,都是 GET 请求。就像在餐厅看菜单,你只是在看,没有改变任何东西。
  • POST — "我要提交一些信息"。你注册一个账号、提交一个表单、发布一条评论,都是 POST 请求。就像正式点菜——你在告诉厨房"请做这道菜"。

还有 PUT/PATCH(修改)和 DELETE(删除),但 GET 和 POST 是最基础的两个。理解了这两个,其他的都是变体。

URL 的结构

一个 URL 不是一串随机字符,它有明确的结构:

https://www.example.com/users/123?tab=posts
│       │               │         │
协议     域名             路径      查询参数
  • 协议(Protocol):https:// — 通信规则,https 表示加密的
  • 域名(Domain):www.example.com — 服务器的地址,就像餐厅的名字和位置
  • 路径(Path):/users/123 — 你想要的具体资源,就像菜单上的菜名
  • 查询参数(Query String):?tab=posts — 额外的要求,就像"少辣"、"多加醋"

当你让 AI"加一个用户详情页面"时,你其实在定义一个新的路径(比如 /users/:id),这个路径在收到 GET 请求时返回对应用户的信息。

"动态"意味着什么

这是一个关键概念:同一个 URL 模式,可以返回不同的内容

/users/1/users/2 的 URL 结构一样,但返回的是不同用户的信息。这就是"动态"的意思——页面不是提前写好的文件,而是服务器根据请求中的参数,实时从数据库里查出数据,拼装成页面返回给你。

这和静态网页(一个 HTML 文件对应一个页面)完全不同。理解这一点,你才能理解为什么现代应用都需要数据库。

状态码:服务器在告诉你发生了什么

每个响应都会带一个三位数的状态码,告诉浏览器"结果怎么样":

状态码 含义 餐厅类比
200 成功(OK) 菜上了,一切正常
301/302 重定向(Redirect) "这道菜改名了,帮你换一个"
404 找不到(Not Found) "菜单上没有这道菜"
403 没有权限(Forbidden) "这是 VIP 专属,你不能点"
500 服务器内部错误(Internal Server Error) "厨房着火了"

当你的应用报错时,第一步就是看状态码。404 说明 URL 路径写错了或者路由没配置;500 说明服务器端的代码有 bug。这是最基本的排错信息。

常见误区

误区 1:"网页是一个文件"

很多人以为每个网页都对应服务器上的一个 HTML 文件。在静态网站时代确实如此,但现代 Web 应用完全不同——每个页面都是服务器收到请求后动态生成的响应。同一个 URL,登录用户和未登录用户看到的内容可能完全不同。

误区 2:"前端和后端是两个独立的东西"

前端和后端不是两个独立的世界,它们通过 HTTP 请求紧密连接。前端(浏览器)发送请求,后端(服务器)处理请求并返回响应。理解它们之间的这条"管道"比分别理解两端更重要。

这个概念在 Agentic Coding 中的应用

理解 HTTP 请求-响应模型后,你在 Agentic Coding 模块中会更顺畅:

  • Week 2(全栈开发):你会用 AI 构建一个完整的 Web 应用。每一个页面、每一个表单提交,都是一次 HTTP 请求-响应。理解这个模型后,你能更准确地描述你要的功能。
  • Week 3(MCP 服务器):MCP 协议本质上也是基于请求-响应模式的通信。理解了 HTTP,你对 MCP 的理解会快很多。
  • 调试:当应用报错时,你的第一反应应该是"这是哪一步出了问题?是请求没发出去?是服务器处理出错?还是响应格式不对?"

动手试一试

不需要安装任何东西,点开就能练:

练习 1:看一个真实的 HTTP 请求

  1. 打开浏览器,按 F12(或右键 → 检查)打开开发者工具
  2. 切换到 Network(网络)标签
  3. 在地址栏输入任意网址(比如 https://httpbin.org/get)并回车
  4. 观察 Network 面板里出现的请求:请求方法(GET)、状态码(200)、响应内容(JSON)
  5. 这就是一个完整的 HTTP 请求-响应过程

练习 2:发送不同类型的请求

打开 httpbin.org — 这是一个专门用来测试 HTTP 请求的免费服务:

  • 点击 /get → 看 GET 请求返回什么
  • 点击 /status/404 → 体验一个 404 状态码
  • 点击 /status/500 → 体验一个服务器错误

练习 3:理解 URL 结构

观察这个 URL,尝试拆解它的组成部分:

https://www.google.com/search?q=coding+agent&hl=zh
  • 协议是什么?域名是什么?路径是什么?查询参数有哪些?
  • 试着修改 q= 后面的内容,看搜索结果怎么变化

下一步

02: 数据建模 — 最高杠杆的技能


← 模块首页 · 下一章: 数据建模 →