Chapter 03

HTTP：Web 世界中資料往返的共同語言

HTTP（HyperText Transfer Protocol）是瀏覽器與伺服器對話時最重要的規則。 它規定了 request 長什麼樣子、response 該怎麼回、回傳狀態代表什麼，以及資料要用什麼格式描述。

What：HTTP Request / Response 的基本結構

部分 內容 例子
Start Line 說明方法、路徑、版本，或狀態碼與版本 GET / HTTP/1.1 / HTTP/1.1 200 OK
Headers 描述請求或回應的附加資訊 Host、Content-Type、Cache-Control
Body 真正傳送的資料 HTML、JSON、表單資料、圖片
重點： HTTP 本身只是傳輸規則，它不在乎 body 裡面裝的是 HTML、JSON 還是圖片，只要有正確標頭就能處理。

Methods、Status Codes、Headers

Methods

GET 取得資料、POST 新增、PUT 覆蓋、PATCH 局部更新、DELETE 刪除。

Status Codes

200 成功、301 重新導向、404 找不到、500 伺服器錯誤，是最常見的回應訊號。

Headers

補充描述資料內容、快取策略、授權資訊、Cookie、來源等，是 HTTP 的控制面板。

類別 代表狀態碼 意義
1xx 101 資訊性回應，流程仍在進行中
2xx 200、201、204 請求成功
3xx 301、302、304 需要重新導向或可使用快取
4xx 400、401、403、404 用戶端請求有問題
5xx 500、502、503 伺服器處理失敗

HTTPS：在 HTTP 外再加上一層保護

HTTPS = HTTP + TLS。它的目標是讓資料在網路中傳輸時具備： 加密性、完整性、身分驗證。 換句話說，別人不容易偷看內容、亂改內容，也能確認你連到的是正確的網站。

Example 1：讀懂一段 GET Request / Response

要求首頁 HTML

這是最典型、也最值得學生先學會閱讀的一組 HTTP 對話。

GET /index.html HTTP/1.1
Host: web.demo
Accept: text/html
Accept-Language: zh-TW

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Cache-Control: max-age=60
Content-Length: 128

<h1>Welcome</h1>
<p>This page is served by a web server.</p>

Welcome

This page is served by a web server.

  • Host 告訴伺服器你要連的是哪個網站。
  • Accept 表示瀏覽器偏好接收的內容類型。
  • Content-Type 告訴瀏覽器 body 裡面是 HTML。
  • Cache-Control 影響瀏覽器是否可以暫存內容。

Example 2：POST JSON 到 API

送出資料給伺服器

API 不一定回 HTML，它也常回傳 JSON 給前端 JavaScript 使用。

POST /api/messages HTTP/1.1
Host: api.demo
Content-Type: application/json

{
  "author": "Student",
  "message": "Hello server"
}

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": 101,
  "status": "saved"
}
API 回應 
{
  "id": 101,
  "status": "saved"
}
  • 這裡的 body 是 JSON，所以 Content-Type 要寫成 application/json。
  • 201 Created 表示伺服器成功建立了一筆新資料。
  • 很多現代前端框架都靠這種 API 形式和伺服器交換資料。

Hands-on：用 DevTools 與 curl 真的看到 HTTP

方法 1：Chrome DevTools

  • 打開瀏覽器開發者工具，切到 Network。
  • 重新整理頁面，點選第一筆文件請求。
  • 對照 Headers、Status Code、Response 與本章學的名詞。

方法 2：curl 指令

  • 在終端機輸入 curl -i http://127.0.0.1:8000/。
  • -i 會把 response headers 一起印出來。
  • 你會清楚看到「空白行前是 header，空白行後是 body」。

用 curl 看 HTTP 回應長什麼樣子

這是把課本上的 HTTP 變成你真的看得到的最短路徑。

curl -i http://127.0.0.1:8000/
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 42

<h1>Hello</h1>
<p>Served by HTTP server.</p>
  • HTTP/1.1 200 OK 是 status line，代表這次請求成功。
  • 中間的幾行是 response headers，用來描述資料格式與長度。
  • 空白行後面就是 body，也就是伺服器真正送回來的內容。

Practice：快速判讀

問題 1

如果伺服器回傳 404，通常表示是哪一層出了問題？是網路、伺服器還是資源路徑？

問題 2

為什麼 JSON API 的回應不能標成 text/html？

HTTP 與 AJAX 的關係

AJAX 不是新協定

AJAX 底層仍然是 HTTP request / response；差別只在於請求是由頁面中的 JavaScript 主動發出，不一定要整頁重新整理。

AJAX 常拿來做什麼？

例如送出表單後只更新部分內容、讀取 JSON API、即時搜尋建議、儀表板自動刷新等，都是 HTTP 在互動頁面中的延伸應用。

延伸閱讀： 如果你想把 HTTP、JavaScript、DOM 更新與非同步流程一起看懂，可接著讀 第 10 章：AJAX 原理。

Summary：本章結論

  • HTTP 由 start line、headers、body 組成。
  • Methods 表示「想做什麼」，Status Codes 表示「結果如何」，Headers 表示「補充條件與描述」。
  • HTTPS 讓資料在傳輸過程中更安全，是現代網站的基本配置。
  • 除了讀範例，你也應該能用 DevTools 或 curl 實際觀察一次 HTTP request / response。
  • AJAX 並不是另一套通訊協定，而是把本章的 HTTP 規則交給 JavaScript 來主動使用。