Ajax支持的Google地图 MASHUP教程

Web 开发的新纪元达到了顶峰，这一阶段称为 Web 2.0。这一时期迎来了新一批原型化Web 应用程序，包括blog、wiki和mashup。 Mashup是本教程论述的重点，您将了解到如何使用一组通用技术构建一个示例 mashup 。这组技术包括 JavaScript、Ajax、REST、JSON 和Google地图API。 作为 Web 开发人员，了解如何结合使用这些工具很重要。在本教程中，我将使用这些工具轻松构建终极的 Hello World mashup：一个Google地图mashup。
　　简介

　　所谓Mashup，就是在将一些数据源和服务组合到一起创建一种新功能或以某种方式添加新值的时候创建的。本教程将介绍如何创建一个Google地图mashup —— 将 Google 地图提供的地图数据与您自己创建的方位数据服务相结合。

　　本教程分为三部分：

　　Web 2.0工具箱

　　从一个REST 数据服务检索方位

　　用 Google 地图标绘地址

　　Web 2.0 工具箱

　　Web 开发人员很清楚技术总是在不断地进步，技能在几年之内就会变得过时。我对此并无异议：创新使得 Web 开发变得有趣。新主张、新工具和新技术让我们能够在更短的时间内构建更出色的系统。本节将介绍一些您可能用过也可能没有用过的技术。如果这些对于您来说是新技术，可以将本小节的内容看作快速入门，在此之后，我鼓励您继续深入学习。下文所述内容并不完整，在某些方面过于简略，这样做是为了传达重要的概念。

　　虽然我要讨论多种技术，但是本教程也需要从头说起。我假定您熟悉以下概念和Web 技术：

　　HTML

　　XML

　　浏览器和 Web 服务器的角色

　　HTTP 请求/响应模型

　　现代编程语言，例如Java、JavaScript、PHP 和 C#

　　客户端编程

　　Web 2.0 应用程序的特征是高度的交互性——它像传统桌面应用程序那样进行响应。传统 Web 应用程序一成不变的外观和刷新整个页面的长时间中断都无法满足这一期望。 因此，Web 2.0 应用程序利用了客户端编程技术来帮助应用程序获得更快的响应速度。两种最流行的客户端技术是 JavaScript 和 Adobe Flex。 这两种技术都具备令人叹服的特性，在应用上都取得了巨大的成功。然而，为了缩小本教程的讨论范围，在构建 mashup 的时候，我仅考虑JavaScript 方法。

　　JavaScript 技术成熟。它是一种强大的客户端编程语言，已经流行数年。随着标准的不断改进，跨浏览器支持显著进步，使得它成为一种可行的方法。对于那些没有接触过这门语言的人来说，会发现它的基本代码构造和其他主流语言(例如 Java)类似。

　　JavaScript包含一种功能强大的事件机制，使得 JavaScript 能够响应浏览器中的用户交互。我将使用事件响应功能来构建下文的mashup。学习HTML的人已经见过以事件的形式表现的JavaScript 事件响应机制，例如下面代码中的 onclick 属性：

<onclick="javascript:myEventHandler(); return true"
href="myURL.html">My Link</a>


JavaScript 在浏览器中执行时的另一个重要功能就是能够操纵 HTML 文档对象模型(HTML Document Object Model，DOM)。该功能允许 JavaScript 代码在 HTML 页面加载后以编程方式改变页面内容。DOM 操纵是提高Web 2.0 应用程序交互性时使用的重要功能。在 Web 应用程序中，重置 HTML 中一个元素所包含的文本很常见，例如：



// find the tag with id 'greet_div'
var div = document.getElementById('greet_div');
div.innerHTML = 'Hello ' + name;



　　最后，还需提到的JavaScript 功能就是向后端服务器发出带外 HTTP 请求。通过此功能， JavaScript 可以发出不会导致页面重载或改变浏览器地址栏的请求。该功能通常被称为Ajax，但是实现该功能的实际上是XMLHttpRequest，它是调用 HTTP 请求的JavaScript 类。HTTP 请求通常是异步的，这要求编程人员定义一个回调函数，在接收响应时调用。

　　

var request = new XMLHttpRequest();
function invokeAjax() {
request.open("GET", 'ajaxTarget.html', true);
request.onreadystatechange = ajaxCallback;
request.send(null);
}