Web前端开发技术

Appearance

curl 收发 HTTP 报文 ​

HTTP协议里画过报文的格式——"起始行、头、空行、体"，背了又忘很正常，因为没亲眼见过。本实训用最纯粹的 HTTP 客户端 curl 访问 httpbin.org——一个专门用于测试的"回声"站点：你发什么，它把收到的内容原样打包还给你。发请求、看响应、改一改、再观察，完成后应能回答：

  • 一次 HTTP 交互，请求和响应报文各长什么样？
  • GET 和 POST 各把数据放在哪里？
  • 浏览器"打开网页"的时候，实际发生了什么？

元信息 ​

  • 目标：用最纯粹的 HTTP 客户端 curl 配合 httpbin 回声站点，亲手收发报文，把"请求行→头→空行→体"的格式看实，理解浏览器背后发生的真实交互
  • 关键概念：curl、httpbin、GET、POST、查询字符串、请求头、请求体、状态行、-i/-v/-I
  • 关联阶段：cp1
  • 常见误区：以为浏览器"打开网页"是一步操作（实为一次 HTTP 请求-响应，浏览器只是把响应渲染成像素）；URL 含 & 不加引号（shell 会截断，须整体加引号）；以为 GET 与 POST 只是名字不同（参数位置不同：查询字符串 vs 请求体，语义也不同）

准备：安装 curl ​

  • Windows 10 (1803+) / Windows 11：系统自带，直接打开命令提示符或 PowerShell 使用；老版本可从 https://curl.se/windows/ 下载
  • macOS：系统自带
  • Linux（Debian/Ubuntu）：sudo apt install curl；（Fedora）：sudo dnf install curl
  • 验证：终端输入 curl --version，能打印版本号即可

第 1 步：最小请求与响应全貌 ​

bash
curl https://httpbin.org/get

返回一段 JSON。注意：这就是一次完整的 HTTP 交互——默认方法 GET，服务器把 /get 这个"文档"作为响应体返回。加 -i 可以看到响应报文的全貌：

bash
curl -i https://httpbin.org/get

响应的格式：状态行 → 响应头 → 空行 → 响应体。这就是浏览器每次收到的东西，浏览器只是把它渲染成了像素。

第 2 步：看自己发出的请求 ​

httpbin 最有用的端点：把你发出的请求原样回显。

bash
curl https://httpbin.org/headers

返回 JSON 里的 headers 就是服务器实际收到的请求头。对照观察：curl 默认的 User-Agent 是 curl/8.x——还记得HTTP客户端的能力阶梯吗？服务器正是靠这个字段分辨"来者是谁"。

第 3 步：带参数——查询字符串 ​

先故意不加引号跑一次：

bash
curl https://httpbin.org/get?course=web&week=3

观察命令行的反应：& 被 shell 当成了特殊字符，命令在它之前就被截断了——这就是元信息里说的误区。整体加引号修复：

bash
curl "https://httpbin.org/get?course=web&week=3"

返回的 args 就是查询字符串被服务器解析后的样子——这就是"文档请求"携带数据的最简单方式。

第 4 步：指定方法与请求体——POST ​

bash
curl -X POST -d "title=hello&body=world" https://httpbin.org/post

返回的 form 字段里能看到你提交的数据。表单提交（第 4 周）本质上就是这个报文：方法 POST、请求体 key=value&key=value。再用 -v 看完整来回：

bash
curl -v -d "title=hello" https://httpbin.org/post

> 开头的行是你发出的请求（请求行 → 请求头 → 空行 → 请求体），< 开头的行是收到的响应。请求和响应格式对称，只有请求行/状态行的内容不同。

第 5 步：请求头实验 ​

bash
curl -H "User-Agent: MyBrowser/1.0" https://httpbin.org/user-agent
curl -I https://httpbin.org/image/png

第一条：自定义请求头，服务器原样收到。第二条：-I 只取响应头——观察 Content-Type: image/png 与 Content-Length，理解服务器如何声明"这份文档是什么格式、有多长"。

小结 ​

  • HTTP 交互 = 请求报文 + 响应报文，格式都是"起始行 → 头 → 空行 → 体"
  • GET 把参数放在 URL 查询字符串里，POST 把数据放在请求体里
  • 浏览器做的事 = curl 做的事 + 解析渲染；用 curl 隔着"渲染"看协议本身，正是它作为教学工具的价值

验收标准 ​

  • [ ] curl -i 访问 /get，在输出里依次指认状态行、响应头、空行、响应体四段
  • [ ] curl -v 发 POST，在输出里分别指出 > 开头的请求与 < 开头的响应，说明两者格式对称
  • [ ] 完成第 3 步的不加引号实验，能解释现象并说出修复办法
  • [ ] 不看资料说出 GET 与 POST 携带数据的位置差异
  • [ ] 用 -I 取一张图片的响应头，指出 Content-Type 与 Content-Length 各声明了什么

思考 ​

  • curl 也能下载 html，为什么它不算浏览器？缺的那一步是什么？（对照HTTP客户端的能力阶梯）
  • httpbin 为什么能把你发出的请求"还给你"？——你发的报文在服务器眼里只是收到的数据，这已经是后端的视角（第 4 周展开）

边界 ​

  • 状态码、缓存的头字段细节随用随查，不展开
  • 用代码（而不是命令行）发请求，归第 10 周的 ajax