# 網路應用程式運作原理 ## 電腦程式的的演進 ### 文字介面原生應用程式 使用者與電腦,使用文字進行溝通,讓使用者獲得所需資訊 ![](https://i.imgur.com/jIVea2J.png =450x300) ### 圖形介面原生應用程式 使用者與電腦,使用圖形化選單進行溝通,讓使用者獲得所需資訊 ![](https://i.imgur.com/zN35JZ4.jpg=450x300) ### 靜態網站 透過網路傳遞文字、圖片資料,單向對使用者傳遞資訊 ![](https://i.imgur.com/VX5rSUa.jpg) ### 動態網路應用程式 使用者可與網站互動,互相傳遞資料,網站內容會自動即時更新 ![](https://i.imgur.com/zn6NZ2a.jpg) ### 語音應用程式 使用者透過純語音來操作,獲得所需資訊 ![](https://i.imgur.com/7XBz0Jb.png =220x400) ## 網路應用程式的運作 在網路的世界中,分成`用戶端(Client)`與`伺服器端(Server)`。 ![](https://i.imgur.com/eMVxF71.png) 我們在瀏覽器輸入網址: www.google.com,然後瀏覽器回傳以下畫面 ![](https://i.imgur.com/77BIiNk.png) 在這個例子中,我們的電腦是`用戶端`、Google的網站資料存放在機房裡的電腦是`伺服器端`。 兩者的電腦是經過以下流程進行溝通: 1. 使用者發出`http request`:在瀏覽器輸入網址(`Url`):`https://www.google.com` 2. 對應的網站接收到`http request` - 如果是請求`靜態檔案`,例如文字、影片,就直接回傳資料給用戶端的瀏覽器,進入步驟4 - 如果不是,就將請求送到主機裡的網路應用程式,進入步驟3 3. 伺服器端的網路應用程式根據請求,處理結果,回覆`http response`跟`資料`給使用者端的瀏覽器 4. 使用者端的瀏覽器應用程式,根據接收到的`http response`跟`資料`,渲染出網頁內容給使用者 ## 隨堂練習 :::info 1. 請就以上分類,各舉出一個你知道的應用程式。 ::: :::info 2. 你認識哪些瀏覽器程式? ::: :::spoiler 參考答案 Microsoft Edge, Mozilla Firefox, Google Chrome, Apple Safari ::: ###### tags: `網路程式設計`