zt AJAX支持的 GOOGLE 地图 MASHUP 教程

handy — Tue, 14 Aug 2007 09:06:00 +0800

作者: handy 链接：http://handy.javaeye.com/blog/112022 发表时间: 2007年08月14日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

AJAX支持的 GOOGLE 地图 MASHUP 教程

时间：2007-06-12
作者：Peter Laird
浏览次数：
本文关键字：google, mashups, ajax, json, javascript, web 2.0, Dev Toolbox, Web Services, WebLogic Server, Peter Laird, Web服务

　　编辑注：本教程是 Dev2Dev TechDays 2007的附赠品，Dev2Dev TechDays 2007今年的主题是“构建企业Mashup”。这次研讨会的议题是如何在企业内部有效地使用mashup，会上详细讨论了本教程阐述的技术。在世界各地都举办了此次研讨会，查看 TechDays Web站点，了解在您附近的城市何时会举办此次研讨会。

摘要

　　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 地图标绘地址

　　第一部分介绍了我在第二部分和第三部分构建 mashup 时所用的技术。如果想提前浏览我制作的 demo，请浏览Web上托管的演示。

　　让我们开始吧！

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

　　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以返回页面的服务器所在的网络域之外的服务器为目标发送请求。例如，如果用户浏览 http://www.bea.com/ajaxPage.html，该页面上的 JavaScript 代码则不能将XMLHttpRequest 到 http://www.evil.com/stealCookies.html。虽然该安全功能能够保护用户，但是它限制了 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 请求访问，例如http://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 对象示例：

{"location":    
        {"id":  "WashingtonDC",                 
         "city": "Washington DC",                       
         "venue": "Hilton Hotel, Tysons Corner",
         "address": "7920 Jones Branch Drive"
        }
}

　　有关JSON的详细描述，请参见 JSON简介（Dev2Dev中文版， 2007）。

Google 地图 API

　　Google地图和 Yahoo!地图（我们不会进一步讨论Yahoo!）均创建了可公开访问的JavaScript API，用于免费将地图嵌入随机的Web 站点。这形成了小规模的mashup Web 应用程序集，它们使用这些API来标绘地理位置，从芝加哥的犯罪地点到全世界的AP 新闻发生地。这种流行的模式是查询针对一组地址的服务，然后使用Google Map API映射这些地址，这也是我构建mashup所使用的方法。您会看到，这种实现方法简单直白，但是有两件事需要注意。

　　首先，浏览器的跨域安全功能似乎不利于用JavaScript 在浏览器中实现Google 地图 mashup。这是由于用户必须导航到托管REST 服务的网络域，该服务会生成一个地址列表。在该网络域中，将不允许浏览器请求http://maps.google.com 。Google 在其JavaScript 库中实现了一种解决方案，重载对于google.com 脚本的资源请求，以便将数据注入到浏览器中。

　　第二件事不是技术问题，而是商业问题。Google 拥有映射数据和API ，保留定义服务条款的权利，Google 限制每个Web 站点的免费服务为每天50,000 请求。如果这是个问题，那么付费服务是没有限制的。为了实施这种使用策略，每个Web 站点都有一个惟一的API密钥，必须将其配置为可追踪站点的使用情况。获得该密钥是免费的，而且简单容易，然后在HTML 页面的脚本源块中可以对它进行配置，如下所示（为简洁起见，截断了密钥）：

标记之间所包含的 JavaScript 加载简单的 Web 页面。清单 1 可以显示 Hello, World 文本：

清单 1. Hello, world

    

alert('Hello, World.')

要运行此代码，只需创建一个名为 example1.html 的文件。将清单 1 的代码复制到该文件内，并在浏览器中加载此文件（参看下载部分以获得本文使用的所有示例 HTML 文件）。注意到每次重载此页面时，该代码都会立即执行。

alert 是个函数调用，只有一个字符串作为参数。图 1 显示了由清单 1 中的代码弹出的警告框，显示文本 “Hello, World”。如果代码在 HTML body 之内（目前并未指定任何 body，但浏览器能接受不规则的 HTML，并且整个页面都默然作为一个 body 被处理）。页面一旦加载，JavaScript 就会立即执行。

图 1. Hello, world

如果要延迟执行，可以在 HTML 元素声明 JavaScript 函数，如清单 2 所示：

清单 2. 延迟执行

js 代码
  
    

    
    
        function hello() {
            alert('Hello, World.')
        }
    


    Say Hello

将清单 2 中的代码输入到一个 HTML 文件，在浏览器内加载该文件，单击 Say Hello 按钮，结果如图 2 所示：

图 2. 延迟执行

回页首

高阶函数

从清单 2，可以大致体会到一些 JavaScript 在操纵函数方面的能力。将函数名称传递给 HTML button 标记并利用 HTML 的内置事件模型。使用 JavaScript 时，我会经常在变量或数组中存储函数（在本文后面的对象模型一节，您会看到 JavaScript 对象模型策略大量使用了此技巧）。例如，查看一下清单 3：

清单 3. 用变量操纵函数

    

    
    
        hot = function hot() {
            alert('Sweat.')
        }
        cold  = function cold() {
            alert('Shiver.')
        }
        
        function swap() {
            temp = hot
            hot = cold
            cold = temp    
            alert('Swapped.')
        }
    


    Hot
    Cold
    Swap

函数是 JavaScript 中的一类对象，可以自由地操纵它们。首先我声明两个函数：hot 和 cold。并分别在不同的变量存储它们。单击 Hot 或 Cold 按钮会调用对应的函数，生成一个告警。接下来，声明另一个函数用来交换 Hot 和 Cold 按钮的值，将此函数与第三个按钮关联，该按钮显示如图 3 所示的告警：

图 3. 操纵函数

这个例子说明可以像处理其他变量一样处理函数。C 开发人员很容易将此概念看作是函数指针 功能，但 JavaScript 的高阶函数的功能更为强大。该特性让 JavaScript 程序员能够像处理其他变量类型一样轻松处理动作或函数。

将函数用作函数的参数，或将函数作为值返回，这些概念属于高阶函数的领域。清单 4 对清单 3 做了一点点修改，显示了能返回函数的高阶函数：

清单 4. 高阶函数

    


    

        function temperature() {
            return current
        }

        hot = function hot() {
            alert('Hot.')
        }

        cold  = function cold() {
            alert('Cold.')
        }

        current = hot

        function swap() {
            if(current == hot) {
              current = cold
            } else {
              current = hot
            }
        }
    


    Temperature
    Swap

这个例子解决了一个常见问题：如何将更改中的行为附加到用户接口事件？通过高阶函数，这很容易做到。temperature 高阶函数返回 current 的值，而 current 又可以有 hot 或 cold 函数。看一下这个有些陈旧的函数调用：temperature()()。第一组括号用于调用 temperature 函数。第二组括号调用由 temperature 返回的函数。图 4 显示了输出：

图 4. 高阶函数

高阶函数是函数式编程的基础，对比面向对象编程，函数式编程代表了更高级别的抽象。但 JavaScript 的实力并不仅限于高阶函数。JavaScript 的动态类型就极为适合 UI 开发。

回页首

动态类型

通过静态类型，编译器可以检查参数和变量的值或针对一个给定操作所允许的返回值。其优势是编译器可以做额外的错误检查。而且静态类型还可以为诸如 IDE 这样的工具提供更多信息，带来其他一些特性，比如更好的代码完成功能。但静态类型也存在着如下一些劣势：

必须提前声明意图，这常常会导致灵活性降低。例如，更改一个 Java 类就会更改类的类型，因而必须重新编译。对比之下，Ruby 允许开放的类，但更改一个 Java 类还是会更改类的类型。
要实现相同的功能，必须输入更多的代码。例如，必须用参数形式包括进类型信息，必须用函数形式返回值和所有变量的类型。另外，还必须声明所有变量并显式地转化类型。
静态语言的编译-部署周期要比动态语言的部署周期长，尽管一些工具可被用来在某种程度上缓解这一问题。

静态类型更适合用于构建中间件或操作系统的语言中。UI 开发常常需要更高的效率和灵活性，所以更适合采用动态类型。我深知这种做法存在危险。相信使用过 JavaScript 的 Web 开发人员都曾经为编译器本应检测到的错误类型的变量而绞尽脑汁。但它所带来的优势同样不可否认。下面将举例加以说明。

首先，考虑一个对象的情况。在清单 5 中，创建一个新对象，并访问一个不存在的属性，名为 color：

清单 5. 引入一个属性

    

    blank_object = new Object();
    blank_object.color = 'blue'
    alert('The color is ' + blank_object.color)

当加载并执行此应用程序时，会得到如图 5 所示的结果：

图 5. 引入属性

JavaScript 并不会报告 blue 属性不存在的错误。静态类型的拥护者大都会被本例所吓倒，因为本例中的错误被很好地隐匿了。虽然这种做法多少会让您感觉有些不正当，但您也不能否认它巨大的诱惑力。您可以很快引入属性。如果将本例和本文之前的例子结合起来，还可以引入行为。记住，变量可以保存函数！所以，基于动态类型和高阶函数，您可以在任何时候向类中引入任意的行为。

可以轻松地重写清单 5，使其如清单 6 所示：

清单 6. 引入行为

    

    blank_object = new Object();
    blank_object.color = function() { return 'blue'}
    alert('The color is ' + blank_object.color())

从上例可以看出，在 JavaScript 的不同概念之间可以如此轻松地来回变换，其含义上的变化很大 —— 比如，是引入行为还是引入数据 —— 但语法上的变化却很小。该语言很好的延展性是它的一种优势，但同样也是其缺点所在。实际上，该语言本身的对象模型就是 JavaScript 延展程度的一种体现。

回页首

对象模型

到目前为止，您应该对 JavaScript 有一个正确的评价了，它绝非只如一个玩具那么简单。事实上，很多人都使用过其对象模型创建过极为复杂、设计良好的面向对象软件。但对象模型尤其是用于继承的对象模型又非您一贯认为的那样。

Java 语言是基于类的。当构建应用程序时，也同时构建了可以作为所有对象的模板的新类。然后调用 new 来实例化该模板，创建一个新对象。而在 JavaScript 中，所创建的是一个原型，此原型是一个实例，可以创建所有未来的对象。

现在先暂且放下这些抽象的概念，去查看一些实际代码。比如，清单 7 创建了一个简单的 Animal，它具有 name 属性和 speak 动作。其他动物会从这个基础继承。

清单 7. 创建一个构造函数

    
        
Animal = function() {
    this.name = "nobody"
    this.speak = function () {
        return "Who am I?"
    }
}

myAnimal = new Animal();
alert('The animal named ' + myAnimal.name + 
      ' says ' + myAnimal.speak());

清单 7 的结果如图 6 所示：

图 6. 创建一个构造函数

对于 Java 开发人员而言，清单 7 中的代码看起来多少有点生疏和奇怪。实际上对于没有亲自构建过对象的许多 JavaScript 开发人员来说，这些代码同样看起来有点生疏和奇怪。也许，下面的解释可以让大家能够更好地理解这段代码。

实际上，您只需重点关注其中三段信息。首先，JavaScript 用嵌套函数表示对象。这意味着清单 7 中的 Animal 的定义是一种有效的语法。第二，JavaScript 基于原型或现有的对象的实例来构造对象，而非基于类模板。funct() 是一种调用，但 new Animal() 却基于 Animal 内的原型构造一个对象。最后，在 JavaScript 中，对象只是函数和变量的集合。每个对象并不与类型相关，所以可以自由地修改这种结构。

回到清单 7。如您所见，JavaScript 基于在 Animal 中指定的原型定义一个新对象：myAnimal。继而可以使用原型中的属性和函数，甚或重定义函数和属性。这种灵活性可能会让 Java 开发人员受不了，因为他们不习惯这种行为，但它的确是一种十分强大的模型。

现在我还要更深入一步。您还可以使用名为 prototype 实例变量来指定对象的基础。方法是设置 prototype 实例变量使其指向继承链的父。如此设置 prototype 之后，您所创建的对象会为未指定的那些对象继承属性和函数。这样一来，您就可以模仿面向对象的继承概念。以清单 8 为例：

清单 8. 通过原型继承

    
        

Animal = function() {
    this.name = "nobody"
    this.speak = function () {
        return "Who am I?"
    }
}
Dog = function() {
  this.speak = function() {
    return "Woof!"
  }
}
Dog.prototype = new Animal();

myAnimal = new Dog();
alert('The animal named ' + myAnimal.name + 
      ' says ' + myAnimal.speak());

在清单 8 中，创建了一个 Dog 原型。此原型基于 Animal。Dog 重定义 speak() 方法但却不会对 name() 方法做任何改动。随后，将原型 Dog 设置成 Animal。图 7 显示了其结果：

图 7. 通过原型继承

这也展示了 JavaScript 是如何解决到属性或方法的引用问题的：

JavaScript 基于原始的原型创建实例，该原型在构造函数中定义。任何对方法或属性的引用都会使用所生成的原始副本。
您可以在对象内像定义其他任何变量一样重新定义这些变量。这样做必然会更改此对象。所以您显式定义的任何属性或函数都将比在原始的原型中定义的那些属性或函数优先级要高。
如果您显式设置了名为 prototype 的实例变量，JavaScript 就会在此实例中寻找任何未定义的实例变量或属性。这种查找是递归的：如果在 prototype 内定义的实例不能找到属性或函数，它就会在其原型中查找，依此类推。

那么，JavaScript 的继承模型到底是什么样的？这取决于您如何对它进行定义。您需要定义继承行为以便可以覆盖它。然而，从本质上讲，JavaScript 更像是一种函数式语言，而非面向对象的语言，它使用一些智能的语法和语义来仿真高度复杂的行为。其对象模型极为灵活、开放和强大，具有全部的反射性。有些人可能会说它太过灵活。而我的忠告则是，按具体作业的需要选择合适的工具。

回页首

结束语

JavaScript 对象模型构建在该语言的其他功能之上来支持大量的库，比如 Dojo（参见参考资料）。这种灵活性让每个框架能够以一种精细的方式更改对象模型。在某种程度上，这种灵活性是一种极大的缺点。它可以导致可怕的互操作性问题（尽管该语言的灵活性可以部分缓解这些问题）。

而另一方面，灵活性又是一种巨大的优势。Java 语言一直苦于无法充分增强其灵活性，原因是它的基本对象模型还未灵活到可以被扩展的程度。一个典型的企业级开发人员为能够成功使用 Java 语言必须要学习很多东西，而新出现的一些优秀的开放源码项目和新技术，比如面向方面编程、Spring 编程框架和字节码增强库，则带来了大量要学的代码。

最后，JavaScript 优秀的灵活性的确让您体会到了一些高阶语言的强大功能。当然您无需选择为每个项目或大多数项目都做这样的权衡和折衷。但了解一种语言的优势和劣势 —— 通过参考大量信息，而不仅仅基于广告宣传或公众意见 —— 会让您可以更好地控制何时需要使用以及何时不能使用这种语言。当您在修改 JavaScript Web 小部件时，您至少知道该如何让此语言发挥它最大的优势。请继续跨越边界吧。

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

He is Handy

zt AJAX支持的 GOOGLE 地图 MASHUP 教程

摘要

简介

Web 2.0 工具箱

客户端编程

轻量级服务

Google 地图 API

prototype 1.5 API出来了

明天就可以回家了呵呵。

zt 好文章由浅到深了解JavaScript中的类

选定了毕业设计，开始学习

换网站了~~

He is Handy

zt AJAX支持的 GOOGLE 地图 MASHUP 教程

摘要

简介

Web 2.0 工具箱

客户端编程

轻量级服务

Google 地图 API

prototype 1.5 API出来了

明天就可以回家了 呵呵。

zt 好文章 由浅到深了解JavaScript中的类

选定了毕业设计，开始学习

换网站了~~

明天就可以回家了呵呵。

zt 好文章由浅到深了解JavaScript中的类