iT邦幫忙

2025 iThome 鐵人賽

DAY 11
0
Modern Web

30天一起搞懂Web觀念系列 第 11

[DAY11] HTTP 是什麼?

  • 分享至 

  • xImage
  •  

HTTP 是什麼?

HTTP 全名是 HyperText Transfer Protocol(超文字傳輸協定)

可以想像它是瀏覽器與伺服器之間的溝通語言,負責定義雙方如何傳送與接收資料


HTTP 如何運作?怎麼連線的?

HTTP 是 「請求 - 回應」(Request-Response)模式,運作流程大致是這樣:

  1. 建立連線

    瀏覽器輸入網址,例如 https://google.com

    會先透過 DNS 找到伺服器 IP,然後建立 TCP 連線(如果是 HTTPS,還要先進行 SSL/TLS 加密握手)

  2. 發送 HTTP 請求(Request)

    瀏覽器會發送請求訊息(message request),包含:

    • 請求方法(GET、POST…)
    • URL(你要的資源位置)
    • 標頭(Headers,像語言、瀏覽器型號、Cookie…)
    • 主體(Body,有時會附加表單資料或 JSON)
  3. 伺服器回應(Response)

    伺服器收到請求後,處理完會傳送應答,包含:

    • 狀態碼(200 成功、404 找不到…)
    • 標頭(內容型別、長度、快取設定…)
    • 主體(HTML、JSON、圖片…)
  4. 瀏覽器渲染內容

    收到回應後,瀏覽器就會把 HTML 解析成畫面,或處理 JSON、圖片等資源

    圖片來源:https://blog.bytebytego.com/p/a-deep-dive-into-http-from-http-1


HTTP 常見方法

方法 用途 請求有payload body
GET 取得資源 選擇性
POST 新增/提交資料
PUT 更新整個資源
PATCH 部分更新資源
DELETE 刪除資源 選擇性
HEAD GET方法一樣,但只取得回應標頭,不要主體 選擇性
OPTIONS 詢問伺服器支援哪些方法(測試伺服器功能是否正常運作) 選擇性

HTTP 版本

大部分都是向下相容的

版本 特點
HTTP/0.9 只有 GET 方法,因此無法向伺服器傳太多訊息
HTTP/1.0 支援更多方法(POSTHEAD),支援多種內容型別
HTTP/1.1 預設長連線(Keep-Alive)、快取控制
HTTP/2 修復隊頭阻塞問題、多個請求合併到一個TCP連線內、Header 壓縮
HTTP/3 不依賴TCP,採用基於 QUIC 協議(UDP的),延遲更低、連線更快

HTTP 狀態碼

類別 類別意義 狀態碼 狀態碼意義
1xx 資訊 請求已收到,正在繼續處理 100 Continue 表示可以繼續傳剩下的內容
2xx 成功 請求成功 200 OK 請求成功!
201 Created 新資源成功建立,例如用 POST 建立了一筆新的資料,回應時可能會附上新資源的 URL
3xx 重新導向 要求的資源位置已改變 301 Moved Permanently 永久移到新位置,告訴瀏覽器以後都應該去新的 URL
302 Found 臨時移到新位置,本次請求去新 URL,但下次還是用原本的
303 See Other 請用 GET 方法到另一個 URL 抓資料(常在表單送出後使用)
304 Not Modified If-Modified-Since或If-None-Match參數未曾被修改,有一前的副本,不用重新傳輸資源
4xx 用戶端錯誤 找不到資源或語法錯誤 400 Bad Request 請求格式錯誤(可能是 JSON 格式錯誤、缺少必要參數)
401 Unauthorized 未授權,需登入
403 Forbidden 伺服器理解請求,但拒絕訪問
404 Not Found 找不到資源(通常網址錯誤或資源被刪除)
5xx 伺服器錯誤 伺服器內部錯誤 500 Internal Server Error 最常見的伺服器錯誤(可能是程式 bug 或設定錯誤造成)
501 Not Implemented 伺服器不支援此請求方法(像是 API 尚未開發)
502 Bad Gateway 作為「代理伺服器」時,從上游伺服器收到無效回應(例如 Nginx → 後端掛了)
503 Service Unavailable 伺服器暫時無法處理請求(過載、維護中)

可以在網頁看到嗎?

可以在輸入一個不存在的網址:https://example.com/abcxyz

點開開發者工具 → 網路 → 重新整理網頁

就可以看到狀態碼那邊有出現404,表示此頁面不存在

https://ithelp.ithome.com.tw/upload/images/20250814/20177952oxYgY7Nfy6.png

點選要查看的請求,點選標頭就可以看到Header、點選預覽就可以看到Body資訊(但是Body 也有可能看不到)

https://ithelp.ithome.com.tw/upload/images/20250814/20177952W717esNGrF.png


參考資料

https://zh.wikipedia.org/zh-tw/超文本传输协议

https://zh.wikipedia.org/wiki/HTTP/2

https://zh.wikipedia.org/wiki/HTTP状态码

https://israynotarray.com/other/20220104/255997626/

https://blog.bytebytego.com/p/a-deep-dive-into-http-from-http-1


上一篇
[DAY10] 網頁是怎麼儲存資料的?(2)
下一篇
[DAY12] HTTPS 為什麼安全?
系列文
30天一起搞懂Web觀念30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言