- 相關推薦
Ajax技術及其在WebGIS中的應用的教程
摘 要 本文首先介紹了Ajax的出現背景，然后分析了AJAX引擎的原理和各個組成部分，接著討論了Ajax在WebGIS中的應用，總結出三種開發模式，并給出了用Ajax.NET在MapXtreme.NET2004平臺上開發webgis的關鍵源代碼。
關鍵詞 WebGIS; Ajax; XMLHttpRequest; Web Application; MapXtreme.net
當前Web服務逐漸滲入到人們的日常生活中，越來越多的人正通過web享受信息化時代帶來的各種服務。WebGIS是GIS與Web有機結合的產物，是Internet環境下的一種存儲、傳輸、處理、分析、顯示和應用地理空間信息的計算機系統，它將GIS帶入到千家萬戶，使GIS真正成為一種大眾使用工具[5],[18]。
1 Ajax引擎的原理
AJAX（Asynchronous JavaScript and XML）是現有多種技術的綜合，包括JavaScript、XHTML、CSS、DOM、XML、XSTL和XMLHttpRequest。Ajax使用XHTML和CSS標準化呈現數據，使用DOM實現動態顯示和交互數據，使用XML和XSTL進行數據交換與處理，使用XMLHttpRequest對象進行異步數據讀取，使用JavaScript綁定和處理所有數據[1]。Ajax為交互操作較多、數據讀寫頻繁和數據分類良好的Web應用提供了一個很好的解決方案。其中XMLHttpRequest、JavaScript和DOM是Ajax技術的核心。
1.1 XMLHttpRequest
XMLHttpRequest是Ajax引擎的核心技術，是Ajax引擎解決無需刷新整個頁面即可從服務器獲取所需數據問題的關鍵。在微軟IE 平臺下XMLHttpRequest 是XMLHTTP 組件的一個對象，它通過允許開發人員在web 頁面內部使用XMLHTTP ActiveX 組件擴展自身功能，開發人員不必從當前的Web 頁面導航而直接與服務器上的數據庫進行雙向數據傳輸。該項功能相當重要，它彌補了無狀態連接的缺點，排除下載冗余Web 數據的需要，從而提高了進程速度。
1.2 DOM ( Document object Model )
DOM 是給HTML 和XML 文件使用的一組API。它提供了文件的結構表述，允許開發人員改變其中的內容,建立網頁與程序語言溝通的橋梁。所有Web 開發人員操作及建立文件的屬性、方法及事件都以對象方式來展現，這些對象均可由當今大多數瀏覽器以腳本取用。一個用HTML 或XHTML 構建的網頁可看作是一組結構化數據，這些數據被封在DOM (Document Object Model）中，且DOM 提供對網頁中各個對象的讀寫支持。
1.3 JavaScript
JavaScript是一種在瀏覽器中大量使用的跨平臺編程語言，常被用來制作網頁特效或表單驗證。在Ajax 中JavaScript 則是XMLHttpRequest與DOM 交互的橋梁以及Ajax 引擎工作的主要推動力。JavaScript 通過調用XMLHttpRequest 的屬性和方法獲取服務器端數據，調用DOM 的API更新Web 頁面內容，從而實現整個頁面的無刷新更新頁面的效果。
2 基于Ajax引擎的Web應用體系結構
圖1 Ajax web 應用程序模型
Ajax采用異步交互過程，在用戶與服務器之間引入一個中間媒介，從而消除網絡交互過程中“處理—等待—處理—等待”的缺點。用戶的瀏覽器在執行任務時即裝載了Ajax引擎，通常放在一個隱藏的框架中。Ajax引擎采用JavaScript語言編寫，負責編譯用戶界面及與服務器之間的交互。Ajax引擎允許用戶與應用軟件之間的交互過程異步進行，獨立于用戶與網絡服務器間的交流。用JavaScript調用Ajax引擎來代替產生一個HTTP的用戶動作，如內存中的數據編輯、頁面導航、數據校驗等無需重新載入整個頁面的請求，可由Ajax引擎來執行[1], [17]。基于Ajax引擎的Web應用體系結構模型如圖1所示。
3 Ajax的優點3.1 減輕服務器和網絡的負擔
Ajax的原則是“按需獲取數據”，可最大程度地減少冗余請求和響應對服務器造成的負擔。把以前一些服務器承擔的工作轉到客戶端，利用客戶端閑置的能力進行處理，從而減輕服務器和網絡的負擔，節約空間和寬帶租用成本。
3.2 無刷新更新頁面，減少用戶實際和心理等待時間
首先，“按需獲取數據”的理念減少了數據的實際讀取量。
其次，DOM 的使用不像傳統刷新那樣出現白屏的情況，而是在讀取數據的過程中顯示的是原來的頁面狀態，只有當接收到全部數據后才更新相應部分的內容，而這種更新也是瞬間的，用戶幾乎感覺不到, 提高了可用性，提高了用戶體驗。這種無刷新更新頁面的功能，減少用戶實際和心理等待時間。
3.3 基于現有公開的標準化
Ajax技術標準公開，跨瀏覽器和跨平臺，并且不需要插件或下載小程序。
3.4 實現數據聚合
Ajax可以調用外部數據，實現數據聚合的功能。比如微軟發布的在線RSS 閱讀器；用戶還可以利用一些開放的數據，開發自已的應用程序，例如可用GOOGLE的地圖數據做一些新穎的專題地圖網絡應用。
3.5 界面與應用分離，數據與呈現分離
Ajax 在整個Web 服務系統中的位置決定了Ajax 引擎只要從服務端獲取XML 或者其他格式的數據，便可定制整個Web 界面，從而可以使用服務端只注重數據邏輯處理而不必關心Web 界面的呈現，將數據呈現的工作交給Ajax 引擎來做，這樣有利于分工合作、減少非技術人員對頁面的修改造成的Web應用程序錯誤，提高了效率，也更加適用于現在的發布系統。
3.6 有大廠商的支持
AJAX被IT大廠商包括Google、yahoo、Amazon和微軟大量采用并廣泛應用到實際的項目開發中，證明了市場的歡迎程度和該技術的正確性。
4 Ajax在WebGIS中的應用4.1 通用AJAX開發框架
AJAX遵循Request/Response模式，這個框架的基本流程為：對象初始化－＞發送請求－＞服務器接收－＞服務器返回－＞客戶端接收－＞修改客戶端頁面內容，這個過程是異步進行的。
(1) 初始化對象并發出XMLHttpRequest請求。
為了讓Javascript可以向服務器發送HTTP請求，必須使用XMLHttpRequest對象。各個瀏覽器對這個實例化過程的實現方式不同。IE以ActiveX控件的形式提供，而Mozilla等瀏覽器則直接以XMLHttpRequest類的形式提供。
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
(2) 指定響應處理函數
指定當服務器返回信息時客戶端的處理方式，相應的處理函數名稱賦給XMLHttpRequest對象的onreadystatechange屬性。例如：
http_request.onreadystatechange = processRequest;
(3) 發出HTTP請求
指定響應處理函數之后，就可以向服務器發出HTTP請求。這一步調用XMLHttpRequest對象的open和send方法。
http_request.open(#39;GET#39;, #39;http://www.example.org/some.file#39;, true);
http_request.send(null);
open的第一個參數是HTTP請求的方法，為Get、Post或者Head。open的第二個參數是目標URL。open的第三個參數只是指定在等待服務器返回信息的時間內是否繼續執行下面的代碼。如果為True，則不會繼續執行，直到服務器返回信息。默認為True。
(4) 處理服務器返回的信息
首先，它要檢查XMLHttpRequest對象的readyState值，判斷請求的當前狀態。形式如下：
if (http_request.readyState == 4) {
// 信息已經返回，可以開始處理
} else {
// 信息還沒有返回，等待
}
服務器返回信息后，還需要判斷返回的HTTP狀態碼，確定返回的頁面沒有錯誤。所有的狀態碼都可以在W3C的官方網站上查到。其中，200代表頁面正常。
if (http_request.status == 200) {
// 頁面正常，可以開始處理信息
} else {
// 頁面有問題
}
XMLHttpRequest對成功返回的信息有兩種處理方式：responseText將傳回的信息當字符串使用；responseXML將傳回的信息當XML文檔使用，可以用DOM處理。
4.2 基于Ajax通用組件的WebGIS開發框架
AJAX一旦大規模實際應用，就會造成眾多問題，如技術的多樣性、分布耦合的復雜性、瀏覽器的兼容性、開發效率低下、開發進度慢、質量低和可維護性差等。基于組件的AJAX開發，可以屏蔽技術的多樣性和復雜性，集中維護修改，以一變應萬變；采用規范合理的架構，能夠輕易擴展兼容各種平臺后臺語言和瀏覽器，從而才可能真正大規模在項目中實際應用。
下面以Visual Studio 2005和C#為例，介紹組件Ajax.NET在MapXtreme.NET2005中的應用開發。
(1) 下載最新版Ajax.NET，在工程項目中添加引用，并修改配置文件web.config。
[...]
(2) 以下是將地圖居中的C#代碼，函數返回一個指向緩存地圖的URL地址，公開給客戶端調用的后臺C#函數需要添加AjaxMethod屬性標記。
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite )]
public string doCenterTool(double x, double y)
{
// 在使用Pooling后重新生成
RestoreState();
MapInfo.Mapping.Map myMap = null;
myMap = MapInfo.Engine.Session.Current.MapFactory[0];
MapInfo.Geometry.CoordSys myCoordSys = myMap.Get DisplayCoordSys();
System.Drawing.Point sP = new System.Drawing.Point (Convert.ToInt16(x),Convert.ToInt16(y));
DPoint mP = new DPoint(x,y);
//轉換成地圖坐標點
myMap.DisplayTransform.FromDisplay(sP,out mP);
myMap.SetView(mP, myCoordSys, myMap.Zoom);
//以流式輸出，并在服務器端緩存
return exportToStream(myMap);
}
(3) 為了后臺C#方法能夠被客戶端JavaScript調用，必須注冊整個類。
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
}
(4) 編寫回調JavaScript腳本，將當前地圖用新圖代替。
function doReCenter_callback(newImageUrl)
{
var myMapImg = document.getElementById(#39;MapControl1 _Image#39;);
myMapImg.src = newImageUrl.value;
}
(5)最后，在客戶端使用JavaScript來生成一張新地圖，可通過自定義工具或直接修改資源文件JavaScript代碼實現。
doCenterTool(event.x, event.y, doReCenter_callback);
4.3 在WebGIS內部集成Ajax功能
隨著相關技術的成熟和Ajax的廣泛使用，各大GIS廠商將會把Ajax集成到他們WebGIS平臺內部去。
Google在2004年初推出Google Maps[2]，融合了全球的空間地圖數據以及高分辨率的影像，其中采用了特有Ajax技術AJAXSLT，ESRI的創始人兼總裁Jack Dangermond評價Google的網絡GIS作用“正是Google打開了我們的世界，GIS行業正在趨于繁榮” [12]。Microsoft的Live Local[19]， Yahoo公司的Flash/AJAX[9]等空間信息門戶共同網站也采用了增強用戶體驗的AJAX技術，該技術良好的RWA(Rich Web Application)特性給普通大眾用戶使用GIS無疑帶來了很大的福音。
ESRI正在開發ArcGIS 9.2，在ArcGIS Server和ArcIMS的應用開發框架（ADF）將包括了一個AJAX可用應用和豐富的開發API[12]；MapInfo在將要發布的MapXtreme2006組件中也將會集成Ajax技術，可以讓用戶建立高性能互操作地圖應用，包括無縫和動態的移動、放大、縮小、以及地圖提示等功能，以提高網絡應用的可用性和響應速度[11]。
5 小結
AJAX因具有獨特的優勢，迅速成為Web研究熱點，并在實際開發得到廣泛應用。本文分析了Ajax的原理和體系結構，提出了WebGIS中Ajax的三種開發模式，為WebGIS的開發提供了很好的指導。Ajax界面是WebGIS應用的主要的組成，Ajax 的應用將會越來越廣，以至于會改變WebGIS的基礎交互模式, 為WebGIS的大眾化應用提供了極其重要的技術保證。
參考文獻
[1] Jesse James Garrett. Ajax: A New Approach to Web Applications http://www.adaptivepath.com/publications/essays/archives/000385.php. February 18, 2005
[2] http://maps.google.com
[3] http://www.mapbar.com
[4] http://www.go2map.com
[5] http://www.3snews.com
[6] http://maps.sogou.com
[8] http://maps.51ditu.com
[9] http://maps.yahoo.com
[10] http://www.supermap.com.cn
[11] http://www.mapinfo.com
[12] http://www.arcgis.com
[13] Dave Crane, Eric Pascarello, Darren James. Ajax in Action[M]. Manning Publications, 2005
[14] Ryan Asleson, Nathaniel T. Schutta. Foundations of Ajax[M]. Apress, 2005
[15] Laurence Moroney. Foundations of Atlas: Rapid Ajax Development with ASP.NET 2.0, Apress, 2006
[16] Justin Gehtland, Ben Galbraith, Dion Almaer. Pragmatic Ajax : A Web 2.0 Primer[M]. Pragmatic Bookshelf, 2006
[17] 柯自聰. Ajax開發精要：概念、案例與框架[M]. 北京：電子工業出版社, 2006
[18] 孟令奎, 史文中, 張鵬林. 網絡地理信息系統[M]. 北京: 科學出版社, 2005
【Ajax技術及其在WebGIS中的應用的教程】相關文章：
關于VOIP網絡技術及其應用07-08
關于Ajax技術原理的幾點總結01-10
關于計算機的模擬技術及其應用10-11
油脂在烘焙食品技術中的應用09-15
WEB教程標準應用標簽10-19
CAD技術在機械設計中的應用09-18
數字技術在影視制作中的應用04-13
eda技術在生活中的應用10-30
特效技術在動畫設計中的應用10-22
網絡技術在印刷中的應用技巧01-21