Ajax技术及其在WebGIS中的应用

关键词 WebGIS; Ajax; XMLHttpRequest; Web Application; MapXtreme.net

当前Web服务逐渐渗入到人们的日常生活中，越来越多的人正通过web享受信息化时代带来的各种服务。WebGIS是GIS与Web有机结合的产物，是Internet环境下的一种存储、传输、处理、分析、显示和应用地理空间信息的计算机系统，它将GIS带入到千家万户，使GIS真正成为一种大众使用工具,[18]。

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技术的核心。

XMLHttpRequest是Ajax引擎的核心技术，是Ajax引擎解决无需刷新整个页面即可从服务器获取所需数据问题的关键。在微软IE 平台下XMLHttpRequest 是XMLHTTP 组件的一个对象，它通过允许开发人员在web 页面内部使用XMLHTTP ActiveX 组件扩展自身功能，开发人员不必从当前的Web 页面导航而直接与服务器上的数据库进行双向数据传输。该项功能相当重要，它弥补了无状态连接的缺点，排除下载冗余Web 数据的需要，从而提高了进程速度。

DOM 是给HTML 和XML 文件使用的一组API。它提供了文件的结构表述，允许开发人员改变其中的内容,建立网页与程序语言沟通的桥梁。所有Web 开发人员操作及建立文件的属性、方法及事件都以对象方式来展现，这些对象均可由当今大多数浏览器以脚本取用。一个用HTML 或XHTML 构建的网页可看作是一组结构化数据，这些数据被封在DOM (Document Object Model）中，且DOM 提供对网页中各个对象的读写支持。

JavaScript是一种在浏览器中大量使用的跨平台编程语言，常被用来制作网页特效或表单验证。在Ajax 中JavaScript 则是XMLHttpRequest与DOM 交互的桥梁以及Ajax 引擎工作的主要推动力。JavaScript 通过调用XMLHttpRequest 的属性和方法获取服务器端数据，调用DOM 的API更新Web 页面内容，从而实现整个页面的无刷新更新页面的效果。

图1 Ajax web 应用程序模型

Ajax采用异步交互过程，在用户与服务器之间引入一个中间媒介，从而消除网络交互过程中“处理—等待—处理—等待”的缺点。用户的浏览器在执行任务时即装载了Ajax引擎，通常放在一个隐藏的框架中。Ajax引擎采用JavaScript语言编写，负责编译用户界面及与服务器之间的交互。Ajax引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。用JavaScript调用Ajax引擎来代替产生一个HTTP的用户动作，如内存中的数据编辑、页面导航、数据校验等无需重新载入整个页面的请求，可由Ajax引擎来执行[1], [17]。基于Ajax引擎的Web应用体系结构模型如图1所示。

Ajax的原则是“按需获取数据”，可最大程度地减少冗余请求和响应对服务器造成的负担。把以前一些服务器承担的工作转到客户端，利用客户端闲置的能力进行处理，从而减轻服务器和网络的负担，节约空间和宽带租用成本。

首先，“按需获取数据”的理念减少了数据的实际读取量。

其次，DOM 的使用不像传统刷新那样出现白屏的情况，而是在读取数据的过程中显示的是原来的页面状态，只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的，用户几乎感觉不到, 提高了可用性，提高了用户体验。这种无刷新更新页面的功能，减少用户实际和心理等待时间。

Ajax技术标准公开，跨浏览器和跨平台，并且不需要插件或下载小程序。

Ajax可以调用外部数据，实现数据聚合的功能。比如微软发布的在线RSS 阅读器；用户还可以利用一些开放的数据，开发自已的应用程序，例如可用GOOGLE的地图数据做一些新颖的专题地图网络应用。

Ajax 在整个Web 服务系统中的位置决定了Ajax 引擎只要从服务端获取XML 或者其他格式的数据，便可定制整个Web 界面，从而可以使用服务端只注重数据逻辑处理而不必关心Web 界面的呈现，将数据呈现的工作交给Ajax 引擎来做，这样有利于分工合作、减少非技术人员对页面的修改造成的Web应用程序错误，提高了效率，也更加适用于现在的发布系统。

AJAX被IT大厂商包括Google、yahoo、Amazon和微软大量采用并广泛应用到实际的项目开发中，证明了市场的欢迎程度和该技术的正确性。

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(‘GET‘, ‘http://www.example.org/some.file‘, true);

http_request.send(null);

　open的第一个参数是HTTP请求的方法，为Get、Post或者Head。open的第二个参数是目标URL。open的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。