<dfn id="w48us"></dfn><ul id="w48us"></ul>
  • <ul id="w48us"></ul>
  • <del id="w48us"></del>
    <ul id="w48us"></ul>
  • Ajax技術(shù)及其在WebGIS中的應(yīng)用的教程

    時(shí)間:2024-06-12 06:45:20 AJAX 我要投稿
    • 相關(guān)推薦

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

      摘 要 本文首先介紹了Ajax的出現(xiàn)背景,然后分析了AJAX引擎的原理和各個(gè)組成部分,接著討論了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享受信息化時(shí)代帶來的各種服務(wù)。WebGIS是GIS與Web有機(jī)結(jié)合的產(chǎn)物,是Internet環(huán)境下的一種存儲、傳輸、處理、分析、顯示和應(yīng)用地理空間信息的計(jì)算機(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實(shí)現(xiàn)動(dòng)態(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)用提供了一個(gè)很好的解決方案。其中XMLHttpRequest、JavaScript和DOM是Ajax技術(shù)的核心。

      1.1 XMLHttpRequest

      XMLHttpRequest是Ajax引擎的核心技術(shù),是Ajax引擎解決無需刷新整個(gè)頁面即可從服務(wù)器獲取所需數(shù)據(jù)問題的關(guān)鍵。在微軟IE 平臺下XMLHttpRequest 是XMLHTTP 組件的一個(gè)對象,它通過允許開發(fā)人員在web 頁面內(nèi)部使用XMLHTTP ActiveX 組件擴(kuò)展自身功能,開發(fā)人員不必從當(dāng)前的Web 頁面導(dǎo)航而直接與服務(wù)器上的數(shù)據(jù)庫進(jìn)行雙向數(shù)據(jù)傳輸。該項(xiàng)功能相當(dāng)重要,它彌補(bǔ)了無狀態(tài)連接的缺點(diǎn),排除下載冗余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ù)瀏覽器以腳本取用。一個(gè)用HTML 或XHTML 構(gòu)建的網(wǎng)頁可看作是一組結(jié)構(gòu)化數(shù)據(jù),這些數(shù)據(jù)被封在DOM (Document Object Model)中,且DOM 提供對網(wǎng)頁中各個(gè)對象的讀寫支持。

      1.3 JavaScript

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

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

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

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

      3 Ajax的優(yōu)點(diǎn)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í)際和心理等待時(shí)間

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

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

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

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

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

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

      3.6 有大廠商的支持

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

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

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

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

      為了讓Javascript可以向服務(wù)器發(fā)送HTTP請求,必須使用XMLHttpRequest對象。各個(gè)瀏覽器對這個(gè)實(shí)例化過程的實(shí)現(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ù)器返回信息時(shí)客戶端的處理方式,相應(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的第一個(gè)參數(shù)是HTTP請求的方法,為Get、Post或者Head。open的第二個(gè)參數(shù)是目標(biāo)URL。open的第三個(gè)參數(shù)只是指定在等待服務(wù)器返回信息的時(shí)間內(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)碼,確定返回的頁面沒有錯(cuò)誤。所有的狀態(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ī)模實(shí)際應(yīng)用,就會造成眾多問題,如技術(shù)的多樣性、分布耦合的復(fù)雜性、瀏覽器的兼容性、開發(fā)效率低下、開發(fā)進(jìn)度慢、質(zhì)量低和可維護(hù)性差等。基于組件的AJAX開發(fā),可以屏蔽技術(shù)的多樣性和復(fù)雜性,集中維護(hù)修改,以一變應(yīng)萬變;采用規(guī)范合理的架構(gòu),能夠輕易擴(kuò)展兼容各種平臺后臺語言和瀏覽器,從而才可能真正大規(guī)模在項(xiàng)目中實(shí)際應(yīng)用。

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

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

      [...]

      (2) 以下是將地圖居中的C#代碼,函數(shù)返回一個(gè)指向緩存地圖的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)點(diǎn)

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

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

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

      return exportToStream(myMap);

      }

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

      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代碼實(shí)現(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評價(jià)Google的網(wǎng)絡(luò)GIS作用“正是Google打開了我們的世界,GIS行業(yè)正在趨于繁榮” [12]。Microsoft的Live Local[19], Yahoo公司的Flash/AJAX[9]等空間信息門戶共同網(wǎng)站也采用了增強(qiáng)用戶體驗(yàn)的AJAX技術(shù),該技術(shù)良好的RWA(Rich Web Application)特性給普通大眾用戶使用GIS無疑帶來了很大的福音。

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

      5 小結(jié)

      AJAX因具有獨(dú)特的優(yōu)勢,迅速成為Web研究熱點(diǎn),并在實(shí)際開發(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

      [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開發(fā)精要:概念、案例與框架[M]. 北京:電子工業(yè)出版社, 2006

      [18] 孟令奎, 史文中, 張鵬林. 網(wǎng)絡(luò)地理信息系統(tǒng)[M]. 北京: 科學(xué)出版社, 2005

    【Ajax技術(shù)及其在WebGIS中的應(yīng)用的教程】相關(guān)文章:

    關(guān)于VOIP網(wǎng)絡(luò)技術(shù)及其應(yīng)用07-08

    關(guān)于Ajax技術(shù)原理的幾點(diǎn)總結(jié)01-10

    關(guān)于計(jì)算機(jī)的模擬技術(shù)及其應(yīng)用10-11

    油脂在烘焙食品技術(shù)中的應(yīng)用09-15

    WEB教程標(biāo)準(zhǔn)應(yīng)用標(biāo)簽10-19

    CAD技術(shù)在機(jī)械設(shè)計(jì)中的應(yīng)用09-18

    數(shù)字技術(shù)在影視制作中的應(yīng)用04-13

    eda技術(shù)在生活中的應(yīng)用10-30

    特效技術(shù)在動(dòng)畫設(shè)計(jì)中的應(yīng)用10-22

    網(wǎng)絡(luò)技術(shù)在印刷中的應(yīng)用技巧01-21

    主站蜘蛛池模板: 久久这里只有精品首页| 惠民福利中文字幕人妻无码乱精品| 女人香蕉久久**毛片精品| 亚洲日韩国产AV无码无码精品| 久久久久久久99精品免费观看| 三上悠亚久久精品| 麻豆精品三级全部视频| 日韩精品国产自在久久现线拍| 久久综合精品国产二区无码| 免费精品视频在线| 国产成人精品在线观看| 国产成人精品日本亚洲专| 亚洲AV永久精品爱情岛论坛| 久久国产综合精品五月天| 日本一区精品久久久久影院 | 亚洲中文字幕无码久久精品1 | 99久久精品国内| 亚洲av无码国产精品夜色午夜| 久久精品成人免费观看97| 欧美视频精品一区二区三区| 国产精品乱码高清在线观看| 无码精品国产VA在线观看DVD| 日韩精品一区二区三区不卡| 国产精品最新国产精品第十页| 亚洲第一精品福利| 国产精品亚洲专区在线观看| 精品国产乱码久久久久久1区2区| 中文精品久久久久人妻不卡 | 久久国产精品无码HDAV| 亚洲欧洲国产精品香蕉网| 亚洲av无码成人精品区| 久久午夜无码鲁丝片午夜精品| 国产精品一区12p| 2021年精品国产福利在线| 欧美一卡2卡3卡四卡海外精品| 国产精品自拍一区| 91精品国产91久久久久福利| 99久久久国产精品免费无卡顿| 国产在线精品一区二区在线观看| 精品久久无码中文字幕| 国产成人精品无码片区在线观看|