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

柳宏川，盧紅星

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

0 引 言

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

1 背 景

1.1 富客戶端技術(shù)

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

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

1.2 AJAX原理

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

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

1.3 AJAX的主流框架

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

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

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

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

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

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

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

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

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

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

圖5 數(shù)字報(bào)系統(tǒng)框架設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

（7）編輯選稿模塊：各版版面編輯對(duì)分配的本版面稿件進(jìn)行版面稿件選擇；

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

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

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

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

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

4 結(jié)束語(yǔ)

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

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

［2］WANG Xuan.The combined network：New digital newspaper profit mode ［J］.News World.2012 （5）：151－153 （in Chinese）.［王璇.報(bào)業(yè)聯(lián)合網(wǎng)：數(shù)字報(bào)紙盈利模式新探 ［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電子報(bào)刊系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) ［J］.寧波職業(yè)技術(shù)學(xué)院學(xué)報(bào)，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)境下的報(bào)紙閱讀 ［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］.計(jì)算機(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)的實(shí)現(xiàn) ［J］.制造業(yè)自動(dòng)化，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ì) ［J］.武漢理工大學(xué)學(xué)報(bào)：信息與管理工程版，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組件的擴(kuò)展及應(yīng)用 ［J］.計(jì)算機(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.］