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

张帆，刘嵩

0 引言

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

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

1 Web架构模式的分析

1.1 经典MVC模式

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

然而传统Web MVC架构模式面临二个问题：一是服务器端接收请求后通过控制器从模型中获取相应数据并生成视图，再response到客户端，若页面进行局部刷新，就不得不发送整个页面的数据，这就包含了大量冗余信息。征对这个问题,我们引入Ajax客户端增强技术，这将在第三节进行讨论；二是由于服务器端主要是采用分布式结构，因此当服务器端模型变化后,它无法立即在服务器端将变化的数据即时发送给客户端。因而存在实时性不足,页面内容无法自动更新等问题。通过引入Comet服务器端push技术可以解决这个问题，这将在第四节进行讨论。

1.2 现代Web MVC架构模式

客户端与服务器端在进行数据交互过程中，MVC架构实际应用在Browser-Server二端，即浏览器端MVC和服务器端MVC。服务器端控制器接收到用户请求后，从数据模型中取出相应数据并生成服务器端视图，再response到客户端。此时服务器端视图V2实际上包括了浏览器端视图V1、浏览器端控制器 C1、以及少量数据模型 M1，即V2={V1+C1+M1}，从而构建了浏览器端MVC架构，如图1所示。

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

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

通过使用 Ajax客户端增强技术，构建浏览器端 MVC架构模式，来弥补Web客户端交互能力不足的问题。

2.1 Ajax关键技术

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

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

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

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

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

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

3.1 存在的问题与解决方案

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

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

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

3.2 Comet相关概念

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

3.3 Comet异步响应工作模式

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引擎与服务器进行数据交互处理。

图4 房间信息管理

通过使用jetty构建Comet服务器对系统进行改进，使得宿舍管理员在进行数据操作时获取的数据更具有实时性。由于采用分布式结构，当多个宿舍管理员同时操作本系统时，往往他们会对同一对象进行操作。显示效果如图5，从图中可以看到当某一楼栋的某一房间的待住人数为1时，其中一个管理员对其进行了添加使得服务器端此房间待住人数变为0。这意味着其他管理员的当前操作页面也必须实时地更新此信息，才能确保数据的准确。在 Comet架构模式应用中，一旦服务器发现有数据更新，它就主动把最新的数据以“推送”的方式发送到客户端，使得宿舍管理员获取的数据更及时，更具有实时性。同时也避免了宿舍管理员为了获取实时信息，而多次刷新当前页面。

图5 添加学生入住信息界面

5 结束语

利用 Ajax技术在表现层的优势，构建浏览器端 MVC架构，增强了客户端动态交互能力。同时应用 Comet架构模式构建后台服务器，实现了实时通信。在学生宿舍管理系统中，通过使用Ajax和Comet技术，使得系统在功能上都得到明显改进和提高。

[1]陈郑伟,彭岩,庄力可.基于 Ajax 的电子政务平台的研究与应用[J].计算机工程与应用,2007 ,43 (5):1962199.

[2]Wilkins Greg.Ajax ,Comet and J etty.[2006211202].[EB/OL].http://www.webtide.com/downloads/whitePaperAjaxJetty.html,2006.

[3]周牧,谈晓军,左 翔,崔雨勇.基于AJAX和XML 的WebGIS 系统研究.计算机工程,2009,7.

[4]Garret J J.AJAX: New Approach to Web Applications[J/OL].(2005-02-18).http://www.adaptivepath.com/publications/essays/archives/000385.

[5]王默玉,刘岩,刘林,李成榕,王辉.Web2.0-Comet-Continuations 模式在局部放电实时监测中的应用[J].吉林大学学报(工学版)2009,1 第39卷第1期.

[6]刘鑫,陈伟.基于AJAX和Server Push的Web树组件设计与实现[J].计算机工程与设计,2009,30(3).