无刷新Web客户端组件的研究与实现

石 硕，吴利乐，李 洋，张筱丹

(1.安徽农业大学信息与计算机学院，安徽合肥230036;2.内蒙古工业大学电力学院，内蒙古呼和浩特010080)

随着用户需求的日益多样化，在强调全功能和高质量的基础上，对软件的开发更新速度提出了更高的要求.解决这一问题的最佳途径是开发可复用的组件.组件技术能够彻底改变软件的生产方式，使开发出来的软件可以被重复利用，便于扩展，从根本上提高软件生产效率和软件质量，提高开发大型软件系统的成功率［1］.

1 C/S与B/S

C/S结构，一般由一个Client端和一个 Server端成对组成.当应用程序的业务逻辑放在Server端时则会增加Server的压力，使Server的整体性能降低;当应用的业务逻辑放在Client端时，会导致应用程序的可扩充性和可维护性差，若需访问另一套服务器就需要另一套软件，因此客户端必须配置很多软件.逐台配置机器对于一个有多用户的复杂系统而言工作量相当大，维护成本高.

基于B/S模式的Web应用程序解决了C/S应用程序部署和更新的困难，只要在客户机安装一个客户端软件(浏览器)即可，但是客户端的数据处理能力远不如C/S应用程序，交互情况下需要在客户机和服务器之间进行频繁的通讯.

B/S模式所提供的最终客户服务器环境由服务器产生，Web浏览器仅作为被动的显示代理，这种模式存在的主要问题有:

1)与应用程序的每次交互都需要重新载入页面，客户端响应速度慢.

2)每次进行交互，服务器需发送整个应用程序的UI(User Interface)即 HTML，占用大量的网络资源.

3)服务器端处理任务很重，需要完成产生应用程序UI的同时，还需具有保持应用程序状态的能力.

2 无刷新可复用Web客户端组件

B/S模式采用的是请求驱动，客户端向服务器发出请求时，数据由WWW服务器或应用服务器负责解释执行(如CGI、ASP)后，将格式化后的结果页面返回给客户端.

采用可复用Web客户端组件后，客户端在不依赖服务器的情况下独自处理显示部分，与服务器间的交互大幅降低.

首先，客户端向服务器发出请求，需要服务器端提供必要的数据和客户端组件.服务器端接收到请求后，通过解析请求，分配给合适的Business Object，执行部分业务.

然后，服务器将满足客户需要的数据集和客户端组件返回用户，客户端一旦接收到数据，也就取得了对数据显示部分的操作权，如同在C/S模式下和应用程序进行交互，组件负责错误提示、控制帮助等信息并自动对数据进行跟踪、记录、修改内容.

完成修改以后，客户端提交修改数据，服务器根据需要进行相应的处理，包括Business Object更新Model，Model同步后端 Database 等.

3 客户端技术

为解决HTML不适合与用户实时交互的问题，现代浏览器中添加了许多新特性，如Java和JavaS-cript开发者能够通过Web浏览器平台发布与平台无关的多种应用.还有一些第三方解决方案，包括Applet的 QuickTime，Microsoft的 ActiveX，Macromedia的Flash Suite等.

ActiveX是用于Internet的一种对象链接与嵌入技术(OLE)，客户端控件一旦在本地安装完毕，就相当于一个可执行的应用程序，能访问本地资源，也可远程访问，但同时也带来了安全性问题.

由于Java良好的安全性，Java Applet比ActiveX或其他插件更安全.当下载一个含有Java Applet的页面时，Applet中的代码(被编译成与平台无关的通用二进制代码)就通过网络传送到浏览器，浏览器预先启动JVM，然后JVM将Applet中的二进制代码编译成机器语言，这个过程耗费大量的时间.含有Applet的页面在每次请求class文件时都需要重新下载，导致Internet的连接速度非常慢.

DHTML是建立在DOM基础上，由HTML、CSS、脚本语言组成的一种基于对象的编程技术，使通过Web与服务器交互成为可能［2］.绝大多数浏览器都支持客户端JavaScript，而浏览器如果采用第三方解决方案或使用Java开发实现同样的效果还需另外安装相应插件［3］.使用DHTML技术创建的界面执行时也无需启动Java虚拟机或其他脚本环境，可以在浏览器的支持下，获得更好的展现效果和执行效率，网页较小的数据量也减少了网络带宽［4］.

4 组件的设计与实现

以表格组件为例，采用面向对象的软件分析和设计方法，运用统一建模语言UML(Unified Modeling Language)作为工具对组件进行分析和设计［5］.

4.1 用例图

表格所实现的功能主要有数据导入、导出，事件响应设置，分页信息设置，显示、隐藏状态栏，查找、复制、粘贴数据，单元格内容和样式设置，添加删除行、设置行高度、样式，添加删除列、设置列宽度、样式，单多重排序及数据过滤.表格功能如图1所示.

图1 表格功能图

4.2 类 图

表格组件可以抽象出一些主要的类以及各个类之间的关系如图2所示.

图2 类图

SSColorGrid表格组件的核心部分，用来显示可以编辑的二维表格及其状态的类.提供访问单元格、行、列的方法;设置当前所在单元格显示样式;提供数据的查找、过滤、复制、粘贴功能等.

SSGRow为一个可以设置读/写及是否可见的行类，提供了行中查找字符串的方法，并提供设置行的高度以及设置数据跟踪标识的方法.

SSGCol为一个可以设置读/写及是否可见，并有过滤数组和索引数组的列类.提供了将过滤行转化成HTML格式的方法，同时提供了设置列头、列宽以及设置数据跟踪标识的方法.

SSGCell为一个可以设置读/写的单元格类，提供了设置、获得和比较单元格数据的方法，并提供了设置当前是否处于编辑的状态以及数据跟踪标识的方法.

SSColor为页面类，用于在不同浏览器页面中查找节点并为节点注册/清除事件，读写当前页面的cookie，提供获得窗口大小(宽度/高度)及文档向左向下滚动像素数和加载图片的方法.

UA用于识别当前所使用的浏览器类，包括常见的浏览器 IE、Opera、Netscape、Mozilla等及其不同版本，以便跨浏览器操作.

4.3 定义用户设置接口

表格接口对象GridDef提供设置表格样式、属性及数据的对象直接量，可以自定义包括数据源、表格样式、列样式、行样式、单元格样式、列属性、表格属性等相关参数.

useMultiSort用于设置是否使用多重排序.useColTitle用于设置是否使用列名.datatype表示数据来源，用于扩展，如果是数组则为0.data用于设置用于显示的数据数组.colDef用于定义各列属性设定，包括:列名、显示样式、类型、宽度、对齐方式、是否可见、是否使用自动过滤和自动索引.tableStyle设置整个表格样式参数.rowStyle设置行样式参数.colStyle设置列样式参数.cellStyle设置单元格样式参数.statusBar设置状态栏参数.

5 结语

组件在软件的可重用和维护方面具有极大的优势，借鉴组件开发思想，提出的无刷新可复用Web客户端组件是将C/S和B/S两种结构的优点充分结合，利用客户端技术将部分服务器端的功能转移到客户端，减少传统的Web应用程序开发中与服务器端的通讯，分担服务器端的显示处理，为开发人员提供功能全面、简单易用的客户端组件，缩短开发周期.

［1］ Peter Maurer.组件级编程［M］.施诺，译.北京:清华大学出版社，2003.

［2］ Microsoft.Internet Explorer MSHTML/DHTML API［EB/OL］.2004－04 －09/2011 －10 －08.http:∥msdn.microsoft.com.

［3］ Mozilla Developer Network.JavaScript Reference［EB/OL］.2011 －08 －19/2011 －10 －08.https:∥developer.mozilla.org/.

［4］ David Flanagan.JavaScript权威指南［M］.李强，译.北京:机械工业出版，2007.

［5］ Ivar Jacobson，Grady Booch，James Rumbaugh.统一软件开发过程［M］.周伯生，冯学民，樊东平，译.北京:机械工业出版社，2002.