資源簡介

(共35張PPT)
第三單元 第2課
我查詢你回答—瀏覽器與C/S架構
（清華大學版）七年級
上
1
核心素養目標
3
新知講解
5
拓展延伸
7
板書設計
2
新知導入
4
課堂練習
6
課堂總結
課后作業
8
01
核心素養目標
信息意識
計算思維
數字化學習與創新
信息社會責任
學習如何合法使用信息資源，認識到侵權和版權的重要性。通過討論與案例分析，能夠理解如何在數字環境中做出負責任的決策。
借助瀏覽器，能夠主動尋找學習資源，增強自學能力。學習如何與他人協作，通過共享信息與資源促進團隊創新。
在參與C/S架構的使用時，能夠將大問題分解為小任務，從而逐步解決。
通過瀏覽器訪問各種在線資源，學生可以學習如何鑒別信息的來源與真實性。
02
新知導入
本課中你將學習:
HTTP是如何支持"請求﹣響應“
瀏覽器為什么具有跨平臺的優勢
基于 C/S 架構的客戶端有哪些優勢
02
新知導入
瀏覽萬維網的信息就是通過客戶端發出請求，服務器對此進行響應的過程。但你是否注意過一個有趣的現象：臺式計算機大多是通過瀏覽器訪問，而智能手機與平板電腦等移動終端則大多是通過特定客戶端軟件實現，這背后有怎樣的考慮呢？
02
新知導入
03
新知講解
一、"請求一響應"的實現
HTTP的請求與響應，就如同"我查詢你回答"的對話過程，如圖3.2.1所示。
圖3.2.1 HTTP的請求與響應
通常由客戶端通過URL 向服務器發起請求，索要特定資源或發送相關數據；服務器接收到請求后，響應返回相關資源或處理數據；客戶端則在接收到相關資源或數據后，再由瀏覽器渲染生成網頁等。
03
新知講解
1．常用的HTTP請求方法
客戶端發起的請求主要通過不同的HTTP請求方法實現。HTTP有多種請求方法，最為常見的是GET與POST兩種。GET是一種相對安全的請求方法，主要是幫助客戶端從服務器獲取網頁數據與下載文件資源，但不對服務器做出任何修改。GET請求通常在URL中包含查詢參數，如圖3.2.2所示。
圖3.2.2 HTTP請求方法﹣GET
03
新知講解
POST方法主要用來將數據發送到服務器，如登錄、注冊、提交表單與上傳文件等操作。POST請求在URL中不包含查詢參數，數據通常包含在請求體中，如圖3.2.3所示。
圖3.2.3 POST請求方法
03
新知講解
2．常見的HTTP響應狀態碼
服務器接收到客戶端發出的請求后，通過 HTTP 響應狀態碼回應處理情況，以確保響應服務的順利開展。如圖3.2.4所示，HTTP響應狀態碼共有五類，每一類都由三個數字組成，每個數字代表不同的意義。其中第一個數字表示響應類別，其余兩個數字表示該響應類別下不同處理結果。
03
新知講解
常見的HTTP 響應狀態碼及代表意義有：200（表示響應成功）,400（表示語法錯誤）,403（表示服務器拒絕請求）,404（表示文件不存在）,500（表示服務器內部錯誤）等。
圖3.2.4 響應狀態碼類
03
新知講解
探索
嘗試手動輸入一個不存在的URL，查看瀏覽器返回的頁面，它所呈現的響應狀態碼是什么？
當你手動輸入一個不存在的URL時，瀏覽器通常會返回一個404 Not Found的狀態碼。這表示服務器無法找到請求的資源。不同的瀏覽器可能會呈現不同的錯誤頁面設計，但狀態碼一般是相同的。
03
知識拓展
客戶端錯誤狀態碼的類型
1.400 Bad Request：
服務器無法理解請求，因為語法錯誤。
2. 401 Unauthorized：
請求需要用戶身份驗證，通常用于需要登錄的資源。
3. 403 Forbidden：
服務器理解請求但拒絕訪問，通常因為權限不足。
03
知識拓展
客戶端錯誤狀態碼的類型
4.404 Not Found：
請求的資源不存在，常見的404錯誤頁面。
5.429 Too Many Requests：
用戶發送的請求過多，觸發了服務器的流量限制。
03
新知講解
二、跨平臺的瀏覽器
瀏覽器是網頁瀏覽器的簡稱，是一種用于檢索并展示萬維網信息資源的應用程序。作為萬維網切入口的重要工具，瀏覽器需要為用戶提供一種直觀且易于操作的人機界面。無論是臺式計算機還是智能手機、平板電腦等終端上的瀏覽器，都會突顯用來輸入URL的地址欄與展示信息資源的頁面窗口，如圖3.2.5和圖3.2.6所示。
03
新知講解
圖3.2.5 智能手機的瀏覽器
圖3.2.6 臺式計算機的瀏覽器
03
新知講解
瀏覽器（圖3.2.7）具有跨平臺的優勢。只要用戶終端安裝了任意一款瀏覽器，通常就可以訪問任何一家對外開放的網站。由于服務器端承擔了"請求一響應"的大部分工作，因此無須過多考慮用戶終端的各種復雜情況，從而大大減輕了開發、維護與使用的成本。但通過瀏覽器訪問也會存在某些不足，如服務器響應時間相對較長、安全相對難以保障及界面個性化設置支持不夠等。
圖3.2.7 各種瀏覽器
03
新知講解
探索
選擇并使用兩款瀏覽器，體驗前進、后退、搜索、下載與收藏等功能，并對比分析用戶界面、加載速度、個性化設置與用戶隱私等方面的差異。
用戶界面：
Google Chrome:界面簡潔直觀，地址欄和搜索框合二為一。
Mozilla Firefox:界面相對靈活，用戶可以通過添加或移除工具欄按鈕進行自定義。
加載速度：
Google Chrome:一般被認為加載速度較快，得益于 V8 JavaScript 引擎的優化。
Mozilla Firefox:比前者稍慢，尤其是在處理多個擴展的情況下。
03
新知講解
探索
選擇并使用兩款瀏覽器，體驗前進、后退、搜索、下載與收藏等功能，并對比分析用戶界面、加載速度、個性化設置與用戶隱私等方面的差異。
個性化設置：
Google Chrome:提供一些基本的個性化選項，如更改主題、設置主頁等。
Mozilla Firefox:提供更深入的個性化設置，如改進的隱私選項、更強的自定義工具欄和擴展。用戶隱私：
Google Chrome:默認設置較少限制廣告跟蹤和數據收集，用戶需要自行調整隱私設置。Mozilla Firefox:用戶隱私保護意識較強，提供了更多控件，如跟蹤保護和去除廣告跟蹤。
03
知識拓展
瀏覽器有哪些具體的功能？
1.頁面加載：
接收用戶的URL請求，并從服務器加載相應的網頁。
2.渲染引擎：
將HTML、CSS、JavaScript等轉化為用戶可見的內容。
3.緩存：
儲存以前訪問過的網頁以減少加載時間。
03
知識拓展
瀏覽器有哪些具體的功能？
4.擴展與插件：
通過安裝額外功能，增強瀏覽器的功能性。
5.安全性管理：
包括HTTPS支持、惡意軟件防護、隱私保護等功能。
03
新知講解
三、C/S架構的客戶端
除了使用瀏覽器訪問萬維網外，我們還可以通過其他客戶端實現。例如安裝某新聞網站平臺指定的新聞客戶端后，就可以檢索、閱讀、關注與評價該網站的新聞，享受個性化的欄目設置與新聞推送等系列服務，從而體驗到相對更為友好的交互性，如圖3.2.8所示。
圖3.2.8 提供個性化服務的客戶端
03
新知講解
客戶端的這些優勢在于其采用了與瀏覽器完全不一樣的C/S架構。C/S架構又稱為客戶端／服務器模式，是一種軟件系統的體系結構。這種結構可以將"請求一響應"工作合理地分配給客戶端和服務器端，從而降低對網絡與服務器的要求，響應時間相對較短，安全也更有保障。這種結構是專為網站平臺量身定制的，因此更能滿足用戶的個性化需求，界面功能也相對更加豐富。但C/S架構只能向已安裝的固定用戶提供個性化服務。另外，其還要顧及各種用戶終端的復雜情況，這就導致出現了開發成本高、升級維護困難等問題。
03
知識拓展
C/S架構的客戶端特點：
后客戶端：很多邏輯和處理通常在客戶端完成，減少了對服務器的依賴。
交互性：提供豐富的用戶界面，能夠使用戶進行各種操作。
網絡依賴：客戶端需要與服務器進行通訊，通常依賴于網絡連接。
04
課堂練習
以新聞類網站平臺為例，分別從程序安裝、響應速度、界面特點、功能模塊、視覺效果、個性化服務等方面，分析瀏覽器與C/S 架構客戶端在用戶體驗方面的差異，并填寫在表3.1.1中。
挑戰
角度 臺式計算機上的瀏覽器 智能手機上的C/S架構客戶端
程序安裝 只安裝瀏覽器訪問網站即可 需單獨下載并安裝客戶端軟件
響應速度 受限于服務器響應和寬帶 可在本地進行更多處理，響應更快
表3.1.1 新聞類網站客戶端用戶體驗分析
04
課堂練習
挑戰
角度 臺式計算器上的瀏覽器 智能手機上的C/S架構客戶端
界面特點 設計靈活，響應式強 可多設備訪問 界面能自定義控件支持多種交互方式
功能模塊 限制于網頁技術有所不足 可提供更多復雜功能
視覺效果 表現越來越強但不同設備有差異 支持更高質量圖像處理且表現穩定
個性化服務 可通過賬戶同步多設備間數據 可享更多基于本地數據的個性化體驗
表3.1.1 新聞類網站客戶端用戶體驗分析（續）
05
拓展延伸
C/S架構未來會被淘汰嗎？
05
拓展延伸
瀏覽器發展的未來趨勢有哪些？
1、性能提升：
繼續優化速度和性能，例如選擇升級更好的引擎。
2.用戶隱私：
更多關注用戶數據保護和隱私安全。
3.PWA支持：
漸進式Web應用程序（PWA）將得到更廣泛的支持。
05
拓展延伸
C/S架構有哪些優勢？
減少網絡延遲：在某些情況下，客戶端與服務器之間的交互量較少，可以降低網絡延遲，提高用戶體驗。
支持離線使用：客戶端可以在沒有網絡連接時運行某些功能，提升應用的可用性。
定制化需求：C/S架構可以根據特定業務需求定制客戶端，靈活適應不同的行業和功能要求。
05
拓展延伸
C/S架構有哪些優勢？
4.數據處理控制：敏感數據可以在客戶端進行處理，避免頻繁傳輸到服務器上，減少數據風險。
5.快速訪問數據：可以將常用數據存儲在客戶端，提升數據訪問速度，減少對服務器的頻繁請求。
07
課堂總結
1
引入新知內容
我查詢你回答—瀏覽器與C/S架構
2
了解常用HTTP的相關知識
3
認識瀏覽器與C/S架構并進行對比
4
進行課堂練習
5
進行相關知識拓展
1
2
3
4
5
08
板書設計
我查詢你回答—瀏覽器與C/S架構
1.進行新知引入
2.學習新知講解
3.完成課堂練習
4.進行知識拓展
09
課后作業
01
學習本課之后說說你對瀏覽器與C/S架構的了解，寫一篇不少于800字的報告。
https://www.21cnjy.com/recruitment/home/fine

展開更多......

收起↑