[第六週] 網路基礎- HTTP、Request、Response

學習目標：知道什麼是 Request 跟 Response；DNS 的運作原理。

本文主要源自 Huli 從傳紙條輕鬆學習基本網路概念 ，並參考以下資料的學習整理：

• [NET101] 網路基礎概論（搭配 JS 實作練習）
• 在瀏覽器輸入網址並送出後，到底發生了什麼事？
• 從傳紙條輕鬆學習基本網路概念
• [第四週] 網路基礎 — TCP/IP
• [不是工程師] 差一個字差很多，HTTP 不等於 HTTPS

我們在 [第六週] 網路基礎 — TCP/ IP 談了資料傳遞的過程當中會經過層層的協定（中間 Internet），這邊我們將來談談兩側的部分

Photo by Django Request and Response Lifecycle

Client & Server

在傳遞資訊的兩端我們稱之為「客戶端（Client）」、「伺服器端（Server）」

客戶端（Client）

以網頁來說就是你的瀏覽器（Browser），會發出「請求 Request」傳遞到 Server 端。

伺服器端（Server）

收到 Request 後，會開始處理資料，然會回傳「回應 Response」到 Client 端。

應用層：HTTP 及 DNS

圖片來源： OSI模型、TCP/IP协议栈

HTTP 及 DNS 都是屬於 TCP/IP 的應用層，以下詳細說明這兩個東西：

HTTP

• 全名 HyperText Transfer Protocol，中文為超文本傳輸協定
• 是全球資訊網的通訊基礎，當我們在上網或網頁前端跟後端做溝通時就要遵照 HTTP 「協定」
• 預設 port ：80
• 以傳紙條的來說就是你要哪種服務？訂便當、訂飲料、借籃球…，所以如果你要透過網路服務，就要遵照 HTTP 「協定」。

圖片來源： Huli 從傳紙條輕鬆學習基本網路概念

HTTPS

• 全名 HyperText Transfer Protocol Secure，中文為超文本傳輸安全協定
• 由於 HTTP 一直都有安全性的問題，因此 HTTPS 就是基於 HTTP 並利用 SSL/TLS 將資訊加密封包的另一種更安全的協定。
• 預設 port ：443

[補充說明] 為什麼 HTTP 不安全
1. HTTP 傳遞是使用明文的方式並不具備加密的功能，所以無法對內容進行加密。
2. 不會對 client 端與 server 進行驗證，無法確定兩端是否為正確的（小明傳給小美的信可能中途被小王攔截）

DNS

可以看到 DNS 位於最上方

• 全名 Domain Name System，中文為用網域名稱系統
• 將「域名（Domain）」就是「網址」轉換成實際的 IP Adress

當瀏覽器傳 Request 到 Server，其實我們並沒有給與 IP Address ，那這樣就不能達成 TCP 三次握手（Three-way handshake）了啊！

那到底是如何達成的呢？

其實當瀏覽器發送 HTTP Request 前，會先利用 DNS把網址轉換成實際的 IP Adress，如此一來就可以進行 TCP 三次握手。

打開 DevTool，Network Header 的部分可以看到 url 跟 IP 位置。

如何看到網頁內容的？

瀏覽器傳 HTTP Request 到 Server
Server 回傳一個 Response

那到底是傳了什麼東西回來呢？

我們打開 DevTool 到 Network 再重新整理一次，就會開始偵測目前頁面上瀏覽器傳遞的所有 Request 每個傳遞回來的 Response 集成了這個網頁。

瀏覽器只是一個應用程式

其實瀏覽器幫我們做的就是發送一堆 Request、接收一堆 Response，根據 html 裡面的內容再進行資源下載，而更詳細 request 發送順序可參考以下：

1. DNS 將 url 解析成 IP 位置，
2. 瀏覽器(Client)將 IP 包成一個 Request 發送出去。
3. Request 透過 Internet 的層層協定 發送到 Server 端。
4. Server 端解析 Request
5. 在 data center 撈取有關 JavaScript 的資料
6. 包成一個 Response 回傳。
7. Client 端開始解析 Response、解析 .html 檔案。
8. 根據 .html 的檔案內容，一旦發現有 CSS、JS 或 image 等檔案，再發送個檔案的 Request 。
9. Client 端發送完包含在 html 所有資源的 Request。
10. 開始下載資源（CSS、JS 或 image）。
11. 渲染網頁。

深入了解 Request ＆ Response

這時候我們要回到傳紙條的第二集：便當篇

圖片來源： Huli 從傳紙條輕鬆學習基本網路概念

根據 HTTP 通訊協定其中的內容 Request ＆ Response 有標準化內容格式，並且都包含了 header 和 body

1. 標準化內容格式
2. 分為 header 跟 body
3. 用狀態碼標準化結果 （Http status code）
4. 用動詞標準化請求方法 （Http Request Method）
其實這四個其實就是 HTTP 通訊協定的內容。

header

• 大部分會包含：

1. IP 位置
2. Http Request Method 狀態碼
3. Http status code 請求方法

• 其他額外資訊也會放在這裡，例如：Client-ID、User-Agent、Authorization 等。＃在 API 串接時會使用到。

body

• 主要傳遞的內容，但也有可以沒有內容。

Http Request Method

在早期 http 1.1 為了區分 Request 不同的用途，使用動詞標準化讓 Server 能清楚辨別 Request 的目的，定義了八種 Method，最常見的 Method 為 Get 及Post。

Get

• 單純的跟 server 要一個連結或圖片，通常網頁都是 Get 的 request 比較多
• 最常使用的 Method
• 例如：要去某個網址、看某張圖片
• 傳送的資料會以 Query String 的方式加在 url 上

Post

• 需要執行一些動作時，會傳送 Post request
• 例如：登入會員、送出表單
• 獲取「指定的」資訊，放在 request body（Form data）裡面

其他的 HTTP Request Method

• Put ：取代掉整個 request。
• Patch：修改部分 request。
• Delete：刪除資源。
• Head：只要獲取 request 的 header，不要 body。
• Option：可以了解 server 提供哪些溝通方法。

Http status code 狀態碼

用數字表示 reponse 的狀態，通常以開頭的數字做判斷

圖片來源： Huli 從傳紙條輕鬆學習基本網路概念

1xx ：稍等

• 100 Continue：Server 成功接收、但 Client 還要進行一些處理。

2xx：成功

• 200 OK：成功
• 204 No Content：成功但沒有回傳的內容（當你發出 Delete 的 request）

3xx：重新導向，用戶端瀏覽器必須採取更多動作才能完成要求。

• 301 Moved Permanently：資源「永久」移到其他位置，再下一次發出 request 時，瀏覽器直接到新位置。
• 302 Found（Moved Temporarily）：資源「暫時」移到其他位置。
• 304 Not Modified：東西跟之前長一樣，可以從快取拿就好。

4xx：Client 端錯誤

• 400 Bad Request：請求語法錯誤、或資源太大…等等。
• 401 Unauthorized：未認證，可能需要登入或 Token。
• 403 Forbidden：沒有權限。
• 404 Not Found：找不到資源。

5xx：Service 端錯誤

• 500 Internal Server Error：伺服器出錯，搶票時很可能發生。
• 501 Not Implemented
• 502 Bad Gateway：通常是伺服器的某個服務沒有正確執行。

在瀏覽器上要如何查看 Request ＆ Response 的資訊呢？

以 Medium 為例

• Request 跟 Response 的 headers：[DevTool] command + option + i > network > headers

可以看到 Request 跟 Response 的 headers

• Response：[DevTool command + option + i > network > Response

可以看到 Response 的 body

實做 Client 端

除了瀏覽器外，我們可以利用 request（Simplified HTTP client），模擬瀏覽器發送 request。

Step1. 在專案資料夾載入 request

$ npm install request

Step2. 在專案資料夾內新增 test.js 並貼上官網提供的範本

有多新增一行 console.log('head:', response.headers); ＃印出 response 的 header

Step3. 執行後得到 response 內容

$ node test.js

實作 Server 端

利用 node.js 內建 library : http 就可以在自己的電腦上建立一個 Server 端

step1. 在專案資料夾建立一個新的檔案，輸入以下程式碼

step2. 執行 Server

$ node server.js

Server 就建立成功囉，會一直執行直到 ctrl + c 停止

step3. 打開瀏覽器輸入網址

• http://localhost:5000：首頁，localhost 就是本機

左為內容，右為 condole.log 出來的 url

• http://localhost:5000/category：會看到畫面有 category

左為內容，右為 condole.log 出來的 url

• http://localhost:5000/redirect：會轉址到 https://google.com

status code 為 301

• http://localhost:5000/hahaha：會得到 404 Not Found

這樣就完成的 Server 端的實作。

重點整理

• http 是一種通訊協定，只要有做上網的動作就要遵照此協定。
• DNS 可以將 url 解析成實際的 IP Address。
• Client 端發出 request ；Server 端回傳 response。
• 網頁常用到的 http method 為 GET 及 POST 兩者差異在於，GET 偏向單純要東西，POST 會執行。
• Http status code 用來表示 Response 的狀態。常見的有：200、404、500。
• 可以利用 request 簡單製作 Client 端。
• 可以利用 node.js 內建 server 簡單製作 Server 端。

以上有任何錯誤的地方歡迎指正，感謝。