柳宏川，盧紅星

（鄭州大學(xué) 信息工程學(xué)院，河南 鄭州450001）

0 引 言

數(shù)字報［1］是報紙將紙質(zhì)內(nèi)容通過網(wǎng)絡(luò)進行傳播的有效手段。數(shù)字報［2］可以突破原有紙質(zhì)報紙出版周期的限制，實現(xiàn)24小時滾動播報，從而及時向受眾提供信息，達到提高時效性和互動性的目標(biāo)。目前流行的數(shù)字報的體系結(jié)構(gòu)模式采用了基于 Web的請求響應(yīng)機制［3］［4］。該機制分為請求、等待、響應(yīng)三個階段，由客戶端負責(zé)觸發(fā)HTTP請求，服務(wù)器接受請求并做邏輯處理，最終返回給客戶端一個HTML頁面。這種響應(yīng)機制結(jié)構(gòu)清晰，易于實現(xiàn)。但是存在如下缺點：服務(wù)器處于客戶端請求處理狀態(tài)時，客戶端處于等待狀態(tài)；即使只要求從服務(wù)器獲取一個幾十個字節(jié)的數(shù)據(jù)，也需要返回整個HTML頁；客戶端瀏覽器需要重新解析整個HTML頁面。這些缺點會大大降低數(shù)字報的閱讀效率。因此，本文提出并實現(xiàn)了基于AJAX［5］的富客戶端［6］［7］數(shù)字報系統(tǒng)。使用AJAX技術(shù)開發(fā)的數(shù)字報網(wǎng)站，不需要刷新頁面就能更新新聞內(nèi)容，使數(shù)字報網(wǎng)站具備了良好的即時響應(yīng)的能力。實際應(yīng)用表明，采用基于AJAX富客戶端技術(shù)的數(shù)字報網(wǎng)站，可以大大提高對用戶的響應(yīng)速度，降低目前Web模式下的等待時間，實現(xiàn)了接近桌面程序 （client application）的用戶體驗。

1 背 景

1.1 富客戶端技術(shù)

網(wǎng)絡(luò)應(yīng)用程序的發(fā)展歷經(jīng)了 “胖客戶端——瘦客戶端——富客戶端”三個里程碑。胖客戶端 （Fat Client）一般指傳統(tǒng)的Client／Server結(jié)構(gòu)的桌面應(yīng)用程序，需要Client具有執(zhí)行任務(wù)的能力，但可以減輕服務(wù)器壓力，降低對服務(wù)器的性能需求。瘦客戶端 （Thin Client）一般指傳統(tǒng)的Browser／Server結(jié)構(gòu)的Web應(yīng)用程序，瀏覽器中只負責(zé)解析標(biāo)準(zhǔn)HTML頁面，服務(wù)器負責(zé)業(yè)務(wù)邏輯。富客戶端（Rich Client）［8］［9］集成了桌面應(yīng)用的交互能力和傳統(tǒng) Web應(yīng)用的部署靈活性，可以為用戶提供全方位的良好的網(wǎng)絡(luò)體驗。富因特網(wǎng)應(yīng)用程序［10］（Rich Internet Applications，RIA）利用富客戶端技術(shù)來為提供單一而全面的網(wǎng)絡(luò)體驗。

RIA提供一個運行環(huán)境 （Runtime Environment），使用異步Client／Server結(jié)構(gòu)。RIA是一種安全的、易擴展的、適應(yīng)性全面的面向服務(wù)的程序模型。RIA開發(fā)的3個基本要素包括：富客戶端技術(shù)、服務(wù)器技術(shù)和開發(fā)平臺。富客戶端技術(shù)基于本地機器來處理數(shù)據(jù)，而不是把所有數(shù)據(jù)都發(fā)送給服務(wù)器處理；服務(wù)器技術(shù)負責(zé)提供與富客戶端的連接橋梁，任務(wù)包括快捷的腳本語言環(huán)境，數(shù)據(jù)庫開發(fā)、雙向數(shù)據(jù)流、實時數(shù)據(jù)流等；AJAX是廣泛使用的一種RIA實現(xiàn)協(xié)同平臺。富客戶端將瀏覽器界面分解成一系列小單元模塊。這些模塊擔(dān)負用戶直接交互和與服務(wù)器通信的雙重任務(wù)。這種設(shè)計技術(shù)將網(wǎng)絡(luò)應(yīng)用程序從以相對獨立的頁面為中心，轉(zhuǎn)換為以組件為中心。這可以將客戶端設(shè)計提升到一個更加靈活的新層次。對用戶而言，其感覺就好像程序無需與服務(wù)器通信一樣。

1.2 AJAX原理

作為富客戶端技術(shù)的實現(xiàn)手段之一，AJAX提供了一種客戶端與服務(wù)器端的異步交互和按需獲取數(shù)據(jù)的模式。AJAX的主要原理是，服務(wù)器端采用SOAP協(xié)議，客戶端采用JavaScript腳本語言，通過AJAX引擎完成請求發(fā)送和響應(yīng)數(shù)據(jù)處理。傳統(tǒng)Web應(yīng)用與AJAX應(yīng)用的對比見圖1。AJAX應(yīng)用中，在客戶端增加了AJAX引擎，執(zhí)行HTML頁面中內(nèi)嵌的JavaScript腳本，向Web服務(wù)器發(fā)送異步的數(shù)據(jù)請求，服務(wù)器處理請求并返回XML格式的響應(yīng)數(shù)據(jù)。同時，仍由客戶端的JavaScript腳本語言負責(zé)對該響應(yīng)數(shù)據(jù)解析，并按解析數(shù)據(jù)的內(nèi)容生成用戶界面。這樣，可以實現(xiàn)無刷新的即時更新頁面。AJAX技術(shù)的主要特點是：客戶端動態(tài)更新，無需等待服務(wù)器重新發(fā)送整個頁面；極大地減少了下載數(shù)據(jù)量，從而大幅提升了客戶端性能；每次用戶進行輸入時，不必再進行頁面刷新，加快了客戶端處理速度。

圖1 傳統(tǒng)的Web服務(wù)模式與基于AJAX技術(shù)的Web服務(wù)模式

1.3 AJAX的主流框架

目前廣泛采用的AJAX的主流框架包括EXT框架［11］和 DWR （Direct Web Remoting）［12］框架。EXT框架是一個基于Ajax表現(xiàn)層開發(fā)的JavaScript類庫，采用XML語言作為交換格式，提供了可重用的部件和豐富的GUI組件，大大減輕了服務(wù)端的負荷。EXT的組件庫包括基本元素組件、工具組件和表單組件等?；驹亟M件包括按鈕、樹（Tree）、表格 （Grid）、數(shù)據(jù)顯示視圖、日期面板等；工具組件包括對齊填充和文本項等；表單組件包括Form、下拉列表框、輸入框等。例如，通過對Tree控件的配置可實現(xiàn)導(dǎo)航樹。而且可以動態(tài)添加、編輯、刪除和拖動Tree中的單元實現(xiàn)典型的視圖層框架結(jié)構(gòu)；通過Grid控件來實現(xiàn)表格排序、拖動、隱藏和列匯總等功能。DWR框架是一個服務(wù)器端的開源AJAX框架，主要用來實現(xiàn)服務(wù)器端的Java語言代碼到客戶端的JavaScript語言代碼的映射，以便瀏覽器里的JavaScript代碼調(diào)用服務(wù)器端的Java對象。DWR框架為Java語言代碼與JavaScript語言代碼提供了數(shù)據(jù)傳送和方法調(diào)用的直接通道。通過對通道配置，客戶端可以像調(diào)用本地代碼一樣調(diào)用服務(wù)器端Java對象。

2 基于AJAX的富客戶端數(shù)字報系統(tǒng)

2.1 業(yè)務(wù)流程

對大多數(shù)報紙出版者而言，紙質(zhì)報紙的排版和出版是成熟而穩(wěn)定的技術(shù)。因此，數(shù)字報的編輯和出版基于已有的紙質(zhì)報紙版面內(nèi)容。數(shù)字報編輯的業(yè)務(wù)流程可見圖2。從圖中可以看出，該功能的實現(xiàn)包括印刷報紙排版系統(tǒng)、數(shù)字報新聞數(shù)據(jù)庫、PDF格式數(shù)字報版面處理、圖片格式數(shù)字報版面處理、新聞條目顯示和版面圖片熱區(qū)定義等多個環(huán)節(jié)。該業(yè)務(wù)流程中可劃分為兩類功能：一是印刷報紙排版系統(tǒng)的接口功能，從已完成的印刷新聞庫中導(dǎo)出數(shù)字報使用的新聞數(shù)據(jù)庫，將已完成的印刷版面轉(zhuǎn)換為PDF格式數(shù)字報版面和圖片格式數(shù)字報版面。二是新聞條目的熱區(qū)觸發(fā)，這要求對新聞條目的即時響應(yīng)和顯示，采用AJAX技術(shù)的主要目的就是能夠無需刷新頁面就能更新新聞內(nèi)容，提高數(shù)字報的的即時響應(yīng)能力。

圖2 數(shù)字報圖文排版業(yè)務(wù)流程

2.2 系統(tǒng)結(jié)構(gòu)設(shè)計

數(shù)字報系統(tǒng)屬于復(fù)雜性軟件系統(tǒng)，系統(tǒng)結(jié)構(gòu)設(shè)計需要兼顧兩方面特性。一是報紙的數(shù)據(jù)量隨報紙發(fā)行日期成線性增長；二是瀏覽器客戶端界面交互性要求高、響應(yīng)時間要求盡量縮短。系統(tǒng)設(shè)計結(jié)合了傳統(tǒng)的組件分層設(shè)計技術(shù)框架 （見圖3）和AJAX富客戶端技術(shù)框架 （見圖4）。

按傳統(tǒng)的組件分層設(shè)計技術(shù)框架，可以將數(shù)字報系統(tǒng)分解為四層：架構(gòu)支撐層、核心層、接口層和用戶訪問層。架構(gòu)支撐層是系統(tǒng)的基礎(chǔ)設(shè)施層，包含了系統(tǒng)的底層設(shè)施，如計算資源、存儲資源和網(wǎng)絡(luò)資源等。核心層是數(shù)字報數(shù)據(jù)庫所在，存放了新聞、圖片、文章等報紙信息。接口層兼顧紙質(zhì)報紙需求和數(shù)字報紙需求，提供了印刷報紙排版系統(tǒng)接口、PDF／圖片文件處理／轉(zhuǎn)換功能和版面圖片熱區(qū)定義功能。用戶訪問層針對瀏覽器終端用戶，提供了數(shù)字報瀏覽、版面快速檢索和分類／關(guān)鍵字檢索等功能。

按AJAX富客戶端技術(shù)，可以將數(shù)字報系統(tǒng)分解為三個層次：數(shù)據(jù)層運行于應(yīng)用服務(wù)器，存放報紙數(shù)據(jù)庫；邏輯層運行于Web服務(wù)器，負責(zé)處理用戶業(yè)務(wù)邏輯，如報紙閱讀，關(guān)鍵字檢索等；表現(xiàn)層基于瀏覽器，通過AJAX引擎 （XMLHttpRequest）快速處理客戶端請求。

在設(shè)計出以上兩類系統(tǒng)框架后，對其進行有機結(jié)合，最終給出了數(shù)字報系統(tǒng)的框架設(shè)計 （見圖5）。最終的三層結(jié)構(gòu)包括：表現(xiàn)層 （界面表示層和界面控制層）、邏輯層、存儲層。表現(xiàn)層運行于瀏覽器客戶端，其中的界面表示層負責(zé)處理人機交互接口，產(chǎn)生各類請求和響應(yīng)事件、顯示信息；其中的界面控制層用于業(yè)務(wù)請求的執(zhí)行，處理邏輯層的回饋數(shù)據(jù)；邏輯層運行于Web服務(wù)器，進行業(yè)務(wù)知識判斷和處理，如有必要則向存儲層請求數(shù)據(jù)，返回給界面控制層；存儲層運行于數(shù)據(jù)庫服務(wù)器，存放報紙數(shù)據(jù)庫。與傳統(tǒng)Web模式相比，本系統(tǒng)架構(gòu)的優(yōu)點包括：界面顯示層只需對HTML＋CSS代碼進行圖文展示；界面控制層封裝了AJAX引擎，該層是連接表現(xiàn)層和邏輯層的通道，在用戶閱讀數(shù)字報時若需要更新部分數(shù)據(jù)，AJAX引擎會通過XMLHttpRequest對象異步請求邏輯層進行業(yè)務(wù)邏輯處理，并異步取得所需數(shù)據(jù)，然后對數(shù)據(jù)進行加工，形成HTML＋CSS代碼，在界面表示層進行展示。比如在用戶逐條瀏覽某期數(shù)字報新聞時，會反復(fù)地請求后臺更新具體新聞條目的內(nèi)容。由于采用基于AJAX的富客戶端技術(shù)進行界面控制，系統(tǒng)不會重復(fù)刷新整個頁面，這可以有效地減輕服務(wù)器負載，給用戶提供了良好的閱讀體驗，從而可以提高用戶的閱讀興趣。

圖5 數(shù)字報系統(tǒng)框架設(shè)計

3 系統(tǒng)實現(xiàn)

3.1 系統(tǒng)模塊功能

數(shù)字報系統(tǒng)實現(xiàn)采用的平臺環(huán)境包括：數(shù)據(jù)庫軟件SQL SERVER2000；印刷報紙排版方正軟件：飛騰專業(yè)版pdf生成軟件：飛騰pdf打印插件ultrapdf；pdf轉(zhuǎn)jpg軟件ghostscript。后臺Web服務(wù)器端采用Java語言開發(fā)，前臺瀏覽器端采用JavaScript語言實現(xiàn)AJAX技術(shù)。系統(tǒng)模塊見圖6。各模塊功能如下：

（1）投稿模塊：登錄賬戶，進入投稿界面，按要求錄入稿件信息；

（2）稿件編輯模塊：實現(xiàn)在線編輯，編輯如FH6格式的文檔；

（3）稿件閱讀模塊：調(diào)出數(shù)據(jù)庫稿件，進行閱讀；

圖6 數(shù)字報系統(tǒng)模塊功能

（4）稿件檢索模塊：輸入關(guān)鍵字進行標(biāo)題索引、全文索引；

（5）稿件上網(wǎng)審核、發(fā)布模塊：網(wǎng)站編輯對上網(wǎng)稿件進行審核及發(fā)布，稿件來自稿件庫或者由網(wǎng)站編輯提供。同時提供在線編輯功能；

（6）稿件分配模塊：將稿件分配至各版編輯；

（7）編輯選稿模塊：各版版面編輯對分配的本版面稿件進行版面稿件選擇；

（8）FIT文件轉(zhuǎn)化為模塊：將紙質(zhì)版內(nèi)容轉(zhuǎn)換為數(shù)字報內(nèi)容，對電子報FIT文件進行轉(zhuǎn)換 （PDF格式或JPG格式）、上載；

（9）電子版生成模塊：完成電子報轉(zhuǎn)換，形成電子版，按要求實現(xiàn)版面信息與文字信息匹配，將轉(zhuǎn)換的圖片嵌入網(wǎng)站，形成標(biāo)題，并鏈接到稿件正文文本；

（10）AJAX版面熱區(qū)模塊：定義版面熱區(qū)，響應(yīng)用戶點擊熱區(qū)事件，檢索新聞庫，顯示新聞詳細內(nèi)容。

3.2 AJAX版面熱區(qū)模塊

AJAX版面熱區(qū)模塊主要負責(zé)響應(yīng)用戶的新聞閱讀操作。提供用戶相關(guān)的版面熱區(qū)并響應(yīng)用戶點擊熱區(qū)事件。例如，根據(jù)用戶要求檢索新聞庫來顯示新聞詳細內(nèi)容。采用AJAX技術(shù)能夠無需刷新頁面就能更新新聞內(nèi)容，提高即時響應(yīng)能力，滿足用戶的體驗要求。該模塊的主要函數(shù)如下：

4 結(jié)束語

傳統(tǒng)紙質(zhì)報紙模式轉(zhuǎn)型為數(shù)字化報紙模式是大勢所趨。目前的數(shù)字報體系結(jié)構(gòu)采用了基于Web的請求響應(yīng)機制，分為請求、等待、響應(yīng)三個階段。這種響應(yīng)機制結(jié)構(gòu)清晰，易于實現(xiàn)。但其存在著客戶端經(jīng)常需要處于等待狀態(tài)、需要返回整個HTML頁面和瀏覽器需要重新解析整個HTML頁面等缺點，從而降低了閱讀效率。因此，本文提出并實現(xiàn)了基于AJAX的富客戶端技術(shù)的數(shù)字報系統(tǒng)。使用AJAX技術(shù)開發(fā)的數(shù)字報網(wǎng)站，不需要刷新頁面就能更新內(nèi)容，提高了即時響應(yīng)能力。實際應(yīng)用表明，基于AJAX富客戶端技術(shù)的數(shù)字報網(wǎng)站，可以大大提高對用戶的響應(yīng)速度，降低了目前Web模式下的等待時間。

［1］WANG Zhaoyang.Digital content industry content value－added way exploration ［J］.TV Time，2012 （2）：28－31 （in Chinese）.［王朝陽.數(shù)字內(nèi)容產(chǎn)業(yè)的內(nèi)容增值途徑探索——以數(shù)字報業(yè)內(nèi)容增值為例 ［J］.媒體時代，2012 （2）：28－31.］

［2］WANG Xuan.The combined network：New digital newspaper profit mode ［J］.News World.2012 （5）：151－153 （in Chinese）.［王璇.報業(yè)聯(lián)合網(wǎng)：數(shù)字報紙盈利模式新探 ［J］.新聞世界，2012 （5）：151－153.］

［3］LI Chaoyan，ZHOU Jianliang.Design and implementation of the E－paper based on the web ［J］.Journal of Ningbo Polytechnic，2011 （5）：32－34 （in Chinese）. ［李超燕，周建良.基于Web電子報刊系統(tǒng)的設(shè)計與實現(xiàn) ［J］.寧波職業(yè)技術(shù)學(xué)院學(xué)報，2011 （5）：32－34.］

［4］ZHU Hui.Newspaper reading based on web 3.0 ［J］.News Editing，2009 （3）：44－45 （in Chinese）.［朱慧.基于 Web3.0環(huán)境下的報紙閱讀 ［J］.新聞采編，2009 （3）：44－45.］

［5］Serrano N，Aroztegi J P.Ajax frameworks in interactive web apps ［J］.IEEE Software，2007，24 （5）：12－14.

［6］MeliS，Gómez J，Pérez S，et al.Architectural and technological variability in rich internet applications ［J］.IEEE Internet Computing，2010，14 （3）：24－32.

［7］Lawton G.New ways to build rich internet applications ［J］.Computer，2008，41 （8）：10－12.

［8］CHEN Bifeng.Technology and application of rich client based on AJAX ［J］.Computer Science，2011，38 （B10）：419－420（in Chinese）.［陳必峰.基于AJAX的富客戶端技術(shù)及應(yīng)用［J］.計算機科學(xué)，2011，38 （B10）：419－420.］

［9］ZHOU Chuanhong，KANG Shaobo，WANG Huaihu，et al.The compliance research of RoHS based on XUL in Java RCP and native XML database ［J］.Manufacturing Automation，2012，34 （8）：13－15 （in Chinese）.［周傳宏，康少博，王懷虎，等.基于Java富客戶端及XUL界面的RoHS符合性物料系統(tǒng)的實現(xiàn) ［J］.制造業(yè)自動化，2012，34 （8）：13－15.］

［10］LU Xiaoliang，BIAN Yijie.E－commerce system design based on Ajax rich clients ［J］.Journal of Wuhan University of Technology（Information ＆ Management Engineering），2011，33 （1）：90－93 （in Chinese）.［陸小亮，卞藝杰.基于Ajax的富客戶端電子商務(wù)系統(tǒng)設(shè)計 ［J］.武漢理工大學(xué)學(xué)報：信息與管理工程版，2011，33 （1）：90－93.］

［11］DENG Weicheng，F(xiàn)AN Yixiang，XIA Xiang，et al.Discussion of grid components for ExtJs ［J］.Journal of Computer Applications，2012，32 （A01）：80－82 （in Chinese）.［鄧偉成，范軼翔，夏翔，等.ExtJs框架下Grid組件的擴展及應(yīng)用 ［J］.計算機應(yīng)用，2012，32 （A01）：80－82.］

［12］ZHAI Ruisheng，LI li.The research of DWZ rich client technology based on AJAX ［J］.Management ＆ Technology of SME，2011 （28）：232－232 （in Chinese）.［翟瑞生，李麗.基于Ajax的DWZ富客戶端技術(shù)的應(yīng)用研究 ［J］.中小企業(yè)管理與科技，2011 （28）：232－232.］