(共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
