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