你有沒有想過，當你在瀏覽器輸入網址按下 Enter，到底發生了什麼事？
其實就是你的瀏覽器跟遠端的伺服器「對話」了一下。而這個對話用的語言，就叫做 HTTP。
這篇文章會用一個「登入網站」的實際例子，帶你一步步看懂 HTTP 到底在幹嘛。
先看一個真實的 HTTP 請求
當你在網站上輸入帳號密碼，按下登入按鈕，瀏覽器會送出這樣的東西給網站伺服器：
POST /api/login HTTP/1.1
Host: www.example.com
Content-Type: application/json
User-Agent: Mozilla/5.0 Chrome/120.0.0.0
Origin: https://www.example.com
{
"username": "john",
"password": "123456"
}看起來有點複雜？別擔心，我們一行一行拆解。
請求的三大組成部分
一個 HTTP 請求由三個部分組成：
英文Request Line
對應上面的哪段POST /api/login HTTP/1.1
在幹嘛我要幹嘛、去哪裡
英文Headers
對應上面的哪段Host: 到 Origin: 那幾行
在幹嘛額外資訊（信封上的資料）
英文Body
對應上面的哪段最下面的 JSON
在幹嘛實際要傳的內容（信的內容）
第一行：請求行 Request Line（我要幹嘛？去哪裡？）
POST /api/login HTTP/1.1這一行有三個資訊：
範例POST
意思我要「送」資料給你
範例/api/login
意思送到你的 login 這個地方
範例HTTP/1.1
意思用 HTTP 1.1 版的規格溝通
HTTP 動詞有哪些？（HTTP Methods）
白話意思我要「拿」東西
什麼時候用打開網頁、讀取資料
白話意思我要「給」你東西
什麼時候用登入、註冊、送出表單
白話意思我要「改」東西
什麼時候用更新個人資料
白話意思我要「刪」東西
什麼時候用刪除一筆訂單
💡 就像去餐廳，你會說「我要點餐」或「我要結帳」，HTTP 動詞就是在告訴伺服器你的目的。
延伸閱讀：初學者指南：什麼是 HTTP 方法？
網址的結構（URL）
請求行裡的「路徑」其實是網址的一部分。完整的網址長這樣：
https://www.example.com/api/login?redirect=home英文Protocol
範例https://
白話解釋用加密的方式傳資料
英文Host
範例www.example.com
白話解釋要連到哪台電腦
英文Path
範例/api/login
白話解釋那台電腦上的哪個位置
英文Query String
範例?redirect=home
白話解釋額外帶的參數（登入後跳轉到首頁）
💡 就像寄包裹：協議是「用哪家快遞」，主機是「收件地址」，路徑是「幾樓幾號房」，查詢字串是「包裹備註」。
延伸閱讀：
中間幾行：請求頭 Headers（額外資訊）
Host: www.example.com
Content-Type: application/json
User-Agent: Mozilla/5.0 Chrome/120.0.0.0
Origin: https://www.example.com這些是「關於這個請求」的額外資訊，格式都是 名稱: 值。
逐行解釋
範例值www.example.com
在講什麼我要找的伺服器叫什麼名字
範例值application/json
在講什麼我送的資料是 JSON 格式
範例值Mozilla/5.0 Chrome/120.0.0.0
在講什麼我用 Chrome 瀏覽器
範例值https://www.example.com
在講什麼我從哪個網站發出這個請求
Content-Type 有哪些格式？
Content-Typeapplication/json
長什麼樣子{"name": "john"}
什麼時候用最常用，API 幾乎都用這個
Content-Typeapplication/x-www-form-urlencoded
長什麼樣子name=john&age=25
什麼時候用傳統 HTML 表單
Content-Typemultipart/form-data
長什麼樣子（二進位資料）
什麼時候用上傳圖片、檔案
延伸閱讀：
- 新手指南：什麼是 JSON？JSON.stringify 與 JSON.parse 完整教學
- 初學者指南：認識 Content-Type: application/x-www-form-urlencoded
其他常見的請求頭
用途告訴伺服器「我想收到什麼格式的回應」
用途帶上我的身份驗證資訊（像是 Token）
用途帶上之前存的 Cookie
最下面：請求體 Body（實際要傳的資料）
{
"username": "john",
"password": "123456"
}這就是你真正要送給伺服器的資料。
延伸閱讀：
什麼時候需要請求體？
需要請求體嗎？❌ 不需要
原因你只是要「拿」東西
需要請求體嗎？✅ 需要
原因你要「給」伺服器資料
需要請求體嗎？✅ 需要
原因你要告訴它「改成什麼」
需要請求體嗎？⚠️ 看情況
原因通常不需要
伺服器怎麼回應？（HTTP Response）
你送出請求後，伺服器會回一個「響應」給你，格式長這樣：
HTTP/1.1 200 OK
Content-Type: application/json
{
"status": "success",
"data": {
"id": 1,
"name": "John"
}
}響應也有三個部分
英文Status Line
對應上面的哪段HTTP/1.1 200 OK
在幹嘛告訴你結果如何
英文Response Headers
對應上面的哪段Content-Type: application/json
在幹嘛回應的額外資訊
英文Response Body
對應上面的哪段下面的 JSON
在幹嘛實際回傳的資料
常見的狀態碼（Status Code）
意思成功
白話沒問題，資料給你
意思已建立
白話東西幫你建好了
意思請求有誤
白話你傳的東西我看不懂
意思未授權
白話你沒登入或 Token 過期了
意思找不到
白話這個網址不存在
意思伺服器錯誤
白話我這邊壞掉了
什麼時候用API 回傳資料（最常見）
什麼時候用直接回傳網頁
什麼時候用簡單的錯誤訊息
什麼時候用回傳圖片、檔案
完整流程總結
用登入當例子，整個流程是這樣：
sequenceDiagram
participant 瀏覽器
participant 伺服器
瀏覽器->>伺服器: POST /api/login（帳號密碼 JSON）
伺服器-->>瀏覽器: 200 OK（登入成功 + 用戶資料）常見的情境示例
情境 1：API 通信（JSON 格式）
- 請求：
POST /api/login HTTP/1.1
Content-Type: application/json
Accept: application/json
{
"username": "john_doe",
"password": "123456"
}- 響應：
HTTP/1.1 200 OK
Content-Type: application/json
{
"message": "login successful",
"token": "abcdef12345"
}
情境 2：表單提交
- 請求：
POST /submit-form HTTP/1.1
Content-Type: application/x-www-form-urlencoded
name=John&age=30
- 響應：
HTTP/1.1 200 OK
Content-Type: application/json
{
"message": "Form submitted successfully"
}
情境 3：瀏覽器直接訪問（HTML 格式）
- 請求：
GET /home HTTP/1.1
Accept: text/html- 響應：
HTTP/1.1 200 OK
Content-Type: text/html
<html>
<body>
<h1>Welcome to the homepage!</h1>
</body>
</html>重點整理
一句話解釋瀏覽器和伺服器之間的對話規則
一句話解釋我要幹嘛（動詞）+ 去哪裡（路徑）
一句話解釋這個請求的額外資訊
一句話解釋實際要傳的資料
一句話解釋伺服器告訴你「結果如何」
一句話解釋告訴對方「資料是什麼格式」
下一步可以做什麼？
- 打開瀏覽器按 F12，切到「Network」分頁，看看實際的 HTTP 請求長什麼樣子
- 下載 Postman，自己試著發送 HTTP 請求玩玩看
- 試著觀察登入、註冊、讀取資料時，分別用了什麼動詞