無刷新Web客戶端組件的研究與實現(xiàn)

石 碩，吳利樂，李 洋，張筱丹

(1.安徽農(nóng)業(yè)大學(xué)信息與計算機學(xué)院，安徽合肥230036;2.內(nèi)蒙古工業(yè)大學(xué)電力學(xué)院，內(nèi)蒙古呼和浩特010080)

隨著用戶需求的日益多樣化，在強調(diào)全功能和高質(zhì)量的基礎(chǔ)上，對軟件的開發(fā)更新速度提出了更高的要求.解決這一問題的最佳途徑是開發(fā)可復(fù)用的組件.組件技術(shù)能夠徹底改變軟件的生產(chǎn)方式，使開發(fā)出來的軟件可以被重復(fù)利用，便于擴展，從根本上提高軟件生產(chǎn)效率和軟件質(zhì)量，提高開發(fā)大型軟件系統(tǒng)的成功率［1］.

1 C/S與B/S

C/S結(jié)構(gòu)，一般由一個Client端和一個 Server端成對組成.當(dāng)應(yīng)用程序的業(yè)務(wù)邏輯放在Server端時則會增加Server的壓力，使Server的整體性能降低;當(dāng)應(yīng)用的業(yè)務(wù)邏輯放在Client端時，會導(dǎo)致應(yīng)用程序的可擴充性和可維護性差，若需訪問另一套服務(wù)器就需要另一套軟件，因此客戶端必須配置很多軟件.逐臺配置機器對于一個有多用戶的復(fù)雜系統(tǒng)而言工作量相當(dāng)大，維護成本高.

基于B/S模式的Web應(yīng)用程序解決了C/S應(yīng)用程序部署和更新的困難，只要在客戶機安裝一個客戶端軟件(瀏覽器)即可，但是客戶端的數(shù)據(jù)處理能力遠(yuǎn)不如C/S應(yīng)用程序，交互情況下需要在客戶機和服務(wù)器之間進行頻繁的通訊.

B/S模式所提供的最終客戶服務(wù)器環(huán)境由服務(wù)器產(chǎn)生，Web瀏覽器僅作為被動的顯示代理，這種模式存在的主要問題有:

1)與應(yīng)用程序的每次交互都需要重新載入頁面，客戶端響應(yīng)速度慢.

2)每次進行交互，服務(wù)器需發(fā)送整個應(yīng)用程序的UI(User Interface)即 HTML，占用大量的網(wǎng)絡(luò)資源.

3)服務(wù)器端處理任務(wù)很重，需要完成產(chǎn)生應(yīng)用程序UI的同時，還需具有保持應(yīng)用程序狀態(tài)的能力.

2 無刷新可復(fù)用Web客戶端組件

B/S模式采用的是請求驅(qū)動，客戶端向服務(wù)器發(fā)出請求時，數(shù)據(jù)由WWW服務(wù)器或應(yīng)用服務(wù)器負(fù)責(zé)解釋執(zhí)行(如CGI、ASP)后，將格式化后的結(jié)果頁面返回給客戶端.

采用可復(fù)用Web客戶端組件后，客戶端在不依賴服務(wù)器的情況下獨自處理顯示部分，與服務(wù)器間的交互大幅降低.

首先，客戶端向服務(wù)器發(fā)出請求，需要服務(wù)器端提供必要的數(shù)據(jù)和客戶端組件.服務(wù)器端接收到請求后，通過解析請求，分配給合適的Business Object，執(zhí)行部分業(yè)務(wù).

然后，服務(wù)器將滿足客戶需要的數(shù)據(jù)集和客戶端組件返回用戶，客戶端一旦接收到數(shù)據(jù)，也就取得了對數(shù)據(jù)顯示部分的操作權(quán)，如同在C/S模式下和應(yīng)用程序進行交互，組件負(fù)責(zé)錯誤提示、控制幫助等信息并自動對數(shù)據(jù)進行跟蹤、記錄、修改內(nèi)容.

完成修改以后，客戶端提交修改數(shù)據(jù)，服務(wù)器根據(jù)需要進行相應(yīng)的處理，包括Business Object更新Model，Model同步后端 Database 等.

3 客戶端技術(shù)

為解決HTML不適合與用戶實時交互的問題，現(xiàn)代瀏覽器中添加了許多新特性，如Java和JavaS-cript開發(fā)者能夠通過Web瀏覽器平臺發(fā)布與平臺無關(guān)的多種應(yīng)用.還有一些第三方解決方案，包括Applet的 QuickTime，Microsoft的 ActiveX，Macromedia的Flash Suite等.

ActiveX是用于Internet的一種對象鏈接與嵌入技術(shù)(OLE)，客戶端控件一旦在本地安裝完畢，就相當(dāng)于一個可執(zhí)行的應(yīng)用程序，能訪問本地資源，也可遠(yuǎn)程訪問，但同時也帶來了安全性問題.

由于Java良好的安全性，Java Applet比ActiveX或其他插件更安全.當(dāng)下載一個含有Java Applet的頁面時，Applet中的代碼(被編譯成與平臺無關(guān)的通用二進制代碼)就通過網(wǎng)絡(luò)傳送到瀏覽器，瀏覽器預(yù)先啟動JVM，然后JVM將Applet中的二進制代碼編譯成機器語言，這個過程耗費大量的時間.含有Applet的頁面在每次請求class文件時都需要重新下載，導(dǎo)致Internet的連接速度非常慢.

DHTML是建立在DOM基礎(chǔ)上，由HTML、CSS、腳本語言組成的一種基于對象的編程技術(shù)，使通過Web與服務(wù)器交互成為可能［2］.絕大多數(shù)瀏覽器都支持客戶端JavaScript，而瀏覽器如果采用第三方解決方案或使用Java開發(fā)實現(xiàn)同樣的效果還需另外安裝相應(yīng)插件［3］.使用DHTML技術(shù)創(chuàng)建的界面執(zhí)行時也無需啟動Java虛擬機或其他腳本環(huán)境，可以在瀏覽器的支持下，獲得更好的展現(xiàn)效果和執(zhí)行效率，網(wǎng)頁較小的數(shù)據(jù)量也減少了網(wǎng)絡(luò)帶寬［4］.

4 組件的設(shè)計與實現(xiàn)

以表格組件為例，采用面向?qū)ο蟮能浖治龊驮O(shè)計方法，運用統(tǒng)一建模語言UML(Unified Modeling Language)作為工具對組件進行分析和設(shè)計［5］.

4.1 用例圖

表格所實現(xiàn)的功能主要有數(shù)據(jù)導(dǎo)入、導(dǎo)出，事件響應(yīng)設(shè)置，分頁信息設(shè)置，顯示、隱藏狀態(tài)欄，查找、復(fù)制、粘貼數(shù)據(jù)，單元格內(nèi)容和樣式設(shè)置，添加刪除行、設(shè)置行高度、樣式，添加刪除列、設(shè)置列寬度、樣式，單多重排序及數(shù)據(jù)過濾.表格功能如圖1所示.

圖1 表格功能圖

4.2 類 圖

表格組件可以抽象出一些主要的類以及各個類之間的關(guān)系如圖2所示.

圖2 類圖

SSColorGrid表格組件的核心部分，用來顯示可以編輯的二維表格及其狀態(tài)的類.提供訪問單元格、行、列的方法;設(shè)置當(dāng)前所在單元格顯示樣式;提供數(shù)據(jù)的查找、過濾、復(fù)制、粘貼功能等.

SSGRow為一個可以設(shè)置讀/寫及是否可見的行類，提供了行中查找字符串的方法，并提供設(shè)置行的高度以及設(shè)置數(shù)據(jù)跟蹤標(biāo)識的方法.

SSGCol為一個可以設(shè)置讀/寫及是否可見，并有過濾數(shù)組和索引數(shù)組的列類.提供了將過濾行轉(zhuǎn)化成HTML格式的方法，同時提供了設(shè)置列頭、列寬以及設(shè)置數(shù)據(jù)跟蹤標(biāo)識的方法.

SSGCell為一個可以設(shè)置讀/寫的單元格類，提供了設(shè)置、獲得和比較單元格數(shù)據(jù)的方法，并提供了設(shè)置當(dāng)前是否處于編輯的狀態(tài)以及數(shù)據(jù)跟蹤標(biāo)識的方法.

SSColor為頁面類，用于在不同瀏覽器頁面中查找節(jié)點并為節(jié)點注冊/清除事件，讀寫當(dāng)前頁面的cookie，提供獲得窗口大小(寬度/高度)及文檔向左向下滾動像素數(shù)和加載圖片的方法.

UA用于識別當(dāng)前所使用的瀏覽器類，包括常見的瀏覽器 IE、Opera、Netscape、Mozilla等及其不同版本，以便跨瀏覽器操作.

4.3 定義用戶設(shè)置接口

表格接口對象GridDef提供設(shè)置表格樣式、屬性及數(shù)據(jù)的對象直接量，可以自定義包括數(shù)據(jù)源、表格樣式、列樣式、行樣式、單元格樣式、列屬性、表格屬性等相關(guān)參數(shù).

useMultiSort用于設(shè)置是否使用多重排序.useColTitle用于設(shè)置是否使用列名.datatype表示數(shù)據(jù)來源，用于擴展，如果是數(shù)組則為0.data用于設(shè)置用于顯示的數(shù)據(jù)數(shù)組.colDef用于定義各列屬性設(shè)定，包括:列名、顯示樣式、類型、寬度、對齊方式、是否可見、是否使用自動過濾和自動索引.tableStyle設(shè)置整個表格樣式參數(shù).rowStyle設(shè)置行樣式參數(shù).colStyle設(shè)置列樣式參數(shù).cellStyle設(shè)置單元格樣式參數(shù).statusBar設(shè)置狀態(tài)欄參數(shù).

5 結(jié)語

組件在軟件的可重用和維護方面具有極大的優(yōu)勢，借鑒組件開發(fā)思想，提出的無刷新可復(fù)用Web客戶端組件是將C/S和B/S兩種結(jié)構(gòu)的優(yōu)點充分結(jié)合，利用客戶端技術(shù)將部分服務(wù)器端的功能轉(zhuǎn)移到客戶端，減少傳統(tǒng)的Web應(yīng)用程序開發(fā)中與服務(wù)器端的通訊，分擔(dān)服務(wù)器端的顯示處理，為開發(fā)人員提供功能全面、簡單易用的客戶端組件，縮短開發(fā)周期.

［1］ Peter Maurer.組件級編程［M］.施諾，譯.北京:清華大學(xué)出版社，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權(quán)威指南［M］.李強，譯.北京:機械工業(yè)出版，2007.

［5］ Ivar Jacobson，Grady Booch，James Rumbaugh.統(tǒng)一軟件開發(fā)過程［M］.周伯生，馮學(xué)民，樊東平，譯.北京:機械工業(yè)出版社，2002.