Ajax支持的Google地图 MASHUP教程_H5之家 - 中国HTML5教程资源分享第一站

Ajax支持的Google地图 MASHUP教程 2008-08-07 13:01:06

分类： Linux

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 属性：

My Link

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);
}

function ajaxCallback() {
// check if response is complete, then do stuff
}

　　我先讨论在mashup 应用程序中使用到的 XMLHttpRequest 功能的一个主要限制，然后才能讨论该功能。

　　为了保护用户免受恶意代码编写者的攻击，所有浏览器都实现了一个安全功能。Same Origin Policy 防止XMLHttpRequest以返回页面的服务器所在的网络域之外的服务器为目标发送请求。例如，如果用户浏览，该页面上的 JavaScript. 代码则不能将XMLHttpRequest 到。虽然该安全功能能够保护用户，但是它限制了 JavaScript. ?客户端程序在mashup 应用程序中的作用，mashup 应用程序需要使用来自多个域的服务。然而，两种资源类型不受这一策略的限制：页面可以跨域下载图片和脚本。通过JavaScript. 将参数追加到这些资源请求中，一些实现解决了这一限制。

　　有关 Ajax 和 XMLHttpRequest 的更多信息，请参阅 Ajax简介(Dev2Dev中文版，2005)。

　　轻量级服务

　　调用远程服务的功能是企业分布式架构的基础，例如面向服务的架构(Service Oriented Architecture ，SOA)。Web 服务技术(例如 SOAP)被广泛应用于创建企业内的可重用服务。这些实现效果很好，但是在一些情况下SOAP 未免有些大材小用。特别在客户端是浏览器时，需要一个轻量级的解决方案。

　　一种构建称为 REST 的轻量级服务的方法开始流行，在Web 2.0 应用程序中这种方法应用得尤为普遍。 REST 提供了一种构建 HTTP 可寻址服务的干净模型，从浏览器可以很容易地调用该服务。对于REST 的完整学术定义不适合本教程，我总结了几个要点：

　　REST 服务表示为一个URL，通过基本的 HTTP 请求访问，例如ttp://bea.com/content/getArticles?author=joe。

　　HTTP 动词很重要： GET 是读操作， POST 是创建，PUT 更新服务。

　　返回的有效负载通常是XML 或 JSON。

　　将 REST 的含义解释得更清楚可将会引起争议，因此以上概括已经足够。

　　还需要进一步解释最后一个要点。以上列出了两种流行格式作为返回的有效负载：XML 和 JSON 。似乎可以选择 XML，它在全世界应用广泛。而 REST 服务可以返回XML，客户端 JavaScript. 代码需要遍历返回的 XML 的DOM ，来提取所需信息。这当然可以，但是对于浏览器中的客户端程序是JavaScript. 的情况来说，还可以选择另一种格式。JavaScript. 对象标志(JavaScript. Object Notation ，JSON)是一种 JavaScript. 对象序列化格式，它减少了客户端的工作。客户端可以通过调用将返回的JSON 文本反序列化成一个本机 JavaScript. 对象，然后可以使用JavaScript. 语法操纵JavaScript. 对象。这通常是个简单的方法，因此对于 Web 2.0 应用程序使用的 REST 服务来说，JSON 很流行。

下面是一个序列化格式的 JSON 对象示例：