基于Google Maps与Ajax在Java Web应用程序中集成地图信息（上）(3)

http://tech.51cto.com 2006-12-26 14:37 朱先忠编译 51CTO.com 我要评论(0)

摘要：在本文中，我们将讨论如何在你的Java Web应用程序中加入动态的交互式地图功能—以Google Maps API实现web接口，以Ajax提供与服务器端的实时交互。本小系列（上、下篇）意在对Google Maps和Ajax这两个框架作快速入门性介绍，使你能够快速而容易地创建自己的交互式地图程序。
标签：Google Maps Ajax

五、AJAX简介

Ajax是Google Maps所依赖的背后技术。它也是我们在一个动态的web应用程序扩展和集成我们的Google Map所使用的技术。Ajax代表“异步JavaScript和XML”。从根本上来看，Ajax是一种技术；它支持使用JavaScript代码把一个请求发送到一个服务器端，检索一些响应数据(通常以XML格式，相应于Ajax中的“X”)，处理该数据，并相应地更新web页面。其中的第一个“A”代表“异步”；Ajax请求能够在后台向服务器发送一个请求而不会中断用户的当作操作。当结果到达客户端浏览器时，调用一个回调函数来处理该数据并动态地更新屏幕。在每一次更新过程中，不必重载整个屏幕，从而实现了一种更为平滑和更快速的用户体验。

Ajax技术的核心体现在XMLHttpRequest类。

<script language="javascript" type="text/javascript">
var req = new XMLHttpRequest();
</script>

事实上，创建一个XMLHttpRequest对象并不是那么简单：这主要存在于长久以来存在于不同浏览器之间的“丑陋”的兼容性问题。简言之，微软Internet Explorer使用两个可能的ActiveXObject对象中的一个，而几乎所有其它的浏览器都使用了XMLHttpRequest类。对于这个问题已经存在许多现成的解决方案；其中，大多数方案通常包含类似下列的代码行：

<script language="javascript" type="text/javascript">
<script type="text/javascript">
//<![CDATA[
var req = false;
if (window.XMLHttpRequest) {
//在非微软浏览器下创建XMLHttpRequest对象
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//经由MS ActiveX创建XMLHttpRequest
try {
//试图在新版本的Internet Explorer中创建XMLHttpRequest对象
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
//无法创建要求的ActiveXObject
try {
// Try version supported by older versions
// of Internet Explorer
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
//无法使用ActiveX创建一个XMLHttpRequest
}
}
}
</script>

然而，Google Maps API却通过使用GXmlHttp类提供一种更为方便而安全的浏览器“快捷方式”：

<script language="javascript" type="text/javascript">
var req = GXmlHttp.create();
</script>

你可以使用你的XMLHttpRequest对象从服务器端取回数据。既然Ajax是异步的，那么，你根本不知道何时得到一个响应，并且你的应用程序也不会“悬挂起来”来等待服务器的响应。因此，当你发送请求时，你还要提供一个特殊的回调函数。这个回调函数的主要目的是处理返回的数据。然而，Ajax处理问题的方法决定了它需要预先验证请求的状态以确保它真正正确地收到数据。

下面的代码示例中调用了一个Ajax请求—以XML形式取回地图上所有城市的列表，从而把它们显示在地图上。

<script language="javascript" type="text/javascript">
//创建XMLHttpRequest对象
var request = GXmlHttp.create();
//准备向服务器发出一个异步的HTTP请求
request.open("GET"， "/maps/SiteDirectory?method=
findAllCities"，true);
//返回的数据由这个函数处理
request.onreadystatechange = getCallbackFunction(
request，processCityData);
//发送请求
request.send(null);
</script>

这里大多数的代码都已加入了注释。其中的重点函数是getCallbackFunction()函数。这个函数对请求的状态进行一些检查，并且当接收到一个正确的响应时调用processCityData()函数—此函数包含所有有趣的业务逻辑：

<script language="javascript" type="text/javascript">
function getCallbackFunction(req， processData) {
//返回一个监听XMLHttpRequest实例的匿名函数
return function () {
//如果请求状态为“complete”
if (req.readyState == 4) {
if (req.status == 200) {
//把响应中的XML信息传递给
//处理器函数
processData(req.responseXML);
} else {
//发生一个HTTP问题
alert("HTTP error: "+req.status);
}
}
}
}
function processCityData(xmlDoc) {
//处理返回的XML数据
...
}
</script>