基于AJAX的富客戶端數字報系統

柳宏川，盧紅星

（鄭州大學 信息工程學院，河南 鄭州450001）

0 引 言

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

1 背 景

1.1 富客戶端技術

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

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

1.2 AJAX原理

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

圖1 傳統的Web服務模式與基于AJAX技術的Web服務模式

1.3 AJAX的主流框架

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

2 基于AJAX的富客戶端數字報系統

2.1 業務流程

對大多數報紙出版者而言，紙質報紙的排版和出版是成熟而穩定的技術。因此，數字報的編輯和出版基于已有的紙質報紙版面內容。數字報編輯的業務流程可見圖2。從圖中可以看出，該功能的實現包括印刷報紙排版系統、數字報新聞數據庫、PDF格式數字報版面處理、圖片格式數字報版面處理、新聞條目顯示和版面圖片熱區定義等多個環節。該業務流程中可劃分為兩類功能：一是印刷報紙排版系統的接口功能，從已完成的印刷新聞庫中導出數字報使用的新聞數據庫，將已完成的印刷版面轉換為PDF格式數字報版面和圖片格式數字報版面。二是新聞條目的熱區觸發，這要求對新聞條目的即時響應和顯示，采用AJAX技術的主要目的就是能夠無需刷新頁面就能更新新聞內容，提高數字報的的即時響應能力。

圖2 數字報圖文排版業務流程

2.2 系統結構設計

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

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

按AJAX富客戶端技術，可以將數字報系統分解為三個層次：數據層運行于應用服務器，存放報紙數據庫；邏輯層運行于Web服務器，負責處理用戶業務邏輯，如報紙閱讀，關鍵字檢索等；表現層基于瀏覽器，通過AJAX引擎 （XMLHttpRequest）快速處理客戶端請求。

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

圖5 數字報系統框架設計

3 系統實現

3.1 系統模塊功能

數字報系統實現采用的平臺環境包括：數據庫軟件SQL SERVER2000；印刷報紙排版方正軟件：飛騰專業版pdf生成軟件：飛騰pdf打印插件ultrapdf；pdf轉jpg軟件ghostscript。后臺Web服務器端采用Java語言開發，前臺瀏覽器端采用JavaScript語言實現AJAX技術。系統模塊見圖6。各模塊功能如下：

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

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

（3）稿件閱讀模塊：調出數據庫稿件，進行閱讀；

圖6 數字報系統模塊功能

（4）稿件檢索模塊：輸入關鍵字進行標題索引、全文索引；

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

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

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

（8）FIT文件轉化為模塊：將紙質版內容轉換為數字報內容，對電子報FIT文件進行轉換 （PDF格式或JPG格式）、上載；

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

（10）AJAX版面熱區模塊：定義版面熱區，響應用戶點擊熱區事件，檢索新聞庫，顯示新聞詳細內容。

3.2 AJAX版面熱區模塊

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

4 結束語

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

［1］WANG Zhaoyang.Digital content industry content value－added way exploration ［J］.TV Time，2012 （2）：28－31 （in Chinese）.［王朝陽.數字內容產業的內容增值途徑探索——以數字報業內容增值為例 ［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）.［王璇.報業聯合網：數字報紙盈利模式新探 ［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電子報刊系統的設計與實現 ［J］.寧波職業技術學院學報，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環境下的報紙閱讀 ［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的富客戶端技術及應用［J］.計算機科學，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符合性物料系統的實現 ［J］.制造業自動化，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的富客戶端電子商務系統設計 ［J］.武漢理工大學學報：信息與管理工程版，2011，33 （1）：90－93.］

［11］DENG Weicheng，FAN 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組件的擴展及應用 ［J］.計算機應用，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富客戶端技術的應用研究 ［J］.中小企業管理與科技，2011 （28）：232－232.］