Ajax技術在臺風信息系統中的應用研究

摘要：臺風信息系統是基于WebGIS的臺風信息發布和數據共享的平臺，用來加強臺風的監測和預報。Ajax是異步JavaScript和XML技術的組合，可使用戶操作與服務器響應異步化，縮短客戶端與服務器端的響應時間。文中介紹了Ajax技術在基于WebGIS的臺風信息系統中的應用，研究了如何在系統客戶端應用Ajax技術，使系統具有更好的交互性。

關鍵詞：Ajax；JavaScript；WebGIS；臺風信息系統；交互性

中圖分類號：TP311文獻標識碼：A文章編號：1009-3044(2011)04-0735-03

The Study on the Application of Ajax in the Information System of Typhoon

YUAN Yuan

(Wuhan Bioengineering Institute，Wuhan 430415， China)

Abstract: The information system of typhoon is a platform based on WebGIS for the information announcing and data sharing about typhoon， with the purpose of monitering and forcasting typhoon. Ajax is the combination of asynchronous technologies of Java， Script and XML， which enables the asynchronization of the operation of the user and the response of the sever， so as to shorten the responding time between the client and the sever end. This paper introduces the application of Ajax in the information system of typhoon based on WebGIS， and make a study about how to apply the technology of Ajax to the system client， for the purpose of better interaction of the system.

Key words: ajax; JavaScript; WebGIS; the information system of typhoon; interaction

臺風是一種破壞力很強的災害性天氣，加強臺風的監測和預報，是減輕臺風災害的重要的措施。隨著科技的發展，需要以一種高效的手段來管理臺風數據。WebGIS是GIS與Internet技術結合的產物，它不但具有GIS的數據管理和空間分析功能，而且具有Internet信息發布功能和數據共享的特點，這為臺風信息的發布和數據的共享提供了一個很好的平臺。

Ajax技術是實現Web2.0的重要技術，它采用數據異步傳輸和請求機制，使得客戶端與服務器之間的數據通信在后臺運行，數據請求不打斷用戶的地圖操作或界面動作，從而極大地提高了用戶界面的友好程度。那么WebGIS系統應該怎樣與Ajax結合，提高響應速度以及海量數據快速處理能力，這都是值得探索的問題。本文探討了如何在基于WebGIS的臺風信息系統中使用Ajax技術以增強系統的交互性。

1 Ajax技術

1.1 Ajax介紹

Ajax全稱為“Asynchronous JavaScript and XML”，指一種創建交互式網頁應用的網頁開發技術，是目前客戶端最有效率的技術。Ajax技術是目前在瀏覽器中通過JavaScript腳本可以使用的所有技術的集合。Ajax不是單一的技術，而是JavaScript、CSS（層疊樣式表）、XML、文檔對象模型（DOM）、XMLHttpRequest等技術的集合。Ajax以一種嶄新的方式來使用所有的這些技術。

在Ajax的這些技術中：

1）JavaScript定義了業務規則和程序流程，用于邦定和處理所有數據。

2）DOM和CSS用來實現動態顯示和交互，改變界面的外觀。

3）XML作為數據傳輸的媒介，服務器采用返回XML文本的方式將響應后的數據返回給客戶端。

4）XMLHttpRequest是Ajax中最為核心的技術，它負責將用戶信息以異步方式發送到服務器，并接收服務器返回的響應信息和數據。應用程序使用XMLHttpRequest對象以后臺方式從服務器獲得數據。

1.2 Ajax工作原理

傳統Web的工作原理是將用戶的操作觸發提交給Web服務器，服務器接到提交的HTTP請求后執行相應操作，然后將靜態HTML頁面返回到客戶端。簡單的說傳統Web的工作原理就是“提交請求——執行操作——頁面重載”的同步過程，因而容易導致用戶在發出請求后，得到返回結果前一直處于等待狀態，無法滿足用戶對系統快速響應的要求。

Ajax與傳統Web的不同之處在于服務應答的異步性，Ajax的工作原理相當于在傳統Web模型的客戶端和服務器端之間加了—個中間層——Ajax引擎，將用戶操作與服務器響應異步化，使客戶端向服務器發出的部分請求不需要等待返回結果，就可以繼續向服務器發出請求。比如：像—些數據驗證和數據處理等都交給Ajax引擎自己來做，只有當需要從服務器讀取新數據時才由Ajax引擎代為向服務器提交請求。

1.3 Ajax優勢

本文設計的臺風信息系統采用基于B/S模式的三層架構，與傳統的C/S架構相比，服務器的響應速度及網絡的傳輸速度是B/S應用的一個瓶頸，用戶不得不等待服務器的響應和頁面的刷新。為了解決這些問題，我們在臺風信息系統的客戶端使用Ajax技術。

使用Ajax技術最突出的優勢為：

1）利用客戶端閑置的能力來處理原來服務器端做的部分事情，減輕服務器和帶寬的負擔，最大限度地減少了冗余的請求和響應對服務器造成的負擔。

2）在Ajax中客戶端和服務器端交換數據是異步的，數據更新只更新有數據改變的那部分頁面內容，不會刷新整個頁面，實現了無刷新的用戶體驗。優化了客戶端和服務器端間的溝通，減少不必要的數據傳輸及降低網絡上數據流量。

3）使用異步方式與服務器通信，不需要打斷用戶的操作，是系統具有更好的交互性。

2 Ajax在臺風信息系統中的應用

2.1 臺風信息系統功能分析

臺風信息系統主要實現臺風信息/路徑歷史查詢、臺風信息預報/路線擬合等功能，并將臺風實況與預測路徑顯示于地理底圖中，可視化表達數值信息，通過臺風實況與預測路徑、風圈半徑與地理底圖的疊加，對臺風影響地區進行消息警報，為氣象部門提供精細化氣象預報。系統客戶端部分主要采用JavaScript、Ajax等技術實現，系統的服務器部分主要使用ArcGIS Server、IIS和Web應用開發框架實現。JavaScript的主要作用是處理頁面數據，把服務器返回的數據結果在地圖上顯示。同時負責把客戶端的請求轉發給Ajax，并對Ajax返回的數據進行處理，在客戶端顯示。Ajax在客戶端以異步模式提交客戶端請求，并把服務器返回的結果交由JavaScript函數處理，實現局部刷新。

基于Ajax的客戶端主要提供GIS數據表示和信息可視化功能，形象的展示客戶的請求及反饋的應答。客戶端的功能有：地圖放大、縮小、地圖漫游等基本操作；臺風路徑查詢；臺風信息顯示；地圖上任意兩地間的距離測量。

2.2 臺風信息系統的實現

本系統采用Ajax的客戶端回調技術實現了查詢臺風信息，查看臺風軌跡點信息，清除測距痕跡，選擇城市測距等操作。通過一個.js文件，提取頁面值，對客戶端的操作作出處理，例如：臺風路徑選擇、清除測距痕跡等，并把它們填充到已生成的頁面上，而無需重新生成整個頁面。因此不需要進行整個回送循環，就可以修改頁面上的值。即在更新頁面時，可以不重新繪制整個頁面，客戶端用戶不會看到頁面閃爍和重定位。

系統通過ICallbackEventHandler接口的RaiseCallbackEvent和GetCallbackEvent兩個方法來處理客戶端腳本請求，實現客戶端回調。前者從瀏覽器接受一個字符串作為事件參數，即該方法接受客戶端JavaScript傳遞的參數。后者將所得到的結果傳回給客戶端的JavaScript，JavaScript再將結果更新到頁面。實現的具體步驟如圖3所示。

下面以客戶端的清除測量痕跡操作為例，介紹具體的實現過程：

首先，添加一個按鈕控件，在按鈕中添加一個onclick事件，激活一個JavaScript事件。

然后，獲取一個對客戶端函數的引用；調用該函數時，啟動一個對服務器端事件的客戶端回調。

function Measure_Clear_Click(evt)

{

context=\"Measure_Clear\";

CallServer();

}

function CallServer()

{………..}

然后，接受響應，執行操作。

void ICallbackEventHandler.RaiseCallbackEvent(string evtArg)

{

. . . . . .//系統功能實現

callbackResult = Map1.CallbackResults.ToString(); //得到返回的結果

}

最后，回傳回調結果。

string ICallbackEventHandler.GetCallbackResult()

{

returncallbackResult;

}

3 結束語

本文介紹了Ajax技術在臺風信息系統中的應用，系統中主要在部分頁面運用Ajax技術實現了客戶端回調，頁面部分刷新，避免了用戶多次查詢不同臺風預測路徑，歷史路徑時出現的頁面“白屏”現象，縮短了用戶的等待時間，給用戶帶來愉悅的體驗，降低了冗余請求和響應對服務器造成的負擔，減輕了服務器壓力，充分體現了Ajax 技術的優點。但是Ajax使用中也存在一些問題需要進一步研究，比如：如果瀏覽器不支持或者禁用了的JavaScript腳本，Ajax應用將不能正常工作；如果使用Ajax處理大量數據會提高成本，異步數據傳輸大量數據時也可能會出現延遲情況。

參考文獻：

[1] 柯昌正，黃厚寬.AJAX技術的原理與應用[J].鐵路計算機應用，2007，16(1):27-29.

[2] Asleson R，Schutta N T.AJAX基礎教程[M].金靈，譯.北京:人民郵電出版社，2006.

[3] 唐群，謝小魁.Ajax與WebGIS的集成研究[J].測繪與空間地理信息，2009，32(6):93-95.

[4] 譚力，楊宗源，謝瑾奎.Ajax技術的數據響應優化[J].計算機工程，2010，36(7):52-54.

[5] 懷艾芹.AJAX技術在Web系統開發中的研究及應用[J].計算機時代，2010(9):52-57.

[6] 楊名念.Ajax技術在機房排課系統中的應用[J].電腦知識與技術，2009，5(19):5193-5195.

[7] 劉剛， 鄧飛其， 楊長海.AJAX在WebGIS異步數據交互中的研究[J].計算機技術與發展，2009，19(1):53-55.

[8] 馬綺麗.Ajax技術原理及應用[J].計算機光盤軟件與應用，2010(10):69-70.