网页请求与数据包 ——HTTP、JSON 和网络仪表盘

你好，我是吴老师。

这份是给你自己读的——不用等我讲，你一段一段往下看，看到让你停下来的地方，就照着做一遍。看不懂的整段复制给 AI，加一句"请一次只解释一个概念，讲完问我一个小问题"。

读完之后，你应该能：说出 HTTP 的"请求/响应"各是什么；说出 JSON 长什么样、为什么叫"机器之间的便签"；解释 http.GET() 和 deserializeJson() 各自在干什么；亲手让板子从网上取到天气并显示出来；说出断网/超时/空数据三种失败分别该怎么提示。

用时：60–90 分钟。准备：板子、数据线、已接入板卡 Skill 的 WorkBuddy、能上外网的教室 WiFi、一台装了 Python 的电脑（demo03 用，不需要外网）。

一、从"局域网传话"到"出门上互联网"

第 18 课板子学会了在局域网里用 TCP/UDP 传话——但那都发生在你自己家这一小片网里。

今天的问题：板子能不能像浏览器一样，出门到互联网上，向一个不认识的服务器要数据？

你打开网页，其实是在向远处的服务器"点菜"。网页是菜、聊天机器人是菜、天气预报也是菜。而"点菜"有一套全世界服务器都听得懂的规矩——HTTP。

💡 本课一句话：HTTP 是"板子和云端对话的规矩"——板子发请求（我要什么），云端回响应（这就是你要的）。TCP 负责把话可靠送到，HTTP 负责规定话怎么说。

二、一次看得见的点菜：问云端要天气

请使用课程的 esp32s3-touchboard-hardware-dev Skill，
烧录本课配套程序 assets/codes/demo01_weather_card：
板子会向 api.open-meteo.com 发 HTTP 请求要广州天气，解析 JSON 后显示天气卡片。
烧录前把 YOUR_WIFI_SSID / YOUR_WIFI_PASSWORD 改成教室 WiFi。
烧录后告诉我板子屏幕显示了什么。

几秒后屏幕出现：广州 · 28.5℃ · 多云 · 湿度 60%。

把"发请求→收响应"想成点菜：

三、拆开包裹：云端回的话是一整段文字

请改烧录 assets/codes/demo02_json_raw_view：
屏幕上半屏黑底白字显示服务器回的"原文"，下半屏显示解析出来的字段。
WiFi 占位符改成教室 WiFi。烧录后告诉我：原文里看到哪些英文单词？

上半屏你会看到类似：

{"latitude":23.13,"longitude":113.26,...,"current":{"time":"...","temperature_2m":28.5,
"relative_humidity_2m":60,"weather_code":3,"wind_speed_10m":3.2,...}}

下半屏是四个字段：temperature_2m → 温度 28.5℃；weather_code → 天气 3 多云；relative_humidity_2m → 湿度 60%；wind_speed_10m → 风速 3.2 m/s。

28.5 在原文里叫什么？ 它叫 temperature_2m。云端把所有数据打包成一整段文字扔过来，让接收方自己按名字找。这段文字的格式就是 JSON。

四、机器之间的便签：JSON

{
  "city": "广州",
  "temp": 28.5,
  "weather": "多云",
  "humidity": 60
}

• 大括号 { } = 这是一张便签
• 每行一个格子：左边名字（key），右边值（value）
• 值可以是数字（28.5）或带引号的文字（"多云"）

⚠️ 比喻有边界：说 JSON "像便签"是指它用名字+值把数据写清楚，方便机器按名字取。它的格式其实非常严格——少个逗号、多个引号，整张便签作废（后面你会亲眼看到）。

一句话：JSON 是机器之间写便签的格式——每条数据先起名字，再填值。

五、两个代码名，够了

http.GET()——板子喊"我要 GET 这一份"

点链接、刷新网页，都在做 GET——"把那个网址对应的东西给我"。http.GET() 把请求发出去、等云端回话、告诉你成没成：200 = 成功，负数 = 没谈成。

deserializeJson()——把便签翻译成字典

云端把数据"打包"成一段 JSON 文字发过来（序列化）；板子拿到后用 deserializeJson() 拆包（反序列化）。拆完就能按名字取：doc["temp"] 就是 28.5。和字典查词一模一样：给名字，还值。

六、委托清单：让板子出门三次

第三个不用外网。先在电脑上运行：

python server/server.py      # assets/codes/ 目录下

请改烧录 assets/codes/demo03_error_states：
把 YOUR_PC_IP 改成 server.py 打印的 IP，WiFi 占位符改成教室 WiFi。
烧录后告诉我板子显示了什么。

正常时板子显示笑脸："广州 28.5℃ 多云 · 一切正常"。

七、把云端"弄坏"几次（先预测，再验证）

在 server.py 窗口按键，每按一次，板子 8 秒内变一次脸：

关键反转：同一个请求，失败的方式有这么多，而且每种都值得一句不同的提示。如果程序只会傻等，云端睡着了它就永远卡住——白屏一片，你以为板子坏了。好程序不是祈祷不失败，而是每种失败都有个说法。 这就叫"为失败设计"。

八、一条完整的"网上要数据"链路

板子出门要数据（HTTP/JSON）：
    连上 WiFi（拿到门牌号，第 17 课）
    发一个 HTTP 请求：http.GET()      ← 点菜
    云端回一整段文字（JSON）          ← 上菜
    检查返回码：200=成功 / 负数=没谈成 / 别的=云端报错
    成功 → deserializeJson() 拆包 → 按名字取 temp / weather ...
    失败 → 分清 断网 / 超时 / 空数据 / 格式错，各给一句提示

一句记牢：HTTP 规定话怎么说，JSON 规定数据怎么打包，解析器负责拆包取数，失败——永远要有话说。

九、故障排查：云端没回话怎么办

老规矩：先分清"观察"和"推测"。

把现象如实告诉 AI，一次让它教你查一件事。串口波特率 115200，重点看 code=200 / code=-11——那是板子替你读的"诊断报告"。

十、过关检查

不看 AI，自己说：

1. 浏览器打开网页，本质上在做什么？HTTP 的请求/响应分别是什么？
2. JSON 长什么样？名字和值分别叫什么？
3. http.GET() 替板子做什么？200 和负数分别是什么意思？
4. deserializeJson() 替板子做什么？为什么叫"反序列化"？
5. 云端"睡着"和"网络走丢"是同一件事吗？为什么要分开提示？
6. 云端回 HTTP 500 算断网吗？板子该怎么显示？

十一、还能玩什么

剧透：第 6 章让板子和 AI 聊天，走的全是今天这条 HTTP/JSON 链路——只是云端从天气服务换成大模型。今天学会的每一步，到时候一个都不浪费。