Web应用程序的介绍 ※
1、Web应用程序的介绍 ※
须知：加了※的内容要求重点掌握本章、本节或本小节的内容。在开始开发Web应用程序之前，我们需要先了解一下目前存在的两种软件架构。这样能够更好的帮助你开发网站。
1.1. C/S架构
C/S体系结构是Client/Server的缩写，即客户端/服务器端结构。C/S 架构是一种典型的两层架构，即客户端服务器端架构，其客户端包含一个或多个在用户的电脑上运行的程序，而服务器端有两种，一种是数据库服务器端，客户端通过数据库连接访问服务器端的数据；另一种是Socket服务器端，服务器端的程序通过Socket与客户端的程序通信。客户端需要安装专用的客户端软件。
C/S 架构也可以看做是胖客户端架构。因为客户端需要实现绝大多数的业务逻辑和界面展示。这种架构中，作为客户端的部分需要承受很大的压力，因为显示逻辑和事务处理都包含在其中，通过与数据库的交互（通常是SQL或存储过程的实现）来达到持久化数据，以此满足实际项目的需要。
它的运行效果图可以理解为下图：
1.1.1. C/S架构的优点
那么使用C/S架构有什么好处呢？简单概括有以下几点：
Ø C/S架构的界面和操作可以很丰富。
Ø 安全性能可以很容易保证，实现多层认证也不难。
Ø 由于只有一层交互，因此响应速度较快。
1.1.2. C/S架构的缺点
同理的，C/S架构也存在以下的缺陷：
Ø 适用面窄，通常用于局域网中。
Ø 用户群固定。由于程序需要安装才可使用，因此不适合面向一些不可知的用户。
Ø 维护成本高，发生一次升级，则所有客户端的程序都需要改变。
B/S体系结构：Browser/Server的缩写，即浏览器/服务器结构。Browser指的是Web浏览器，极少数事务逻辑在前端实现，但主要事务逻辑在服务器端实现，Browser客户端，Web应用服务器端和DB端构成所谓的三层架构。B/S架构的系统无须特别安装，只要Web浏览器即可。
B/S架构中，显示逻辑交给了Web浏览器，事务处理逻辑在放在了Web服务器上，这样就避免了庞大的胖客户端，减少了客户端的压力。因为客户端包含的逻辑很少，因此也被成为瘦客户端。
它的运行效果图可以理解为下图：
1.2.1. B/S架构的优点
Ø 客户端无需安装，有Web浏览器即可。
Ø B/S架构可以直接放在广域网上，通过一定的权限控制实现多客户访问的目的，交互性较强。
Ø B/S架构无需升级多个客户端，升级服务器的代码即可。
1.2.2. B/S架构的缺点
Ø 在跨浏览器上，B/S架构不尽如人意。因为不同的浏览器内核不同，显示的网页内容会存在一些兼容性问题。
Ø 表现要达到C/S程序的程度需要花费不少精力。
Ø 在速度和安全性上需要花费巨大的设计成本，这是B/S架构的最大问题。
Ø 客户端服务器端的交互是请求-响应模式，通常需要刷新页面，这并不是客户乐意看到的。目前可以使用Ajax技术解决这个问题。
Web 应用程序大致可以分为两种，即静态网站和动态网站。早期的 Web 应用主要是静态页面的浏览，即静态网站。
随着互联网技术的发展，更多的内容需根据用户的请求动态生成页面信息，即动态网站。
那么什么是静态网站？什么是动态网站呢？它们的工作原理又是怎样的呢？
1.3.1. 静态网页
静态网页强调的是静态，那么这个静态怎么理解呢？静态可以理解为静止状态，强调的是状态固定的情况。那么我们所说的静态网页指的就是纯粹的HTML文件。也就是通过编辑器开发出来的HTML网页。那么为什么使用静态网页来形容纯粹的HTML网页呢？
我们可以这样思考，我们使用编辑器开发过HTML网页都知道，在浏览器运行网页，都能展示出对应编写好的网页效果。如果我们想要网页内容每次都有所变化，是不是每次都需要修改HTML代码才行。人修改代码的动作是动态的，但是原本的HTML网页相对浏览器来说它本身依旧是静止的。也就是每次浏览器运行的网页本身都是同一份。什么情况下这个网页才不是静态的呢？当不再需要人为使用编辑器修改HTML代码更新网页，网页内容也会自动变化时，它就不是静态网页而是动态网页了。具体我会在后面的动态网页中详细介绍什么是动态网页。这里先理解什么是静态网页。会发现静态网页每次更新网页会很麻烦。
那么静态网页的请求访问过程是怎样的呢？我们一起来看下面这个网页请求访问图：
我们都知道，我们访问一个网站时都是需要通过浏览器来访问的。所以浏览器指代的就是客户端。当我们在浏览器的地址栏输入网址按下回车后，浏览器通过HTTP协议发送请求访问到指定的服务器，网页服务器根据你请求的页面返回指定的静态页面。当浏览器获取到返回的静态页面后渲染静态页面的代码，在浏览器就可以看到静态页面的效果了。
这个过程其实跟我们在本地使用浏览器打开静态网页的作用是一样的，只是没有产生HTTP协议发送请求访问服务器获取静态页面的过程。
1.3.2. 动态网站
所谓的动态网页，是跟静态网页相对的一种网页编程技术。静态网页，随着HTML代码的生成，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。
有时候新手很容易将动态网页和动感网页混淆。动态网页强调的是网页的基本结构不会变，而某个区域的内容可以根据用户的需求从数据库获取数据回来动态的改变。动感网页页面基本是固定的，只是内容有一些动态效果，例如轮播图切换、文字滚动、动画效果等，但是内容并没有有所变化。
总之，动态网页不再是纯粹的HTML网页文件，而是结合了后端语言编写的网页。也就是HTML和Java、JSP、PHP、Python、Visual Basic等高级程序设计语言组合开发的网站。
例如我们在百度的首页中输入不同的关键字，都能搜索出不同的内容展示一样，网站的基本排版样式并没有改变，只是搜索出来的结果展示有所变化，那么百度就是一个动态网站。除此之外，像我们经常打开的QQ空间，不同QQ用户登录所看到的结果是不同的，但是它的排版格式样式都是一样的。动态网站的访问效果如下图所示：
前面了解了静态网页的请求过程后，我们会发现动态网站和静态网站的访问过程基本差不多。那么核心的区别在于后端的Web服务器中，多了一个动态脚本程序和数据库的交互过程。它的处理过程是，当浏览器发送请求访问Web服务器，Web服务器处理请求，后端语言可以根据请求的要求判断是否需要从数据库中获取数据，如果需要获取数据则直接从数据库中获取数据，将数据和HTML页面组合，再返回响应到浏览器中展示。如果请求不涉及数据库，后端语言则可以直接处理请求返回HTML页面，将结果响应到浏览器中展示。从而实现动态网站的效果。
1.4. 本节实践练习题
前面简单的介绍了软件架构和Web应用程序的请求原理。请简单的完成下面的几道练习题。
1.4.1. 实践题
实践题：网站请求的过程是怎样的？（本题在面试过程中经常会问到）
答：
1.4.2. 71慕课网同步练习链接
在71慕课中写完提交可直接帮你批改：
http://www.71muke.com/test/info/5225
实践题答案
本题答案解析：由于这题在面试过程中经常问到，所以这题要求必须掌握。
一个Web应用程序一般都是由客户端程序与服务端程序两部分组成。其中，客户端主要是指用户和浏览器，用户可以通过浏览器查找所需的资源，而这些资源则位于服务器上。浏览器是一个工具软件，它主要有两个作用：一是完成与服务端的交互，二是完成HTML（Hyper Text Mark-up Language，超文本标记语言，用来告诉浏览器怎样给用户展示内容）的解析，从而实现把用户需要查看的资源信息以直观的形式展现出来。服务端用来接收客户端发来的请求，并对该请求进行处理，找到客户端请求的资源，最后把查找到的资源返回给客户端，这些资源主要包括HTML页面、图片、音频、视频、PDF文件等内容。
下图2-1给出了最基本的页面请求与响应的流程。
图2-1页面请求与响应
（1） 用户通过浏览器输入链接地址来请求所需的资源。
（2） 浏览器接受用户的请求，并把该请求组装成指定的格式发送给服务端，客户端与服务端之间通过HTTP协议来完成具体的交互。其中请求的数据流中主要包含HTTP（Hypertext transfer protocol，超文本传输协议，建立在TCP/IP协议基础上的一个协议，主要用来实现客户端与服务端之间的通信）请求方法（GET或POST）、请求的网址（URL，全称Uniform Resource Locator，统一资源定位符）以及请求的一些参数信息。（当然在把数据发送给服务器之前，首先需要根据网页地址获取服务器的IP地址，这就需要通过访问DNS服务器来完成）。
（3） 服务器接收到客户端发来的请求，并查找用户所需要的资源。
（4） 服务器查找到用户请求的资源后，把该资源返回给客户端。
（5） 服务器通过把响应消息组装成特定的消息格式后返回给客户端，这个过程通过HTTP协议来完成。响应的数据流主要包含状态码（代表请求成功或失败），Content-type（例如text、picture、HTML等），响应消息的内容（图片或HTML格式的内容）。
浏览器对HTML进行解析后并把响应结果展现给用户。
需要购买本课才能留言哦~