Web应用架构模式的分析及应用

3

文章编号：1007-757X(2011)01-0013-03

Web 应用架构模式的分析及应用

张帆，刘嵩

摘要：通过分析传统Web MVC 的局限，总结归纳了现代Web MVC 作为W eb 应用架构的开发模式。重点结合Ajax 、Comet 技术讨论了现代Web MVC 的优势和特点；比较了Ajax 、Comet 应用架构模式的有效性，为Web 开发者及系统架构师提供了构建W eb 应用的理论参考模型和统一框架，以便快速开发出高质量，有效的应用系统。关键词：Ajax ；Comet ；应用架构模式；参考模型；统一框架中图分类号：TP311文献标志码：A

0引言

在传统W eb MVC 架构模式中，人们往往指的是服务器端MVC ，而忽略了浏览器端MVC 。这是人们对MVC 架构模式认识上的局限。由于它只注重服务器端功能，使得浏览器端Web 表现层的灵活性不够，无法实时交互数据。针对这个问题，我们引入现代W eb MVC 架构模式。它通过构建浏览器端MVC 和服务器端MVC ，提高了Web 交互数据的实时性，同时增强了浏览器端Web 表现层的异步通信能力和灵敏度。

本文通过对经典MVC 架构模式的简要分析和归纳，阐明了MVC 在软件开发中的重要作用。针对人们对传统W eb MVC 模式认识上的局限，分析讨论了现代Web MVC 架构模式的优势。最后结合具体应用，进一步比较了Ajax 、Comet 等Web 架构模式的有效性，为软件开发者和架构师提供了有益的参考。

1Web 架构模式的分析

1.1

经典MVC 模式

MVC 英文即Model-View-Controller ，它是为编程语言Smalltalk-80发明的一种目前广泛流行的软件设计模式，主要包含三个层面：模型(Model)，视图(View)，控制器(Controller)。使用MVC 的目的是将创建和操作数据的代码分离即模型、视图、控制器的分离。

然而传统W eb MVC 架构模式面临二个问题：一是服务器端接收请求后通过控制器从模型中获取相应数据并生成视图，再response 到客户端，若页面进行局部刷新，就不得不发送整个页面的数据，这就包含了大量冗余信息。征对这

个问题,我们引入Ajax 客户端增强技术，这将在第三节进行

讨论；二是由于服务器端主要是采用分布式结构，因此当服

务器端模型变化后,它无法立即在服务器端将变化的数据即时发送给客户端。因而存在实时性不足,页面内容无法自动更新等问题。通过引入Comet 服务器端push 技术可以解决这个问题，这将在第四节进行讨论。1.2现代Web MVC 架构模式

客户端与服务器端在进行数据交互过程中，MVC 架构实际应用在Browser-Server 二端，即浏览器端MVC 和服务器端MVC 。服务器端控制器接收到用户请求后，从数据模型中取出相应数据并生成服务器端视图，再response 到客户

端。此时服务器端视图V 2实际上包括了浏览器端视图V 1、浏览器端控制器C 1、以及少量数据模型M 1，即V 2={V 1+C 1+M 1}，从而构建了浏览器端MVC 架构，如图1所示。

由图1可以看出，服务器发送给浏览器的就不仅仅是呈现给客户的视图，而是具有业务逻辑和控制器处理功能的XML 数据代码。服务器发送XML 数据后，首先由浏览器端控制器和数据模型获取并由控制器进行相应处理，最后生成浏览器端视图呈现给用户。当用户发送请求时，可将请求交给浏览器端控制器处理，由浏览器端控制器与服务器进行数据交互。

2基于Ajax 的客户端增强技术

通过使用Ajax 客户端增强技术，构建浏览器端MVC

架构模式，来弥补Web 客户端交互能力不足的问题。2.1Ajax 关键技术

Ajax 全称为“Asynchronous JavaScript and XML ”，是指

一种创建交互式网页应用的网页开发技术。具体包括：基于

XHTML 和CSS 标准的表示、使用Document Object Model 进行动态显示和交互、使用XML HttpRequest 与服务器进行异步通信、使用JavaScript 进行绑定。其中Ajax 最主要的特征就是XML HTTPRequest 对象的使用和DOM 的处理。2.2使用Ajax 构建浏览器端MVC 模式

通过引入Ajax 技术，构建了浏览器端MVC 架构。主要表现在：通过使用XML HttpRequest ，可以在浏览器端通过发送HTTP 请求与后台服务器进行动态异步数据交互。当用户在当前页面发送一个请求后，它可以通过Ajax 的XML HttpRequest 向服务器端控制器进行异步请求，然后控制器

———————————作者简介：张帆（1984-），男，暨南大学，硕士，湖北孝感人，研究方向：软件工程，数据挖掘，广州510632；

刘嵩（1986-），男，暨南大学，硕士，河北沧州人，研究方向：高性能数据库，广州

510632

1

从数据模型中获取相关数据并生成服务器端视图，并response到浏览器端。浏览器端Ajax获取服务器端的XML 文件后，将其解析并存储在文档对象模型（DOM）中，最后生成当面页面呈现给用户。这样用户再进行一些数据处理时，可以通过Ajax技术直接从Ajax的文档数据模型（DOM）中获取数据，而不必再发送一个请求到服务器端。只有确定需要从服务器读取新数据时才由Ajax引擎代为向服务器提交请求。这样通过引用Ajax技术便在浏览器端实现了控制器，数据模型以及视图的功能。这便是浏览器端MVC架构模式。

2.3基于Ajax技术的Web应用架构

浏览器端控制器组件可以通过Ajax的XML HttpRequest技术来异步发送请求，使得浏览器与服务器的数据交互可以异步交互传输。这样可以不用刷新整个页面就能与服务器端进行数据交互，使得客户端看起来像即时响应的桌面程序那样，加快了浏览器的响应速度，节省了用户等待时间。图2为基于Ajax技术的Web交互过程。

由图2可以看出，浏览器呈现给用户的是连续响应的，基于Ajax应用程序的数据的显示和传输是异步进行的。当数据请求或数据传输正在进行时，原来的数据显示界面可以不受影响。即Ajax程序可以仅向服务器端发送并取回必需的数据，同时很多处理工作可以在浏览器端完成。因此浏览器端MVC架构模式可以在很大程度上提高W eb表现层的交互能力。

3Comet架构模式对服务器端的改进

为了提高Web交互数据的实时性，本节介绍了Comet 技术，来对服务器端MVC架构模式进行改进，增强服务器端的MVC数据处理能力。

3.1存在的问题与解决方案

尽管通过引入Ajax技术，用户可以动态异步地向服务器发出请求。但这种请求无法保证客户端获取的数据是最新的。因为数据模型可能在服务器端发出信息后就进行了更新,因此无法进行实时通信。

为了解决Ajax实时性不足的问题，我们可以使用二种方法：第一种是浏览器每隔一段时间向服务器发出轮询以进行更新，即轮询方法；第二种方法是服务器始终打开与浏览器的连接并在数据更新时立即发送给浏览器的长连接技术，即Comet技术。

轮询方法的主要缺陷:为使客户端浏览器刷新当前页面，多长时间去服务器查询成了问题。高频率轮询会使网络承载过重，影响服务器速率；低频率轮询又会错过更新或传送一些失去时效的信息。因此使用Comet技术则优势明显,它不会产生大量通信量。同时在数据发生改变时，可将即时数据实时地“推送”给客户端。下文将详细介绍Comet技术。

3.2Comet相关概念

Comet就是一种服务器端push技术，就是当客户端向服务器发送一个请求后，服务器接受它，并使用一个无限循环将客户端所需的数据push到response中，只要response 不关闭，服务器就会将更新的数据推送给客户端。它通过保持一个长期即时更新的连接，持续从服务器端获取新的信息，由此实现实时通信。

3.3Comet异步响应工作模式

Comet来源于Publish/Subscribe设计模式，使得服务器端数据与客户端数据时刻保持一致。若数据发生更新，则服务器端必须将这些更改后的数据传送出去以达到对象间的同步。

通过引入Comet，使得客户端必须在异步初始化到服务器端的连接时保持工作。在服务器端，即使不能马上对请求做出回应，连接也要保持直到服务器端相关数据发生改变。当数据模型发生变化时，服务器端通过之前已经建立好的连接把产生变化的数据推送到客户端。如果存在并发的多个事件，服务器便可在此连接上发送多个事件数据而无需客户端每次都明确发出请求，Comet工作模式如图3。

图3显示的Comet应用程序异步响应模式图。从图中我们可以看出，服务器端可以在任意时刻向客户端发送数据，而不需要等待客户的请求。数据在一个预先打开的管道上传送，这种方法可以大幅度减少数据传输的延迟。若数据有所更新，服务器便可即时将数据推送到客户端。因此Comet的引入，增强了服务器处理实时数据的能力。

4在学生宿舍管理系统中的应用

学生宿舍管理系统以MyEclipse6.0作为开发平台，数据库用的是Oracle9i，使用的编程语言有Java,Jsp,JavaScript，DWR2.0，Ext JS等。

本系统通过在客户端引入Ajax技术，构建了浏览器端MVC架构。在客户端与服务器之间创建了Ext JS脚本文件，使得宿舍管理员向服务器发出请求时，由Ext JS脚本文件单独与后台服务器建立连接，实现了动态异步数据交互。如图4所示，若进行楼栋，舍区，收费标准，性别等信息进行设置时，管理员不需要向服务器发出请求，而是直接从浏览器端Model获取信息。当管理员需要再次读取曾经读取过的信息，则可直接从浏览器端Ajax文档数据模型（DOM）中获取，而不必再次与服务器进行交互。只有当宿舍管理员需要获取新的数据时，才由Ajax引擎与服务器进行数据交互

处理。14