Web前端开发技术

Appearance

curl 实训：亲手收发 HTTP 报文 ​

元信息 ​

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

用最纯粹的 HTTP 客户端 curl 访问 httpbin.org——一个专门用于测试的"回声"站点：你发什么，它把收到的内容原样打包还给你。看多了来回的报文，"文档请求—响应"就不再是抽象概念，HTTP协议里的字段也都能一一对上号。

安装 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. 最小请求：GET ​

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"

注意 URL 要加引号（& 在 shell 里有特殊含义）。返回的 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 隔着"渲染"看协议本身，正是它作为教学工具的价值

边界 ​

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