跳至正文

理解HTTP請求/回應 📡

當您訪問網站或使用應用程式時,電腦和伺服器如何通訊?它們使用一種叫做HTTP的規則!讓我以簡單的方式解釋,即使是初學者也能理解。

用日常生活比喻HTTP?​

讓我們把HTTP比作餐廳點餐。

餐廳的故事 🍽️​

1. 顧客:「請給我義大利麵!」(請求)
2. 服務生:傳達給廚房
3. 廚房:烹飪義大利麵
4. 服務生:「您的義大利麵來了!」(回應)
5. 顧客:收到義大利麵

HTTP也一樣:

1. 瀏覽器:「請給我index.html!」(HTTP請求)
2. 伺服器:查找檔案
3. 伺服器:「這裡是!」(HTTP回應)
4. 瀏覽器:顯示頁面

HTTP的定義​

HTTP (HyperText Transfer Protocol)

  • Web瀏覽器和伺服器交換資料的規則
  • 協定 = 約定的規則
  • Web的基礎通訊方法

HTTP請求/回應流程​

┌─────────┐                              ┌─────────┐
│         │   ── HTTP請求 (Request) →    │         │
│ 瀏覽器  │                              │  伺服器 │
│         │   ← HTTP回應 (Response) ──   │         │
└─────────┘                              └─────────┘

完整過程​

  1. 請求 (Request):瀏覽器向伺服器請求某些內容
  2. 處理 (Processing):伺服器處理請求
  3. 回應 (Response):伺服器將結果發送給瀏覽器
  4. 渲染 (Rendering):瀏覽器在螢幕上顯示

HTTP方法(請求方法)​

這些是告訴伺服器**「如何」**操作的動詞。

1. GET 📖​

「獲取」 - 請求資料

GET /products/123

範例:

  • 查看網頁
  • 獲取搜尋結果
  • 查看產品清單

特點:

  • 只獲取資料
  • 不修改伺服器資料
  • 資料顯示在URL中
  • 可以加入書籤

實際使用:

https://google.com/search?q=javascript
                         └───────┬──────┘
                         GET參數

2. POST 📝​

「建立」 - 向伺服器發送新資料

POST /users
{
  "name": "張小明",
  "email": "zhang@example.com"
}

範例:

  • 會員註冊
  • 撰寫文章
  • 下訂單

特點:

  • 在伺服器上建立資料
  • 資料在本文(Body)中
  • 資料不顯示在URL中
  • 不能加入書籤

3. PUT ✏️​

「修改」 - 完全替換現有資料

PUT /users/123
{
  "name": "李小華",
  "email": "li@example.com"
}

範例:

  • 修改整個個人資料
  • 修改整篇文章

4. PATCH 🔧​

「部分修改」 - 只修改現有資料的一部分

PATCH /users/123
{
  "email": "newemail@example.com"
}

範例:

  • 只更改電子郵件
  • 只更改密碼

5. DELETE 🗑️​

「刪除」 - 刪除資料

DELETE /users/123

範例:

  • 刪除帳戶
  • 刪除文章
  • 刪除產品

HTTP方法比較表​

方法用途資料修改資料位置
GET查詢❌URL
POST建立✅Body
PUT完全修改✅Body
PATCH部分修改✅Body
DELETE刪除✅URL

HTTP請求結構​

GET /api/users?page=1 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer token123

{本文資料(POST、PUT、PATCH時)}

組成部分​

  1. 請求行:GET /api/users HTTP/1.1

    • 方法:GET
    • 路徑:/api/users
    • HTTP版本:1.1

  2. 標頭 (Headers):附加資訊

    Host: 哪個伺服器?
    User-Agent: 哪個瀏覽器?
    Accept: 接收什麼格式?
    Authorization: 認證資訊

  3. 本文 (Body):實際資料(POST、PUT、PATCH)

HTTP回應結構​

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 1234

{
  "id": 1,
  "name": "張小明"
}

組成部分​

  1. 狀態行:HTTP/1.1 200 OK

    • HTTP版本:1.1
    • 狀態碼:200
    • 狀態訊息:OK

  2. 標頭 (Headers):回應資訊

    Content-Type: 什麼格式?
    Content-Length: 資料大小

  3. 本文 (Body):實際資料

HTTP狀態碼 🚦​

伺服器用數字告訴你**「發生了什麼」**。

2xx - 成功 ✅​

代碼含義說明
200OK成功!
201Created已建立新內容
204No Content成功但沒有內容

3xx - 重新導向 🔄​

代碼含義說明
301Moved Permanently永久移動
302Found暫時在別處
304Not Modified未修改,使用快取

4xx - 用戶端錯誤 ❌​

代碼含義說明
400Bad Request請求錯誤
401Unauthorized需要登入
403Forbidden沒有權限
404Not Found找不到
429Too Many Requests請求過多

5xx - 伺服器錯誤 🔥​

代碼含義說明
500Internal Server Error伺服器出現問題
502Bad Gateway閘道錯誤
503Service Unavailable服務不可用
提示

在HTTP Status Guide查看所有狀態碼!

實踐範例​

範例 1:搜尋 🔍​

請求:

GET https://google.com/search?q=javascript

回應:

HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>搜尋結果...</body>
</html>

範例 2:登入 🔐​

請求:

POST https://api.example.com/login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "password123"
}

回應(成功):

HTTP/1.1 200 OK
Content-Type: application/json

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "id": 1,
    "name": "張小明"
  }
}

回應(失敗):

HTTP/1.1 401 Unauthorized
Content-Type: application/json

{
  "error": "Invalid email or password"
}

範例 3:建立文章 ✍️​

請求:

POST https://api.example.com/posts
Content-Type: application/json
Authorization: Bearer token123

{
  "title": "第一篇文章",
  "content": "你好!"
}

回應:

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

{
  "id": 42,
  "title": "第一篇文章",
  "content": "你好!",
  "createdAt": "2025-01-23T10:30:00Z"
}

範例 4:修改個人資料 ✏️​

請求:

PATCH https://api.example.com/users/me
Content-Type: application/json
Authorization: Bearer token123

{
  "email": "newemail@example.com"
}

回應:

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": 1,
  "name": "張小明",
  "email": "newemail@example.com"
}

範例 5:刪除文章 🗑️​

請求:

DELETE https://api.example.com/posts/42
Authorization: Bearer token123

回應:

HTTP/1.1 204 No Content

理解HTTP標頭​

常用請求標頭​

Content-Type: application/json    # 發送的資料格式
Accept: application/json           # 想要接收的資料格式
Authorization: Bearer token123     # 認證令牌
User-Agent: Mozilla/5.0...         # 瀏覽器資訊
Cookie: session=abc123             # Cookie

常用回應標頭​

Content-Type: application/json    # 回應資料格式
Content-Length: 1234               # 資料大小
Set-Cookie: session=abc123         # 設定Cookie
Cache-Control: no-cache            # 快取設定
Access-Control-Allow-Origin: *     # CORS設定

使用HTTP工具​

用API Tester實踐​

在API Tester中:

  1. 輸入URL
  2. 選擇方法(GET、POST、PUT、DELETE)
  3. 新增標頭
  4. 編寫本文(POST、PUT、PATCH)
  5. 點選Send按鈕!

範例實踐​

GET請求測試:

URL: https://api.github.com/users/github
Method: GET

結果:

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  ...
}

常見問題(FAQ)​

Q1:何時使用GET和POST?​

A:

  • GET:查詢資料(只讀)
  • POST:建立資料(寫入)

Q2:PUT和PATCH的區別?​

A:

  • PUT:替換全部 
    PUT /users/1
    {"name": "李小華", "email": "li@example.com", "age": 25}
  • PATCH:只修改部分 
    PATCH /users/1
    {"email": "newemail@example.com"}

Q3:為什麼會出現404錯誤?​

A:找不到請求的頁面或資料時!

  • URL拼寫錯誤
  • 頁面已刪除
  • 路徑錯誤

Q4:500錯誤是什麼?​

A:伺服器出現問題了!

  • 伺服器程式碼錯誤
  • 資料庫連線失敗
  • 伺服器過載

Q5:HTTPS和HTTP有什麼不同?​

A:增加了安全性!

  • HTTP:明文傳輸(任何人都能看到)
  • HTTPS:加密傳輸(安全)🔒

CRUD和HTTP方法​

CRUD = 資料的基本操作

CRUD含義HTTP方法
Create建立POST
Read讀取GET
Update更新PUT / PATCH
Delete刪除DELETE

範例:部落格文章​

查看文章清單:  GET /posts
閱讀文章:      GET /posts/123
建立文章:      POST /posts
修改文章:      PUT /posts/123
刪除文章:      DELETE /posts/123

RESTful API​

REST = 有效使用HTTP的設計方法

良好的API設計 ✅​

GET    /users          # 使用者清單
GET    /users/123      # 特定使用者
POST   /users          # 建立使用者
PUT    /users/123      # 修改使用者
DELETE /users/123      # 刪除使用者

不良的API設計 ❌​

GET  /getUsers
POST /createUser
POST /updateUser
POST /deleteUser

下一步 🚀​

如果你理解了HTTP:

  1. ✅ API Tester - 直接發送HTTP請求
  2. ✅ HTTP Status Guide - 學習所有狀態碼
  3. ✅ cURL Converter - 轉換cURL命令
  4. ✅ 什麼是API? - 重新理解API概念
  5. ✅ 理解JSON資料格式 - HTTP交換的資料

總結​

HTTP是Web的基礎!🌐

要記住的要點:

  • GET:查詢(讀取)
  • POST:建立(寫入)
  • PUT/PATCH:修改
  • DELETE:刪除
  • 狀態碼:2xx(成功)、4xx(用戶端錯誤)、5xx(伺服器錯誤)

用API Tester直接實驗就會很快熟悉!🎉

現在你理解網站和伺服器如何通訊了嗎?