網路的運作方式

涓 / Lynn Chang
Lynn’s dev blog
Published in
4 min readJun 25, 2020

網路運作的主要概念是 Client 端(瀏覽器)以及 Server 端(伺服器)兩者之間的資料傳遞過程。

資料傳遞過程會有幾個元素串接:URL 網址、HTTP Method、HTTP 狀態碼、伺服器回傳的資源。

運作流程:

  • Step1:輸入 URL 網址
  • Step2:執行 URL 網址帶的 HTTP Method,向伺服器發送 Request
  • Step3:伺服器回傳 HTTP 狀態碼
  • Step4:伺服器回傳 Response 給 Client 端(瀏覽器)

Step1:輸入 URL 網址

當輸入網址(ex.:www.google.com)後,會交由 DNS (Domain Name Server) 將網址轉為一組 IP Address(ex. 192.168.0.1),接著再由 IP Address 向 Server 發送 Request,嘗試去取得需要的資源(ex. html、一張圖、一個影片)。

註:Domain Name Server 是一種伺服器,功能是將域名(即人類比較看得懂的網址 ex. www.google.com)轉換為 IP Address。

此外,開發者通常已經設定好這組 URL 網址對應到的 HTTP Method。

Step2:執行 URL 網址帶的 HTTP Method,向伺服器發送 Request

HTTP Method 是什麼?

HTTP Method 是一種向伺服器請求資源的方法(Request Method)。

輸入一段網址或點擊某個連結時,我們的目的可能是看某個網頁、上傳資料、填寫表單並送出等,而 HTTP Method 可以初步理解為我們要新增、修改、讀取、刪除資料時的動作指令。

HTTP Method ㄧ共有九種:GET、POST、PUT、PATCH、DELETE、HEAD、OPTIONS、CONNECT、TRACE。

其中常用的有:

  • GET:應用於請求讀取特定資源。此方法不會改變伺服器的狀態。
  • POST:應用於新增特定資源。此方法會改變伺服器的資料狀態。
  • PUT:應用於替代(replace,新增、完整更新)已存在資源的特定資料。每次 replace 都需要重新傳一次該資源已經存在的資料。
  • PATCH:應用於替代(replace,新增、部分更新)已存在資源的特定資料。可以只更新部分資料,每次 replace 不需要重新傳一次該資源已經存在的資料。
  • DELETE:應用於刪除特定資源。此方法會改變伺服器的資料狀態。

Step3:HTTP 狀態碼回傳

當發送 Request 請求後,伺服器會回傳狀態碼,狀態碼有分成:

  • 2xx:成功
  • 3xx:重新定向(ex. 301 轉址)
  • 4xx:客戶端錯誤(ex. 404 找不到頁面)
  • 5xx:伺服器端錯誤

Step4:伺服器回傳 Response 給 Client 端(瀏覽器)

舉例來說,假設回傳的狀態是 200 成功,在 Client 端(瀏覽器)畫面上,則可以看到 URL 網址向伺服器 Request 後取得的 Response。假設 Request 的是一個影片,伺服器就會將影片作為 Response 傳給瀏覽器,瀏覽器就會上就會看到這個影片。

我們也可以用生活化一點的例子來理解,以買綜合豆花為例:

Step1:輸入 URL 網址

  • 白話文:心裡想好要跟豆花店老闆點哪一種豆花,假設我要綜合豆花,綜合豆花即 URL。

Step2:執行 URL 網址帶的 HTTP Method,向伺服器發送 Request

  • 白話文:跟老闆點餐,要一碗綜合豆花。

(1)老闆即伺服器。

(2)點餐的動作即透過 URL 所帶的 HTTP Method ex. GET,發送 Request。

(3)Request 即跟老闆說:「我要 GET 一碗綜合豆花!」

Step3:伺服器回傳 HTTP 狀態碼

  • 白話文:老闆回頭看看還有沒有綜合豆花。

(1)如果有而且可以成功出餐的話,老闆會回傳一個 2xx 的暗號給你。

(2)如果這家店沒有,要去別家分店才能買到的話,老闆則回傳 3xx 的暗號。

(3)其實菜單上根本沒有綜合豆花、或賣完了,老闆則回傳 4xx 暗號。

(4)假設製作綜合豆花的機器剛好壞掉了,老闆則回傳 5xx 暗號告訴你,機器可能故障了。

Step4:伺服器回傳 Response 給 Client 端(瀏覽器)

  • 白話文:以 2xx 成功為例,老闆做好綜合豆花後,拿給客人。如此一來,客人您就可以好好享用美味的綜合豆花了:))

以上是對網路運作方式的初步理解與筆記,

若上述觀念或是用字有不正確的地方,還需請多多指教,謝謝看到這邊的您:)

--

--

涓 / Lynn Chang
Lynn’s dev blog

A software engineer who loves writing and cares about mental health and life meaning.