網路功能(Q1、Q2)

Q1: 資訊如何可靠地傳輸?

類似 郵差送掛號/收包裹
(位址、包裹、路徑、簽收)

1. 可上網的裝置都會有專一的IP (Internet Protocol)位址
2. 資料傳輸單位: 封包(packet)
3. 確保網路傳輸的可靠性reliability - 路由器(router)
4. 確保資料完整抵達- 傳輸控制協定 TCP (Transmission Control Protocol)

Q2: 設備間如何溝通?

(明確語言、一來一反)

1.設備間的溝通語言是- Protocol 通訊協定(傳輸協定)
不同場合，需使用不同協定。有明確的格式、語法。

• 一來一反的溝通為request/ response cycle，HTTP(Hyper Text Transfer Protocol)超文本傳輸協定，有明確定義格式。

2.2種角色
client-side 用戶端: 提出請求的一方(browser)。
server-side 伺服器端: 回應資料的一方。

用戶端與伺服器的請求-回應(Q3、Q4)描述網路元件溝通的過程

網路應用程式 (web application)

• 以網路的傳遞機制為基礎，可以直接在網路上執行，只要打開瀏覽器，連線上網，就可以開始使用。
• 不受硬體和作業系統的限制。
• 網站運作須符合網路internet的運作機制，相對也有限制。

Q3: 從使用者在網址列輸入網址並按下 Enter、到瀏覽器顯示出畫面間，發生了什麼事？

(注意主詞、動詞)

• Client-side 每一次發HTTP request，都在請求一筆網路資源

• Server-side server需定義資源，並設定資源的請求方法。

1.browser(用戶端)>>>向一個位於 (DNS, IP) www.google.com 的遠端server "發出"請求。
2.請求藉由網路"傳遞"到 www.google.com 位址。
3.位在 www.google.com 的遠端server "收到"請求。
4.server 根據請求"找出"一組對應的網路資源(html file, CSS file)
5.sever <<<<"回傳"對應資源到browser。
6.browser"收到"請求內容，"解析"資源，"顯示"畫面。

Q4: 使用者點擊網頁頁面上的某個元件，引發了畫面狀態改變，這又是如何發生的？

DevTools 的 Network 面板，在browser刷新畫面的瞬間，看到有一堆內容跑出來，這些是sever回傳過來的內容

1.browser(用戶端)>>>向一個位於 (DNS、IP)位址的遠端server "發出"請求。
2.請求藉由網路"傳遞"到 (DNS、IP)位址。
3.位在(DNS、IP)的遠端server "收到"請求。
4.針對"路徑"存放的網路資源。
5.server "檢查" browser的"權限"
有權限-回應相對應的資源; 沒權限-回應錯誤訊息。
6.sever <<<<"回傳"對應資源到browser。
7.browser"收到"請求內容，"解析"資源，"顯示"畫面。
8.網址列出現變化(路徑改變)