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

MicrocomputerApplicationsVol.27,No.1,2011

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

研究与设计微型电脑应用2011年第27卷第1期

Web

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

张帆，刘嵩

摘要：通过分析传统WebMVC的局限，总结归纳了现代WebMVC作为Web应用架构的开发模式。重点结合Ajax、Comet

技术讨论了现代WebMVC的优势和特点；比较了Ajax、Comet应用架构模式的有效性，为Web开发者及系统架构师提供

了构建Web应用的理论参考模型和统一框架，以便快速开发出高质量，有效的应用系统。

关键词：Ajax；Comet；应用架构模式；参考模型；统一框架

中图分类号：TP311文献标志码：A

0引言

在传统WebMVC架构模式中，人们往往指的是服务器

端MVC，而忽略了浏览器端MVC。这是人们对MVC架构

模式认识上的局限。由于它只注重服务器端功能，使得浏览

器端Web表现层的灵活性不够，无法实时交互数据。针对

这个问题，我们引入现代WebMVC架构模式。它通过构建

浏览器端MVC和服务器端MVC，提高了Web交互数据的

实时性，同时增强了浏览器端Web表现层的异步通信能力

和灵敏度。

本文通过对经典MVC架构模式的简要分析和归纳，阐

明了MVC在软件开发中的重要作用。针对人们对传统Web

MVC模式认识上的局限，分析讨论了现代WebMVC架构

模式的优势。最后结合具体应用，进一步比较了Ajax、Comet

等Web架构模式的有效性，为软件开发者和架构师提供了

有益的参考。

端。此时服务器端视图V

2

实际上包括了浏览器端视图V

1

、

浏览器端控制器C

1

、以及少量数据模型M

1

，即

V

2

={V

1

+C

1

+M

1

}，从而构建了浏览器端MVC架构，如图1

所示。

由图1可以看出，服务器发送给浏览器的就不仅仅是呈

现给客户的视图，而是具有业务逻辑和控制器处理功能的

XML数据代码。服务器发送XML数据后，首先由浏览器

端控制器和数据模型获取并由控制器进行相应处理，最后生

成浏览器端视图呈现给用户。当用户发送请求时，可将请求

交给浏览器端控制器处理，由浏览器端控制器与服务器进行

数据交互。

1Web架构模式的分析

经典MVC模式

MVC英文即Model-View-Controller，它是为编程语言

Smalltalk-80发明的一种目前广泛流行的软件设计模式，主

要包含三个层面：模型(Model)，视图(View)，控制器

(Controller)。使用MVC的目的是将创建和操作数据的代码

分离即模型、视图、控制器的分离。

然而传统WebMVC架构模式面临二个问题：一是服务

器端接收请求后通过控制器从模型中获取相应数据并生成

视图，再response到客户端，若页面进行局部刷新，就不得

不发送整个页面的数据，这就包含了大量冗余信息。征对这

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

1.1

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

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

架构模式，来弥补Web客户端交互能力不足的问题。

2.1Ajax关键技术

Ajax全称为“AsynchronousJavaScriptandXML”，是指

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

务器端模型变化后,它无法立即在服务器端将变化的数据即

时发送给客户端。因而存在实时性不足,页面内容无法自动

更新等问题。通过引入Comet服务器端push技术可以解决

这个问题，这将在第四节进行讨论。

1.2现代WebMVC架构模式

客户端与服务器端在进行数据交互过程中，MVC架构

实际应用在Browser-Server二端，即浏览器端MVC和服务

器端MVC。服务器端控制器接收到用户请求后，从数据模

型中取出相应数据并生成服务器端视图，再response到客户

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

XHTML和CSS标准的表示、使用DocumentObjectModel

进行动态显示和交互、使用XMLHttpRequest与服务器进行

异步通信、使用JavaScript进行绑定。其中Ajax最主要的特

征就是XMLHTTPRequest对象的使用和DOM的处理。

2.2

使用

Ajax

构建浏览器端

MVC

模式

通过引入Ajax技术，构建了浏览器端MVC架构。主

要表现在：通过使用XMLHttpRequest，可以在浏览器端通

过发送HTTP请求与后台服务器进行动态异步数据交互。当

用户在当前页面发送一个请求后，它可以通过Ajax的XML

HttpRequest向服务器端控制器进行异步请求，然后控制器

———————————

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

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

13

MicrocomputerApplicationsVol.27,No.1,2011研究与设计微型电脑应用2011年第27卷第1期

从数据模型中获取相关数据并生成服务器端视图，并

response到浏览器端。浏览器端Ajax获取服务器端的XML

文件后，将其解析并存储在文档对象模型（DOM）中，最

后生成当面页面呈现给用户。这样用户再进行一些数据处理

时，可以通过Ajax技术直接从Ajax的文档数据模型（DOM）

中获取数据，而不必再发送一个请求到服务器端。只有确定

需要从服务器读取新数据时才由Ajax引擎代为向服务器提

交请求。这样通过引用Ajax技术便在浏览器端实现了控制

器，数据模型以及视图的功能。这便是浏览器端MVC架构

模式。

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

浏览器端控制器组件可以通过Ajax的XML

HttpRequest技术来异步发送请求，使得浏览器与服务器的

数据交互可以异步交互传输。这样可以不用刷新整个页面就

能与服务器端进行数据交互，使得客户端看起来像即时响应

的桌面程序那样，加快了浏览器的响应速度，节省了用户等

待时间。图2为基于Ajax技术的Web交互过程。

Comet就是一种服务器端push技术，就是当客户端向

服务器发送一个请求后，服务器接受它，并使用一个无限循

环将客户端所需的数据push到response中，只要response

不关闭，服务器就会将更新的数据推送给客户端。它通过保

持一个长期即时更新的连接，持续从服务器端获取新的信

息，由此实现实时通信。

3.3Comet异步响应工作模式

Comet来源于Publish/Subscribe设计模式，使得服务器

端数据与客户端数据时刻保持一致。若数据发生更新，则服

务器端必须将这些更改后的数据传送出去以达到对象间的

同步。

通过引入Comet，使得客户端必须在异步初始化到服务

器端的连接时保持工作。在服务器端，即使不能马上对请求

做出回应，连接也要保持直到服务器端相关数据发生改变。

当数据模型发生变化时，服务器端通过之前已经建立好的连

接把产生变化的数据推送到客户端。如果存在并发的多个事

件，服务器便可在此连接上发送多个事件数据而无需客户端

每次都明确发出请求，Comet工作模式如图3。

由图2可以看出，浏览器呈现给用户的是连续响应的，

基于Ajax应用程序的数据的显示和传输是异步进行的。当

数据请求或数据传输正在进行时，原来的数据显示界面可以

不受影响。即Ajax程序可以仅向服务器端发送并取回必需

的数据，同时很多处理工作可以在浏览器端完成。因此浏览

器端MVC架构模式可以在很大程度上提高Web表现层的交

互能力。

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

为了提高Web交互数据的实时性，本节介绍了Comet

技术，来对服务器端MVC架构模式进行改进，增强服务器

端的MVC数据处理能力。

3.1存在的问题与解决方案

尽管通过引入Ajax技术，用户可以动态异步地向服务

器发出请求。但这种请求无法保证客户端获取的数据是最新

的。因为数据模型可能在服务器端发出信息后就进行了更新,

因此无法进行实时通信。

为了解决Ajax实时性不足的问题，我们可以使用二种

方法：第一种是浏览器每隔一段时间向服务器发出轮询以进

行更新，即轮询方法；第二种方法是服务器始终打开与浏览

器的连接并在数据更新时立即发送给浏览器的长连接技术，

即Comet技术。

轮询方法的主要缺陷:为使客户端浏览器刷新当前页

面，多长时间去服务器查询成了问题。高频率轮询会使网络

承载过重，影响服务器速率；低频率轮询又会错过更新或传

送一些失去时效的信息。因此使用Comet技术则优势明显,

它不会产生大量通信量。同时在数据发生改变时，可将即时

数据实时地“推送”给客户端。下文将详细介绍Comet技

术。

3.2Comet相关概念

14

图3显示的Comet应用程序异步响应模式图。从图中

我们可以看出，服务器端可以在任意时刻向客户端发送数

据，而不需要等待客户的请求。数据在一个预先打开的管道

上传送，这种方法可以大幅度减少数据传输的延迟。若数据

有所更新，服务器便可即时将数据推送到客户端。因此

Comet的引入，增强了服务器处理实时数据的能力。

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

学生宿舍管理系统以MyEclipse6.0作为开发平台，数据

库用的是Oracle9i，使用的编程语言有Java,Jsp,JavaScript，

DWR2.0，ExtJS等。

本系统通过在客户端引入Ajax技术，构建了浏览器端

MVC架构。在客户端与服务器之间创建了ExtJS脚本文件，

使得宿舍管理员向服务器发出请求时，由ExtJS脚本文件单

独与后台服务器建立连接，实现了动态异步数据交互。如图

4所示，若进行楼栋，舍区，收费标准，性别等信息进行设

置时，管理员不需要向服务器发出请求，而是直接从浏览器

端Model获取信息。当管理员需要再次读取曾经读取过的

信息，则可直接从浏览器端Ajax文档数据模型（DOM）中

获取，而不必再次与服务器进行交互。只有当宿舍管理员需

要获取新的数据时，才由Ajax引擎与服务器进行数据交互

处理。

MicrocomputerApplicationsVol.27,No.1,2011研究与设计微型电脑应用2011年第27卷第1期

5结束语

图4房间信息管理

利用Ajax技术在表现层的优势，构建浏览器端MVC

架构，增强了客户端动态交互能力。同时应用Comet架构

模式构建后台服务器，实现了实时通信。在学生宿舍管理系

统中，通过使用Ajax和Comet技术，使得系统在功能上都

得到明显改进和提高。

通过使用jetty构建Comet服务器对系统进行改进，使

得宿舍管理员在进行数据操作时获取的数据更具有实时性。

由于采用分布式结构，当多个宿舍管理员同时操作本系统

时，往往他们会对同一对象进行操作。显示效果如图5，从

图中可以看到当某一楼栋的某一房间的待住人数为1时，其

中一个管理员对其进行了添加使得服务器端此房间待住人

数变为0。这意味着其他管理员的当前操作页面也必须实时

地更新此信息，才能确保数据的准确。在Comet架构模式

应用中，一旦服务器发现有数据更新，它就主动把最新的数

据以“推送”的方式发送到客户端，使得宿舍管理员获取的

数据更及时，更具有实时性。同时也避免了宿舍管理员为了

获取实时信息，而多次刷新当前页面。

参考文献

[1]陈郑伟,彭岩,庄力可.基于Ajax的电子政务平台的研究

与应用[J].计算机工程与应用,2007,43(5):1962199.

[2],CometandJetty.[2006211202].[EB/

OL]./downloads/

,2006.

[3]周牧,谈晓军,左翔,崔雨勇.基于AJAX和XML的

WebGIS系统研究.计算机工程,2009,7.

[4]:NewApproachtoWeb

Applications[J/OL].(2005-02-18).vepath

.com/publications/essays/archives/000385.

[5]王默玉,刘岩,刘林,李成榕,王辉.Web2.0-Comet-

Continuations模式在局部放电实时监测中的应用[J].吉

林大学学报(工学版)2009,1第39卷第1期.

[6]刘鑫,陈伟.基于AJAX和ServerPush的Web树组件设

计与实现[J].计算机工程与设计,2009,30(3).

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

（收稿日期：

2010-09-30

）

（上接第6页）性能提出了空前的要求，而磁盘阵列作为一种高速、廉价、

可靠、大容量的存储技术得到了快速发展和广泛应用。充分

利用通用处理器和可编程逻辑器件各自的特点，用软硬件结

合的方法实现RAID6系统，成本低，开发周期短，效果好。

参考文献

[1]PeterAnvinH.“TheMathematicsofRAID6”,Last

updated2July2008.

[2]MichaelGilroy，JamesIrvine，“RAID6Hardware

Acceleration”,FieldProgrammableLogicand

Applications,'ationalConferenceon

28-30Aug.2006.

[3]，“ATutorialonReed-SolomonCodingfor

Fault-ToleranceinRAID-likeSystems”,TechnicalReport

CS-96-332,DepartmentofComputerScienceUniversity

ofTennessee.

[4]MattDiPaolo,“HardwareAcceleratorforRAID6Parity

Generation/DataRecoveryControllerwithECCand

MIGDDR2Controller”,May2.2007,XilinxCorporation.

[5]Intel80333IOProcessorDeveloper’s

Manual,March.2005,IntelCorporation.

图3RAID6系统框图

修改LinuxRAID的设备驱动程序，用对加速器的调用

代替软件的函数调用，用软件填充加速器的状态/控制寄存

器来通知加速器将要进行的工作。

与纯软件实现相比，软硬件协同实现的RAID6系统

CPU占用率降低了约40%-50%，处理速度提高了约3倍，

这是因为加速器分担了CPU的计算任务，CPU可以去做其

他的工作，CPU与加速器的工作可并行进行。

4结束语

近年来随着Internet以及其他网络的飞速发展，计算机

CPU处理能力的快速增长，对信息存储设备的容量和容错

（收稿日期：2009-01-09）

15

MicrocomputerApplicationsVol.27,No.1,2011ABSTRACTS&KEYWORDS微型电脑应用2011年第27卷第1期

ISSN1007-757XZhuZhongying

Editor-in-Chief

Vol.27,No.1(GeneralNo.213)

January2011

CONTENTS

MicrocomputerApplications

Monthly(Since1985)

EXPERTFORUM

SurveyonNewTrendsofSoftwareTechnologyofInternetofThings………………………………………………………………（1）

LiGuangya(ShanghaiWondersInformationCompanyLimited,Shanghai201112,China）

Abstract:ThispapersurveysthedefinitionsofCPS,InternetofThings,RFID,SmarterPlanet,WSN,CloudComputingandsofar,introducingthe

definitions,motivations,y,combinedwiththestatusofShanghai,thepaper

analyzesthepracticalstrategyandpolicyonthedevelopmentofInternetofThingsandSmarterPlanetduringtheTwelfthFive-Yearperiod.

Keywords:CPS;InternetofThings(IoT);RFID;SmarterPlanet;WSN;CloudComputing

RESEARCHANDDESIGN

DesignandImplementationofRAID6HardwareAcceleratorBasedonFPGA……………………………………………………（5）

DongChun,ShiLiang(DepartmentofAutomationDepartment,ShanghaiJiaotongUniversity,Shanghai200240,China)

Abstract:Inthispaper,ahardwareacceleratorbasedonFPGAforRAID6paritygenerationisintroduced，softwareparitycalculationisreplacedby

hardwaremeansandinterfaceisdesignesreleasestheCPUfrom

intensivecalculations,processingandrespondingspeedofthesystemaregreatlyimproved.

Keywords:RAID6;FPGAGalois;FieldReed-SolomnCodec

ResearchonAcceleratingXMLProcessingwithHardware…………………………………………………………………………（7）

YanWei,ShiLiang（DepartmentofAutomation,ShanghaiJiaotongUniversity,Shanghai200240,China）

Abstract:ThispaperfirstlyintroducessomebasicprinciplesofXMLaccelerator,andthenfocusesonthediscussionofthepivotalstepofaccelerating

rastwithDOMandSAX,thepaperelaboratesonanewparsingtechniquenamedVTD-XML,including

aworkchartisgiventoillustratethesystem.

Keywords:XMLAccelerator;Parse;VTD;Non-extractive

ResearchonSecurityModelofGridComputing……………………………………………………………………………………（10）

ShiJiming(ShanghaiYIKEInformationTechniqueCompanyLimited,Shanghai200127,China)

Abstract:GridComputingisanewstylecomputingpntyears,more

unately,mostclassicmethodsfailtodowellinauthoritymanagement,

perresearchesandusessomeexistingsecurityframeworkasasourceof

referencebasedondeepanalysisofthesecuritydemandofgridcomputingsystems,andproposesanewsecurityarchitecturemodelinrespectofdesign

andimplementation,whichisoffavorableexpansibility,rmore,implementarystrategiesofinteraction

betweendifferententitiesandcorrespondingsecuritypoliciesarestudiedanddiscussedindetail.

Keywords:Grid;GridComputingSystem;GridSecurityFrameworkGIS;GridComputingSystemSecurityArchitectureModel

WebApplicationArchitectureAnalysisandApplication……………………………………………………………………………（13）

ZhangFan,LiuSong(CollegeofInformationScienceandTechnology,JinanUniversity,Guangzhou510632,China)

Abstract:ThispaperanalyzesthelimitationsoftraditionalWebMVC,summarizesthemodernWebMVCapplicationframeworkasadevelopment

lydiscussestheadvantagesofmodernWebMVCandcharacteristicswiththeAjaxandComet,andalsocomparestheeffectivenessofthe

rovidetheoreticalreferencemodelandunifiedframeworkforWebdevelopersandsystem

architectstobuildWebapplicationsandhigh-quality,effectiveapplicationsystemrapidly.

Keywords:Ajax;Comet;ApplicationFramework;ReferenceModel;UnifiedFramework

ResearchonMulti-pointTemperatureDetectionSystemBasedonT89C51AC2…………………………………………………（16）

MaYan,WangZhen,LiuHuabo(CollegeofAutomationEnginnering,QingdaoUniversity,Qingdao266071,China)

Abstract:Host-slaingtothetemperaturecharacteristicofplatinum

resistorPT100,evariableswhichareoutputfromthebridgeoutputare

amplifiedbythepreciseamplifyingcircuitcomposedofTL064fromthemeasurepoint,andtransferredtothecontrollerbyA/

temperatureofcurrentmeasurepointisconvertedanddisplayedbythecontroller,tstationuse

pollingmodetolookoverthetemperaturemeasureconditionofeveryslavestation,andthencorrectacquireddata.

Keywords:Host-slaveArchitecture;PT100;SerialCommunication

StudyofSpatialAnalysisTechnologyBasedonSVG………………………………………………………………………………（18）

FanQingya,JuHaiyan(SchoolofTechnology,NanjingAgriculturalUniversity,Nanjing210031,China)

Abstract:tproperlyresolvedthathowtorealizethecomplexspatialanalysisofSVGvector

oeproblemishowtorealizethetwo-way

peranalysisesdeeplythespatialdataexpressionwayofSVGand

OracleSpatial,atthesametimegivetheconversionprocessandspatialanalysisprocessindetail.

Keywords:SVG;OracleSpatial;WebGIS;Spatial;Analysis

II