當前位置:文思屋>社會工作>電腦培訓>

Ajax技術及其在WebGIS中的應用的教程

文思屋 人氣:1.62W

摘 要 本文首先介紹了Ajax的出現背景,然後分析了AJAX引擎的原理和各個組成部分,接著討論了Ajax在WebGIS中的應用,總結出三種開發模式,並給出了用在2004平臺上開發webgis的關鍵原始碼。

Ajax技術及其在WebGIS中的應用的教程

關鍵詞 WebGIS; Ajax; XMLHttpRequest; Web Application;

當前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 (ttpRequest) { // Mozilla, Safari, ...

http_request = new XMLHttpRequest();

}

else if (veXObject) { // IE

http_request = new ActiveXObject("TTP");

}

(2) 指定響應處理函式

指定當伺服器返回資訊時客戶端的處理方式,相應的處理函式名稱賦給XMLHttpRequest物件的onreadystatechange屬性。例如:

http_adystatechange = processRequest;

(3) 發出HTTP請求

指定響應處理函式之後,就可以向伺服器發出HTTP請求。這一步呼叫XMLHttpRequest物件的open和send方法。

http_(#39;GET#39;, #39;#39;, true);

http_(null);

open的第一個引數是HTTP請求的方法,為Get、Post或者Head。open的第二個引數是目標URL。open的第三個引數只是指定在等待伺服器返回資訊的時間內是否繼續執行下面的程式碼。如果為True,則不會繼續執行,直到伺服器返回資訊。預設為True。

(4) 處理伺服器返回的資訊

首先,它要檢查XMLHttpRequest物件的readyState值,判斷請求的當前狀態。形式如下:

if (http_yState == 4) {

// 資訊已經返回,可以開始處理

} else {

// 資訊還沒有返回,等待

}

伺服器返回資訊後,還需要判斷返回的HTTP狀態碼,確定返回的頁面沒有錯誤。所有的狀態碼都可以在W3C的官方網站上查到。其中,200代表頁面正常。

if (http_us == 200) {

// 頁面正常,可以開始處理資訊

} else {

// 頁面有問題

}

XMLHttpRequest對成功返回的資訊有兩種處理方式:responseText將傳回的資訊當字串使用;responseXML將傳回的資訊當XML文件使用,可以用DOM處理。

4.2 基於Ajax通用元件的WebGIS開發框架

AJAX一旦大規模實際應用,就會造成眾多問題,如技術的多樣性、分佈耦合的複雜性、瀏覽器的相容性、開發效率低下、開發進度慢、質量低和可維護性差等。基於元件的AJAX開發,可以遮蔽技術的多樣性和複雜性,集中維護修改,以一變應萬變;採用規範合理的架構,能夠輕易擴充套件相容各種平臺後臺語言和瀏覽器,從而才可能真正大規模在專案中實際應用。

下面以Visual Studio 2005和C#為例,介紹元件在2005中的應用開發。

(1) 下載最新版,在工程專案中新增引用,並修改配置檔案ig。

[...]

(2) 以下是將地圖居中的C#程式碼,函式返回一個指向快取地圖的URL地址,公開給客戶端呼叫的後臺C#函式需要新增AjaxMethod屬性標記。

[Method(Write )]

public string doCenterTool(double x, double y)

{

// 在使用Pooling後重新生成

RestoreState();

myMap = null;

myMap = actory[0];

dSys myCoordSys = DisplayCoordSys();

t sP = new t (t16(x),t16(y));

DPoint mP = new DPoint(x,y);

//轉換成地圖座標點

Display(sP,out mP);

iew(mP, myCoordSys, );

//以流式輸出,並在伺服器端快取

return exportToStream(myMap);

}

(3) 為了後臺C#方法能夠被客戶端JavaScript呼叫,必須註冊整個類。

protected void Page_Load(object sender, EventArgs e)

{

sterTypeForAjax(typeof(_Default));

}

(4) 編寫回調JavaScript指令碼,將當前地圖用新圖代替。

function doReCenter_callback(newImageUrl)

{

var myMapImg = lementById(#39;MapControl1 _Image#39;);

= e;

}

(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 February 18, 2005

[2]

[3]

[4]

[5]

[6]

[8]

[9]

[10]

[11]

[12]

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