Ajax技术在台风信息系统中的应用研究

摘要：台风信息系统是基于WebGIS的台风信息和数据共享的平台，用来加强台风的监测和预报。Ajax是异步JavaScript和XML技术的组合，可使用户操作与服务器响应异步化，缩短客户端与服务器端的响应时间。文中介绍了Ajax技术在基于WebGIS的台风信息系统中的应用，研究了如何在系统客户端应用Ajax技术，使系统具有更好的交互性。

关键词：Ajax；JavaScript；WebGIS；台风信息系统；交互性

中图分类号：TP311文献标识码：A文章编号：1009-3044(2011)04-0735-03

The Study on the Application of Ajax in the Information System of Typhoon

YUAN Yuan

(Wuhan Bioengineering Institute，Wuhan 430415, China)

Abstract: The information system of typhoon is a platform based on WebGIS for the information announcing and data sharing about typhoon, with the purpose of monitering and forcasting typhoon. Ajax is the combination of asynchronous technologies of Java, Script and XML, which enables the asynchronization of the operation of the user and the response of the sever, so as to shorten the responding time between the client and the sever end. This paper introduces the application of Ajax in the information system of typhoon based on WebGIS, and make a study about how to apply the technology of Ajax to the system client, for the purpose of better interaction of the system.

Key words: ajax; JavaScript; WebGIS; the information system of typhoon; interaction

台风是一种破坏力很强的灾害性天气，加强台风的监测和预报，是减轻台风灾害的重要的措施。随着科技的发展，需要以一种高效的手段来管理台风数据。WebGIS是GIS与Internet技术结合的产物，它不但具有GIS的数据管理和空间分析功能，而且具有Internet信息功能和数据共享的特点，这为台风信息的和数据的共享提供了一个很好的平台。

Ajax技术是实现Web2.0的重要技术，它采用数据异步传输和请求机制，使得客户端与服务器之间的数据通信在后台运行，数据请求不打断用户的地图操作或界面动作，从而极大地提高了用户界面的友好程度。那么WebGIS系统应该怎样与Ajax结合，提高响应速度以及海量数据快速处理能力，这都是值得探索的问题。本文探讨了如何在基于WebGIS的台风信息系统中使用Ajax技术以增强系统的交互性。

1 Ajax技术

1.1 Ajax介绍

Ajax全称为“Asynchronous JavaScript and XML”，指一种创建交互式网页应用的网页开发技术，是目前客户端最有效率的技术。Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax不是单一的技术，而是JavaScript、CSS（层叠样式表）、XML、文档对象模型（DOM）、XMLHttpRequest等技术的集合。Ajax以一种崭新的方式来使用所有的这些技术。

在Ajax的这些技术中：

1）JavaScript定义了业务规则和程序流程，用于邦定和处理所有数据。

2）DOM和CSS用来实现动态显示和交互，改变界面的外观。

3）XML作为数据传输的媒介，服务器采用返回XML文本的方式将响应后的数据返回给客户端。

4）XMLHttpRequest是Ajax中最为核心的技术，它负责将用户信息以异步方式发送到服务器，并接收服务器返回的响应信息和数据。应用程序使用XMLHttpRequest对象以后台方式从服务器获得数据。

1.2 Ajax工作原理

传统Web的工作原理是将用户的操作触发提交给Web服务器，服务器接到提交的HTTP请求后执行相应操作，然后将静态HTML页面返回到客户端。简单的说传统Web的工作原理就是“提交请求――执行操作――页面重载”的同步过程，因而容易导致用户在发出请求后，得到返回结果前一直处于等待状态，无法满足用户对系统快速响应的要求。

Ajax与传统Web的不同之处在于服务应答的异步性，Ajax的工作原理相当于在传统Web模型的客户端和服务器端之间加了―个中间层――Ajax引擎，将用户操作与服务器响应异步化，使客户端向服务器发出的部分请求不需要等待返回结果，就可以继续向服务器发出请求。比如：像―些数据验证和数据处理等都交给Ajax引擎自己来做，只有当需要从服务器读取新数据时才由Ajax引擎代为向服务器提交请求。

1.3 Ajax优势

本文设计的台风信息系统采用基于B/S模式的三层架构，与传统的C/S架构相比，服务器的响应速度及网络的传输速度是B/S应用的一个瓶颈，用户不得不等待服务器的响应和页面的刷新。为了解决这些问题，我们在台风信息系统的客户端使用Ajax技术。

使用Ajax技术最突出的优势为：

1）利用客户端闲置的能力来处理原来服务器端做的部分事情，减轻服务器和带宽的负担，最大限度地减少了冗余的请求和响应对服务器造成的负担。

2）在Ajax中客户端和服务器端交换数据是异步的，数据更新只更新有数据改变的那部分页面内容，不会刷新整个页面，实现了无刷新的用户体验。优化了客户端和服务器端间的沟通，减少不必要的数据传输及降低网络上数据流量。

3）使用异步方式与服务器通信，不需要打断用户的操作，是系统具有更好的交互性。

2 Ajax在台风信息系统中的应用

2.1 台风信息系统功能分析

台风信息系统主要实现台风信息/路径历史查询、台风信息预报/路线拟合等功能，并将台风实况与预测路径显示于地理底图中，可视化表达数值信息，通过台风实况与预测路径、风圈半径与地理底图的叠加，对台风影响地区进行消息警报，为气象部门提供精细化气象预报。系统客户端部分主要采用JavaScript、Ajax等技术实现，系统的服务器部分主要使用ArcGIS Server、IIS和Web应用开发框架实现。JavaScript的主要作用是处理页面数据，把服务器返回的数据结果在地图上显示。同时负责把客户端的请求转发给Ajax，并对Ajax返回的数据进行处理，在客户端显示。Ajax在客户端以异步模式提交客户端请求，并把服务器返回的结果交由JavaScript函数处理，实现局部刷新。

基于Ajax的客户端主要提供GIS数据表示和信息可视化功能，形象的展示客户的请求及反馈的应答。客户端的功能有：地图放大、缩小、地图漫游等基本操作；台风路径查询；台风信息显示；地图上任意两地间的距离测量。

2.2 台风信息系统的实现

本系统采用Ajax的客户端回调技术实现了查询台风信息，查看台风轨迹点信息，清除测距痕迹，选择城市测距等操作。通过一个.js文件，提取页面值，对客户端的操作作出处理，例如：台风路径选择、清除测距痕迹等，并把它们填充到已生成的页面上，而无需重新生成整个页面。因此不需要进行整个回送循环，就可以修改页面上的值。即在更新页面时，可以不重新绘制整个页面，客户端用户不会看到页面闪烁和重定位。

系统通过ICallbackEventHandler接口的RaiseCallbackEvent和GetCallbackEvent两个方法来处理客户端脚本请求，实现客户端回调。前者从浏览器接受一个字符串作为事件参数，即该方法接受客户端JavaScript传递的参数。后者将所得到的结果传回给客户端的JavaScript，JavaScript再将结果更新到页面。实现的具体步骤如图3所示。

下面以客户端的清除测量痕迹操作为例，介绍具体的实现过程：

首先，添加一个按钮控件，在按钮中添加一个onclick事件，激活一个JavaScript事件。

然后，获取一个对客户端函数的引用；调用该函数时，启动一个对服务器端事件的客户端回调。

function Measure_Clear_Click(evt)

{

context="Measure_Clear";

CallServer();

}

function CallServer()

{………..}

然后，接受响应，执行操作。

void ICallbackEventHandler.RaiseCallbackEvent(string evtArg)

{

. . . . . .//系统功能实现

callbackResult = Map1.CallbackResults.ToString(); //得到返回的结果

}

最后，回传回调结果。

string ICallbackEventHandler.GetCallbackResult()

{

returncallbackResult;

}

3 结束语

本文介绍了Ajax技术在台风信息系统中的应用，系统中主要在部分页面运用Ajax技术实现了客户端回调，页面部分刷新，避免了用户多次查询不同台风预测路径，历史路径时出现的页面“白屏”现象，缩短了用户的等待时间，给用户带来愉悦的体验，降低了冗余请求和响应对服务器造成的负担，减轻了服务器压力，充分体现了Ajax 技术的优点。但是Ajax使用中也存在一些问题需要进一步研究，比如：如果浏览器不支持或者禁用了的JavaScript脚本，Ajax应用将不能正常工作；如果使用Ajax处理大量数据会提高成本，异步数据传输大量数据时也可能会出现延迟情况。

参考文献：

[1] 柯昌正,黄厚宽.AJAX技术的原理与应用[J].铁路计算机应用,2007,16(1):27-29.

[2] Asleson R,Schutta N T.AJAX基础教程[M].金灵,译.北京:人民邮电出版社,2006.

[3] 唐群,谢小魁.Ajax与WebGIS的集成研究[J].测绘与空间地理信息,2009,32(6):93-95.

[4] 谭力,杨宗源,谢瑾奎.Ajax技术的数据响应优化[J].计算机工程,2010,36(7):52-54.

[5] 怀艾芹.AJAX技术在Web系统开发中的研究及应用[J].计算机时代,2010(9):52-57.

[6] 杨名念.Ajax技术在机房排课系统中的应用[J].电脑知识与技术,2009,5(19):5193-5195.

[7] 刘刚, 邓飞其, 杨长海.AJAX在WebGIS异步数据交互中的研究[J].计算机技术与发展,2009,19(1):53-55.

[8] 马绮丽.Ajax技术原理及应用[J].计算机光盘软件与应用,2010(10):69-70.