基于Ajax和JSON技術(shù)的電信CPMIS管理系統(tǒng)

張宇（南京郵電大學(xué)計(jì)算機(jī)學(xué)院，江蘇南京 210046）

CPMIS系統(tǒng)全稱項(xiàng)目和物資管理系統(tǒng)，系統(tǒng)實(shí)現(xiàn)了對(duì)電信類項(xiàng)目全生命周期的管理，主要功能包括網(wǎng)絡(luò)規(guī)劃、需求、可研、立項(xiàng)、設(shè)計(jì)、驗(yàn)收、決算、轉(zhuǎn)固、物資采購(gòu)等。通過CPMIS系統(tǒng)的建設(shè)和使用，有效的提升了電信企業(yè)的工程建設(shè)精確化管理水平。

CPMIS系統(tǒng)是按照集中建設(shè)、集中管理規(guī)劃建設(shè)的省級(jí)系統(tǒng)，要求能夠支持省、市、縣三級(jí)用戶的項(xiàng)目和物資管理工作。

1 關(guān)鍵技術(shù)

1.1 AJAX

AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)，它由幾種蓬勃發(fā)展的技術(shù)以新的強(qiáng)大方式組合而成。Ajax包含：

1）基于XHTML和CSS標(biāo)準(zhǔn)的表示；

2） 使用DocumentObjectModel進(jìn)行動(dòng)態(tài)顯示和交互；

3） 使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信；

4）使用JavaScript綁定一切。

Ajax通過異步對(duì)象和服務(wù)器進(jìn)行通信，向服務(wù)器發(fā)送并取回必需的數(shù)據(jù)（如XML、JSON），使用JavaScript處理來自服務(wù)器的響應(yīng)數(shù)據(jù)。因?yàn)樵诜?wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少，結(jié)果我們就能看到響應(yīng)更快的應(yīng)用。同時(shí)很多的處理工作可以在發(fā)出請(qǐng)求的客戶端機(jī)器上完成，所以Web服務(wù)器的處理時(shí)間也減少了。

Ajax應(yīng)用程序的優(yōu)勢(shì)在于：

1）通過異步模式，提升了用戶體驗(yàn)；

2）優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用；

3）Ajax引擎在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，從而減少了大用戶量下的服務(wù)器負(fù)載。

1.2 JSON

JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式，易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成。

JSON采用完全獨(dú)立于語言的文本格式，其結(jié)構(gòu)分為兩種：

1)“名稱/值”對(duì)的集合（A collection of name/ value pairs）；

2)值的有序列表（An ordered list of values）。

它是JavaScript的一個(gè)子集，主流的瀏覽器對(duì)JSON支持都非常完善，對(duì)于服務(wù)器與JavaScript的交互來說，JSON是一種理想的數(shù)據(jù)交換格式。

2 CPMIS系統(tǒng)體系架構(gòu)

CPMIS系統(tǒng)是基于J2EE架構(gòu)、B/S結(jié)構(gòu)的，在傳統(tǒng)的Web應(yīng)用系統(tǒng)的架構(gòu)上，引入Ajax+ JSON技術(shù)，系統(tǒng)體系架構(gòu)如圖1所示。

圖1 CPMIS系統(tǒng)體系架構(gòu)

頁(yè)面的基本處理流程：在瀏覽器客戶端訪問系統(tǒng)頁(yè)面，此時(shí)瀏覽器會(huì)發(fā)送頁(yè)面請(qǐng)求到系統(tǒng)服務(wù)器，并由業(yè)務(wù)服務(wù)層處理生成初始頁(yè)面結(jié)構(gòu)，在頁(yè)面加載完成后，啟動(dòng)事件監(jiān)控。當(dāng)用戶操作頁(yè)面的時(shí)候，由Javascript負(fù)責(zé)捕獲瀏覽器用戶操作事件，并將請(qǐng)求數(shù)據(jù)組織成JSON格式，Ajax引擎初始化XMLHttpRequest對(duì)象，發(fā)起請(qǐng)求到服務(wù)器，服務(wù)器的Servlet接收請(qǐng)求后，對(duì)JSON格式數(shù)據(jù)進(jìn)行處理，并由調(diào)用業(yè)務(wù)對(duì)象進(jìn)行業(yè)務(wù)處理，并將處理結(jié)果組織成JSON格式的數(shù)據(jù)反饋給客戶端，客戶端Ajax引擎接收服務(wù)器響應(yīng)，更新客戶端頁(yè)面內(nèi)容。

3 應(yīng)用場(chǎng)景設(shè)計(jì)與實(shí)現(xiàn)

3.1 表單驗(yàn)證和交互

CPMIS包含許多業(yè)務(wù)表單，業(yè)務(wù)表單的特點(diǎn)是字段信息多，字段控件多樣化，頁(yè)面信息加載需要等待較長(zhǎng)時(shí)間，有些字段信息與業(yè)務(wù)邏輯驗(yàn)證需要在服務(wù)端進(jìn)行。

采用傳統(tǒng)方式進(jìn)行表單數(shù)據(jù)驗(yàn)證和表單提交操作，頁(yè)面將頻繁的進(jìn)行跳轉(zhuǎn)和刷新，這無疑延長(zhǎng)了用戶等待時(shí)間，也增加了服務(wù)器的處理壓力，占用了更多系統(tǒng)資源和網(wǎng)絡(luò)資源。

采用Ajax+JSON技術(shù)將得到如下改善：

1）異步提交業(yè)務(wù)表單數(shù)據(jù)：用戶進(jìn)行表單提交操作時(shí)，Javascript對(duì)表單數(shù)據(jù)打包成JSON格式，通過Ajax引擎提交后臺(tái)服務(wù)端進(jìn)行處理，同時(shí)在頁(yè)面上顯示一個(gè)“數(shù)據(jù)提交正在處理中…”的消息，提升用戶感知。

2） 表單信息可以局部刷新：通過Ajax動(dòng)態(tài)獲取業(yè)務(wù)數(shù)據(jù)，表單局部刷新。在業(yè)務(wù)操作成功后，可以不進(jìn)行頁(yè)面跳轉(zhuǎn)，而是對(duì)表單數(shù)據(jù)進(jìn)行局部刷新，減少了刷新等待時(shí)間；操作失敗的話，則讀取JSON格式錯(cuò)誤信息，并在頁(yè)面上進(jìn)行動(dòng)態(tài)展示，并不需要跳轉(zhuǎn)到錯(cuò)誤信息頁(yè)面，避免用戶需要返回表單進(jìn)行后續(xù)操作。

3）業(yè)務(wù)字段驗(yàn)證：在提交表單到后臺(tái)后，后臺(tái)服務(wù)進(jìn)行表單驗(yàn)證，如果驗(yàn)證通過，則進(jìn)行業(yè)務(wù)處理；如果驗(yàn)證不通過，則返回JSON格式的錯(cuò)誤驗(yàn)證信息，Ajax在獲取響應(yīng)的驗(yàn)證數(shù)據(jù)后，交由Javascript進(jìn)行處理，并在頁(yè)面展示驗(yàn)證錯(cuò)誤信息，定位并高亮顯示驗(yàn)證有問題的控件，使得用戶可以快速定位錯(cuò)誤進(jìn)行修改，提升了用戶工作效率。

圖2 表單驗(yàn)證和交互示例：通過Ajax異步驗(yàn)證框架協(xié)議表單必填信息

3.2 系統(tǒng)首頁(yè)信息展示

用戶登錄后，首先訪問系統(tǒng)首頁(yè)，系統(tǒng)首頁(yè)作為一個(gè)系統(tǒng)門戶，集中展示了很多信息：系統(tǒng)公告、待辦事宜、溫馨提醒、系統(tǒng)警告、我的項(xiàng)目、項(xiàng)目進(jìn)度。

系統(tǒng)首頁(yè)如果采用傳統(tǒng)方式一次性加載，由于信息多，服務(wù)器處理慢，這樣用戶需求等待較長(zhǎng)時(shí)間，對(duì)用戶感知造成負(fù)面影響。

為了提升系統(tǒng)首頁(yè)的加載，使用Ajax+JSON技術(shù)，讓重要摘要信息快速加載，詳細(xì)信息通過Ajax進(jìn)行獲取，主要體現(xiàn)在：

1）將信息進(jìn)行歸類，提取摘要信息：按照信息分類分區(qū)域進(jìn)行顯示，展示摘要信息列表，在每一個(gè)信息展示區(qū)域提供手動(dòng)刷新的功能。比如待辦事宜，如果用戶需要重新獲取待辦事宜，只需要手動(dòng)刷新待辦事宜這個(gè)區(qū)域，通過Ajax+JSON獲取到最新的待辦事宜數(shù)據(jù)，并進(jìn)行展現(xiàn)，而其他區(qū)域并不會(huì)進(jìn)行刷新。

2）動(dòng)態(tài)獲取詳細(xì)信息：如果用戶想更多地了解摘要信息，點(diǎn)擊摘要信息條目，通過Ajax+JSON獲取詳細(xì)信息，并進(jìn)行展現(xiàn)。

3）延遲加載：對(duì)應(yīng)一些重要的信息，需要看到詳細(xì)信息，設(shè)置為在系統(tǒng)頁(yè)面加載后，通過Ajax+JSON延遲獲取信息，并進(jìn)行展現(xiàn)，不需要用戶手工刷新。

圖3 系統(tǒng)首頁(yè)動(dòng)態(tài)加載示例：點(diǎn)擊摘要信息動(dòng)態(tài)獲取待辦事宜詳細(xì)內(nèi)容

3.3 級(jí)聯(lián)選擇框

所謂級(jí)聯(lián)選擇框就是多個(gè)選擇框組合在一起，形成層次關(guān)系，上級(jí)的選擇框選項(xiàng)發(fā)生變化，下級(jí)選擇框的可選范圍需要?jiǎng)討B(tài)調(diào)整。級(jí)聯(lián)層次可以是2級(jí)或2級(jí)以上。表單頁(yè)面，查詢頁(yè)面存在許多級(jí)聯(lián)選擇框，比如通過選擇單位級(jí)聯(lián)改變部門，通過部門級(jí)聯(lián)選擇員工。試想，如果這樣的級(jí)聯(lián)選擇框的數(shù)據(jù)時(shí)一次性加載的話，數(shù)據(jù)量會(huì)很大，加重服務(wù)器和網(wǎng)絡(luò)壓力。

用Ajax+JSON技術(shù)進(jìn)行改造，將不會(huì)有這樣的問題。當(dāng)用戶對(duì)上級(jí)選擇框進(jìn)行選擇的時(shí)候，通過Javascript捕獲此事件，將當(dāng)前選擇框的值作為參數(shù)，通過Ajax+JSON發(fā)起獲取數(shù)據(jù)的請(qǐng)求，動(dòng)態(tài)獲取下級(jí)選擇框的可選范圍數(shù)據(jù)，并進(jìn)行填充展現(xiàn)。

圖4 級(jí)聯(lián)選擇框示例：通過專業(yè)大類動(dòng)態(tài)級(jí)聯(lián)專業(yè)細(xì)類的選擇

3.4 頁(yè)面選項(xiàng)卡加載

業(yè)務(wù)頁(yè)面通常由多個(gè)選項(xiàng)卡組成。上面已經(jīng)對(duì)表單進(jìn)行過Ajax+JSON的改造，接下來對(duì)頁(yè)面中的選項(xiàng)卡進(jìn)行改造。

每一個(gè)選項(xiàng)卡內(nèi)容可能是表單，也可能是信息展示頁(yè)面，由于選項(xiàng)卡的內(nèi)容多樣性，不僅僅局限在對(duì)JSON格式的數(shù)據(jù)進(jìn)行處理，也要支持HTML、XML格式的設(shè)計(jì)展現(xiàn)。HTML格式的數(shù)據(jù)處理較為簡(jiǎn)單，在Ajax獲取到HTML數(shù)據(jù)之后，直接進(jìn)行DOM對(duì)象操作，將HTML數(shù)據(jù)加載到選擇框的innerHTML里面即可；而XML則需要進(jìn)行數(shù)據(jù)解析，在進(jìn)行DOM操作，進(jìn)行數(shù)據(jù)的展現(xiàn)。

當(dāng)用戶點(diǎn)擊選項(xiàng)卡后，頁(yè)面通過AJAX提交后臺(tái)請(qǐng)求，并獲取返回的數(shù)據(jù)，對(duì)數(shù)據(jù)格式進(jìn)行判斷，選擇相應(yīng)的解析和展現(xiàn)方式；在選項(xiàng)卡的表單提交后臺(tái)處理，可以通過選項(xiàng)卡的Ajax動(dòng)態(tài)加載的特性進(jìn)行選項(xiàng)卡的刷新。

圖5 頁(yè)面選項(xiàng)卡加載示例：點(diǎn)擊規(guī)劃選項(xiàng)卡動(dòng)態(tài)獲取規(guī)劃表單信息

3.5 模糊匹配

CPMIS中有大量信息字段需要在表單中通過選擇框來進(jìn)行選擇，比如建設(shè)性質(zhì)、建設(shè)單位、供應(yīng)商、物資類別等，其中有些選擇框的選項(xiàng)比較少，而有些選項(xiàng)就比較多，至少超過一萬條數(shù)據(jù)，甚至十萬、百萬，這么多數(shù)據(jù)進(jìn)行獲取需要花很長(zhǎng)時(shí)間，網(wǎng)絡(luò)傳輸也要花不少時(shí)間，我們驗(yàn)證過，頁(yè)面在加載一萬條供應(yīng)商數(shù)據(jù)花了至少8秒鐘時(shí)間。就算加載完了，選項(xiàng)按照一定順序排列好，用戶在選擇起來也十分費(fèi)勁。

大多數(shù)情況下，用戶是知道要選擇項(xiàng)的關(guān)鍵字的，如果能夠?qū)崿F(xiàn)在輸入關(guān)鍵字后，通過系統(tǒng)進(jìn)行搜索匹配，極大地減少選擇項(xiàng)范圍，那么選擇起來會(huì)十分方便快捷。

由于Ajax天生是異步方式的，JSON也能很好地表達(dá)選項(xiàng)列表。在輸入框中輸入關(guān)鍵字后，通過回車鍵觸發(fā)匹配動(dòng)作，此時(shí)Ajax將關(guān)鍵字作為參數(shù)，發(fā)起一個(gè)請(qǐng)求，請(qǐng)求處理完成返回JSON格式的選項(xiàng)列表數(shù)據(jù)，Javascript解析JSON數(shù)據(jù)后，以選項(xiàng)列表的形式進(jìn)行展現(xiàn)，用戶可以通過上下箭頭+回車鍵或者鼠標(biāo)點(diǎn)擊進(jìn)行選擇。

圖6 模糊匹配示例：通過輸入關(guān)鍵字過濾供應(yīng)商列表進(jìn)行選擇

3.6 統(tǒng)計(jì)分析

統(tǒng)計(jì)分析是指統(tǒng)計(jì)查詢+分析圖表，尤其是圖表展現(xiàn)需要進(jìn)行大量的計(jì)算，一般的分析圖表是由服務(wù)器根據(jù)統(tǒng)計(jì)數(shù)據(jù)動(dòng)態(tài)生成，占用比較多的服務(wù)器資源，而且出來的圖片一般是靜態(tài)效果，也不夠美觀。

Open Flash Chart是一個(gè)用來生成Flash的圖表的組件，能很好的和Javascript進(jìn)行交互，支持根據(jù)JSON格式的數(shù)據(jù)來生成分析圖表。

在統(tǒng)計(jì)分析頁(yè)面提供查詢條件和動(dòng)態(tài)獲取查詢結(jié)果的功能，用戶填寫查詢條件，執(zhí)行查詢操作，頁(yè)面便通過AJAX發(fā)起查詢請(qǐng)求，后臺(tái)按照Open Flash Chart的要求返回JSON格式數(shù)據(jù)，AJAX在收到結(jié)果后，通過Javascript調(diào)用Open Flash Chart組件，動(dòng)態(tài)生成圖表效果。通過這種方式，可以避免每次查詢的時(shí)候都要加載Open Flash Chart組件，做到完全有客戶端動(dòng)態(tài)生成圖表，減輕了服務(wù)端的負(fù)擔(dān)，而且圖片十分美觀。

圖7 統(tǒng)計(jì)分析示例：工程進(jìn)度統(tǒng)計(jì)圖

4 結(jié)束語

Ajax+JSON技術(shù)在系統(tǒng)運(yùn)行近4年時(shí)間，取得了很好的效果：

1）減輕服務(wù)器負(fù)擔(dān)和網(wǎng)絡(luò)流量

Ajax在需要的時(shí)候采用異步方式在用戶需要的時(shí)候獲取數(shù)據(jù)，并且數(shù)據(jù)用JSON格式包裝，通過GZIP壓縮之后，數(shù)據(jù)包的大小一般會(huì)壓縮成原來的20%左右，可以最大程度地減少冗余請(qǐng)求，減少了數(shù)據(jù)下載總量，既縮短了用戶等待時(shí)間，也減少了網(wǎng)絡(luò)資源的浪費(fèi)，這在大量用戶并發(fā)的時(shí)候顯得特別重要。

2）加快頁(yè)面展現(xiàn)速度，提升用戶體驗(yàn)

將部分頁(yè)面內(nèi)容設(shè)置為在用戶需要的時(shí)候才通過Ajax獲取，使得頁(yè)面重要信息的展現(xiàn)速度得到顯著提升。Ajax使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求并得到服務(wù)器響應(yīng)，在不重新載入整個(gè)頁(yè)面的情況下用Javascript操作DOM最終更新頁(yè)面。所以在讀取數(shù)據(jù)的過程中，用戶所面對(duì)的不是白屏，是原來的頁(yè)面內(nèi)容（也可以加一個(gè)Loading的提示框讓用戶知道處于讀取數(shù)據(jù)過程），只有當(dāng)數(shù)據(jù)接收完畢之后才更新相應(yīng)部分的內(nèi)容。這種更新瞬間完成，用戶幾乎感覺不到，這種體驗(yàn)是十分美妙的。

3）進(jìn)一步促進(jìn)頁(yè)面呈現(xiàn)和數(shù)據(jù)的分離

在B/S模式的系統(tǒng)中，頁(yè)面呈現(xiàn)和數(shù)據(jù)本身沒有清晰的界限，數(shù)據(jù)和數(shù)據(jù)表現(xiàn)的格式混雜在一起，而基于Ajax技術(shù)的B/S系統(tǒng)采用JSON作為數(shù)據(jù)的載體，數(shù)據(jù)通過DOM解析之后表現(xiàn)出來，能夠做到數(shù)據(jù)與數(shù)據(jù)表現(xiàn)的徹底分離，有利于分工合作、減少頁(yè)面的修改引起的WEB應(yīng)用程序錯(cuò)誤，提高效率、更加適用目前的系統(tǒng)要求。

[1]歐陽(yáng)榮彬,王倩宜,劉云峰,李麗.Ajax與新型管理信息系統(tǒng)[J].中山大學(xué)學(xué)報(bào)(自然科學(xué)版),2009,48(z1).

[2]Woolston D.Pro Ajax and the NET 2.0 Platform[M].LosAngeles，California，USA：Wager T Press，2006.

[3]張敬敏,侯思祖,王華.AJAX技術(shù)在工程管理信息系統(tǒng)中的應(yīng)用[J].現(xiàn)代計(jì)算機(jī)（專業(yè)版）,2007,(7).

[4]曾振柄,陳良育,張駿,符紅光.基于AJAX和自動(dòng)推理技術(shù)構(gòu)建交互式數(shù)學(xué)Web服務(wù)[J].計(jì)算機(jī)應(yīng)用，2007,27(9): 2239-2241.