Ajax技術(shù)及其在WebGIS中的應(yīng)用的教程

時間：2024-06-12 06:45:20 AJAX 我要投稿

相關(guān)推薦

　　摘要 本文首先介紹了Ajax的出現(xiàn)背景，然后分析了AJAX引擎的原理和各個組成部分，接著討論了Ajax在WebGIS中的應(yīng)用，總結(jié)出三種開發(fā)模式，并給出了用Ajax.NET在MapXtreme.NET2004平臺上開發(fā)webgis的關(guān)鍵源代碼。

　　關(guān)鍵詞 WebGIS; Ajax; XMLHttpRequest; Web Application; MapXtreme.net

　　當(dāng)前Web服務(wù)逐漸滲入到人們的日常生活中，越來越多的人正通過web享受信息化時代帶來的各種服務(wù)。WebGIS是GIS與Web有機(jī)結(jié)合的產(chǎn)物，是Internet環(huán)境下的一種存儲、傳輸、處理、分析、顯示和應(yīng)用地理空間信息的計算機(jī)系統(tǒng)，它將GIS帶入到千家萬戶，使GIS真正成為一種大眾使用工具[5],[18]。

　　1 Ajax引擎的原理

　　AJAX（Asynchronous JavaScript and XML）是現(xiàn)有多種技術(shù)的綜合，包括JavaScript、XHTML、CSS、DOM、XML、XSTL和XMLHttpRequest。Ajax使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)數(shù)據(jù)，使用DOM實現(xiàn)動態(tài)顯示和交互數(shù)據(jù)，使用XML和XSTL進(jìn)行數(shù)據(jù)交換與處理，使用XMLHttpRequest對象進(jìn)行異步數(shù)據(jù)讀取，使用JavaScript綁定和處理所有數(shù)據(jù)[1]。Ajax為交互操作較多、數(shù)據(jù)讀寫頻繁和數(shù)據(jù)分類良好的Web應(yīng)用提供了一個很好的解決方案。其中XMLHttpRequest、JavaScript和DOM是Ajax技術(shù)的核心。

　　1.1 XMLHttpRequest

　　XMLHttpRequest是Ajax引擎的核心技術(shù)，是Ajax引擎解決無需刷新整個頁面即可從服務(wù)器獲取所需數(shù)據(jù)問題的關(guān)鍵。在微軟IE 平臺下XMLHttpRequest 是XMLHTTP 組件的一個對象，它通過允許開發(fā)人員在web 頁面內(nèi)部使用XMLHTTP ActiveX 組件擴(kuò)展自身功能，開發(fā)人員不必從當(dāng)前的Web 頁面導(dǎo)航而直接與服務(wù)器上的數(shù)據(jù)庫進(jìn)行雙向數(shù)據(jù)傳輸。該項功能相當(dāng)重要，它彌補(bǔ)了無狀態(tài)連接的缺點，排除下載冗余Web 數(shù)據(jù)的需要，從而提高了進(jìn)程速度。

　　1.2 DOM ( Document object Model )

　　DOM 是給HTML 和XML 文件使用的一組API。它提供了文件的結(jié)構(gòu)表述，允許開發(fā)人員改變其中的內(nèi)容,建立網(wǎng)頁與程序語言溝通的橋梁。所有Web 開發(fā)人員操作及建立文件的屬性、方法及事件都以對象方式來展現(xiàn)，這些對象均可由當(dāng)今大多數(shù)瀏覽器以腳本取用。一個用HTML 或XHTML 構(gòu)建的網(wǎng)頁可看作是一組結(jié)構(gòu)化數(shù)據(jù)，這些數(shù)據(jù)被封在DOM (Document Object Model）中，且DOM 提供對網(wǎng)頁中各個對象的讀寫支持。

　　1.3 JavaScript

　　JavaScript是一種在瀏覽器中大量使用的跨平臺編程語言，常被用來制作網(wǎng)頁特效或表單驗證。在Ajax 中JavaScript 則是XMLHttpRequest與DOM 交互的橋梁以及Ajax 引擎工作的主要推動力。JavaScript 通過調(diào)用XMLHttpRequest 的屬性和方法獲取服務(wù)器端數(shù)據(jù)，調(diào)用DOM 的API更新Web 頁面內(nèi)容，從而實現(xiàn)整個頁面的無刷新更新頁面的效果。

　　2 基于Ajax引擎的Web應(yīng)用體系結(jié)構(gòu)

　　圖1 Ajax web 應(yīng)用程序模型

　　Ajax采用異步交互過程，在用戶與服務(wù)器之間引入一個中間媒介，從而消除網(wǎng)絡(luò)交互過程中“處理—等待—處理—等待”的缺點。用戶的瀏覽器在執(zhí)行任務(wù)時即裝載了Ajax引擎，通常放在一個隱藏的框架中。Ajax引擎采用JavaScript語言編寫，負(fù)責(zé)編譯用戶界面及與服務(wù)器之間的交互。Ajax引擎允許用戶與應(yīng)用軟件之間的交互過程異步進(jìn)行，獨立于用戶與網(wǎng)絡(luò)服務(wù)器間的交流。用JavaScript調(diào)用Ajax引擎來代替產(chǎn)生一個HTTP的用戶動作，如內(nèi)存中的數(shù)據(jù)編輯、頁面導(dǎo)航、數(shù)據(jù)校驗等無需重新載入整個頁面的請求，可由Ajax引擎來執(zhí)行[1], [17]。基于Ajax引擎的Web應(yīng)用體系結(jié)構(gòu)模型如圖1所示。

　　3 Ajax的優(yōu)點3.1 減輕服務(wù)器和網(wǎng)絡(luò)的負(fù)擔(dān)

　　Ajax的原則是“按需獲取數(shù)據(jù)”，可最大程度地減少冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)。把以前一些服務(wù)器承擔(dān)的工作轉(zhuǎn)到客戶端，利用客戶端閑置的能力進(jìn)行處理，從而減輕服務(wù)器和網(wǎng)絡(luò)的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。

　　3.2 無刷新更新頁面，減少用戶實際和心理等待時間

　　首先，“按需獲取數(shù)據(jù)”的理念減少了數(shù)據(jù)的實際讀取量。

　　其次，DOM 的使用不像傳統(tǒng)刷新那樣出現(xiàn)白屏的情況，而是在讀取數(shù)據(jù)的過程中顯示的是原來的頁面狀態(tài)，只有當(dāng)接收到全部數(shù)據(jù)后才更新相應(yīng)部分的內(nèi)容，而這種更新也是瞬間的，用戶幾乎感覺不到, 提高了可用性，提高了用戶體驗。這種無刷新更新頁面的功能，減少用戶實際和心理等待時間。

　　3.3 基于現(xiàn)有公開的標(biāo)準(zhǔn)化

　　Ajax技術(shù)標(biāo)準(zhǔn)公開，跨瀏覽器和跨平臺，并且不需要插件或下載小程序。

　　3.4 實現(xiàn)數(shù)據(jù)聚合

　　Ajax可以調(diào)用外部數(shù)據(jù)，實現(xiàn)數(shù)據(jù)聚合的功能。比如微軟發(fā)布的在線RSS 閱讀器；用戶還可以利用一些開放的數(shù)據(jù)，開發(fā)自已的應(yīng)用程序，例如可用GOOGLE的地圖數(shù)據(jù)做一些新穎的專題地圖網(wǎng)絡(luò)應(yīng)用。

　　3.5 界面與應(yīng)用分離，數(shù)據(jù)與呈現(xiàn)分離

　　Ajax 在整個Web 服務(wù)系統(tǒng)中的位置決定了Ajax 引擎只要從服務(wù)端獲取XML 或者其他格式的數(shù)據(jù)，便可定制整個Web 界面，從而可以使用服務(wù)端只注重數(shù)據(jù)邏輯處理而不必關(guān)心Web 界面的呈現(xiàn)，將數(shù)據(jù)呈現(xiàn)的工作交給Ajax 引擎來做，這樣有利于分工合作、減少非技術(shù)人員對頁面的修改造成的Web應(yīng)用程序錯誤，提高了效率，也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。

　　3.6 有大廠商的支持

　　AJAX被IT大廠商包括Google、yahoo、Amazon和微軟大量采用并廣泛應(yīng)用到實際的項目開發(fā)中，證明了市場的歡迎程度和該技術(shù)的正確性。

　　4 Ajax在WebGIS中的應(yīng)用4.1 通用AJAX開發(fā)框架

　　AJAX遵循Request/Response模式，這個框架的基本流程為：對象初始化－＞發(fā)送請求－＞服務(wù)器接收－＞服務(wù)器返回－＞客戶端接收－＞修改客戶端頁面內(nèi)容，這個過程是異步進(jìn)行的。

　　(1) 初始化對象并發(fā)出XMLHttpRequest請求。

　　為了讓Javascript可以向服務(wù)器發(fā)送HTTP請求，必須使用XMLHttpRequest對象。各個瀏覽器對這個實例化過程的實現(xiàn)方式不同。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) 指定響應(yīng)處理函數(shù)

　　指定當(dāng)服務(wù)器返回信息時客戶端的處理方式，相應(yīng)的處理函數(shù)名稱賦給XMLHttpRequest對象的onreadystatechange屬性。例如：

　　http_request.onreadystatechange = processRequest;

　　(3) 發(fā)出HTTP請求

　　指定響應(yīng)處理函數(shù)之后，就可以向服務(wù)器發(fā)出HTTP請求。這一步調(diào)用XMLHttpRequest對象的open和send方法。

　　http_request.open(#39;GET#39;, #39;http://www.example.org/some.file#39;, true);

　　http_request.send(null);

　　open的第一個參數(shù)是HTTP請求的方法，為Get、Post或者Head。open的第二個參數(shù)是目標(biāo)URL。open的第三個參數(shù)只是指定在等待服務(wù)器返回信息的時間內(nèi)是否繼續(xù)執(zhí)行下面的代碼。如果為True，則不會繼續(xù)執(zhí)行，直到服務(wù)器返回信息。默認(rèn)為True。

　　(4) 處理服務(wù)器返回的信息

　　首先，它要檢查XMLHttpRequest對象的readyState值，判斷請求的當(dāng)前狀態(tài)。形式如下：

　　if (http_request.readyState == 4) {

　　// 信息已經(jīng)返回，可以開始處理

　　} else {

　　// 信息還沒有返回，等待

　　}

　　服務(wù)器返回信息后，還需要判斷返回的HTTP狀態(tài)碼，確定返回的頁面沒有錯誤。所有的狀態(tài)碼都可以在W3C的官方網(wǎng)站上查到。其中，200代表頁面正常。

　　if (http_request.status == 200) {

　　// 頁面正常，可以開始處理信息

　　} else {

　　// 頁面有問題

　　}

　　XMLHttpRequest對成功返回的信息有兩種處理方式：responseText將傳回的信息當(dāng)字符串使用；responseXML將傳回的信息當(dāng)XML文檔使用，可以用DOM處理。

　　4.2 基于Ajax通用組件的WebGIS開發(fā)框架

　　AJAX一旦大規(guī)模實際應(yīng)用，就會造成眾多問題，如技術(shù)的多樣性、分布耦合的復(fù)雜性、瀏覽器的兼容性、開發(fā)效率低下、開發(fā)進(jìn)度慢、質(zhì)量低和可維護(hù)性差等�；诮M件的AJAX開發(fā)，可以屏蔽技術(shù)的多樣性和復(fù)雜性，集中維護(hù)修改，以一變應(yīng)萬變；采用規(guī)范合理的架構(gòu)，能夠輕易擴(kuò)展兼容各種平臺后臺語言和瀏覽器，從而才可能真正大規(guī)模在項目中實際應(yīng)用。

　　下面以Visual Studio 2005和C#為例，介紹組件Ajax.NET在MapXtreme.NET2005中的應(yīng)用開發(fā)。

　　(1) 下載最新版Ajax.NET，在工程項目中添加引用，并修改配置文件web.config。

　　[...]

　　(2) 以下是將地圖居中的C#代碼，函數(shù)返回一個指向緩存地圖的URL地址，公開給客戶端調(diào)用的后臺C#函數(shù)需要添加AjaxMethod屬性標(biāo)記。

　　[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);

　　//轉(zhuǎn)換成地圖坐標(biāo)點

　　myMap.DisplayTransform.FromDisplay(sP,out mP);

　　myMap.SetView(mP, myCoordSys, myMap.Zoom);

　　//以流式輸出，并在服務(wù)器端緩存

　　return exportToStream(myMap);

　　}

　　(3) 為了后臺C#方法能夠被客戶端JavaScript調(diào)用，必須注冊整個類。

　　protected void Page_Load(object sender, EventArgs e)

　　{

　　AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));

　　}

　　(4) 編寫回調(diào)JavaScript腳本，將當(dāng)前地圖用新圖代替。

　　function doReCenter_callback(newImageUrl)

　　{

　　var myMapImg = document.getElementById(#39;MapControl1 _Image#39;);

　　myMapImg.src = newImageUrl.value;

　　}

　　(5)最后，在客戶端使用JavaScript來生成一張新地圖，可通過自定義工具或直接修改資源文件JavaScript代碼實現(xiàn)。

　　doCenterTool(event.x, event.y, doReCenter_callback);

　　4.3 在WebGIS內(nèi)部集成Ajax功能

　　隨著相關(guān)技術(shù)的成熟和Ajax的廣泛使用，各大GIS廠商將會把Ajax集成到他們WebGIS平臺內(nèi)部去。

　　Google在2004年初推出Google Maps[2]，融合了全球的空間地圖數(shù)據(jù)以及高分辨率的影像，其中采用了特有Ajax技術(shù)AJAXSLT，ESRI的創(chuàng)始人兼總裁Jack Dangermond評價Google的網(wǎng)絡(luò)GIS作用“正是Google打開了我們的世界，GIS行業(yè)正在趨于繁榮” [12]。Microsoft的Live Local[19]， Yahoo公司的Flash/AJAX[9]等空間信息門戶共同網(wǎng)站也采用了增強(qiáng)用戶體驗的AJAX技術(shù)，該技術(shù)良好的RWA(Rich Web Application)特性給普通大眾用戶使用GIS無疑帶來了很大的福音。

　　ESRI正在開發(fā)ArcGIS 9.2，在ArcGIS Server和ArcIMS的應(yīng)用開發(fā)框架（ADF）將包括了一個AJAX可用應(yīng)用和豐富的開發(fā)API[12]；MapInfo在將要發(fā)布的MapXtreme2006組件中也將會集成Ajax技術(shù)，可以讓用戶建立高性能互操作地圖應(yīng)用，包括無縫和動態(tài)的移動、放大、縮小、以及地圖提示等功能，以提高網(wǎng)絡(luò)應(yīng)用的可用性和響應(yīng)速度[11]。

　　5 小結(jié)

　　AJAX因具有獨特的優(yōu)勢，迅速成為Web研究熱點，并在實際開發(fā)得到廣泛應(yīng)用。本文分析了Ajax的原理和體系結(jié)構(gòu)，提出了WebGIS中Ajax的三種開發(fā)模式，為WebGIS的開發(fā)提供了很好的指導(dǎo)。Ajax界面是WebGIS應(yīng)用的主要的組成，Ajax 的應(yīng)用將會越來越廣，以至于會改變WebGIS的基礎(chǔ)交互模式, 為WebGIS的大眾化應(yīng)用提供了極其重要的技術(shù)保證。

　　參考文獻(xiàn)

　　[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