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