开始之前
本教程带您亲历了使用 Ajax 动态更新 Web 页面的全过程。这个 Web 页面由多个其它数据源填充的不同部分拼装而成,而使用 Ajax 调用更新其中一部分所需要的数据取自于填充页面另外一部分的数据源。这是 mashup 的基础 — 聚合数据。Ajax 是此过程的关键,因为它让页面的其他部分在无需刷新整个页面的情况下也能更新。具备 Ajax 的基础知识将对您跟随本教程的学习很有帮助;本教程也给出了 Ajax 的概览/回顾以便让您能快速掌握 Ajax。
本教程展示了一种常见的 mashup 技巧并以此为基础进行 mashup 应用的构建。地图在 Web 中十分流行,也是创建优秀 mashup 的原因所在。在本教程中,Google Maps API 提供了地图和地图绘制函数。从地图返回的数据 — 纬度和经度坐标 — 被应用于另一个 API,此 API 由流行的图片 Web 站点 Flickr 提供。Flickr 具备一个终端用户特性,它让您能地理标记 所上传的图片:图片拍摄位置的纬度和经度坐标与此图片相关。
mashup 包括单击 Google 地图并让 Map API 返回您单击之处的坐标。这些值再使用 Ajax 发送给 Flickr API。最终结果是返回由此坐标进行了地理标记后的一系列图片。
在此过程中,还会使用 Flickr API 的一个额外功能:标签。标签(而非地理标记)是描述图片的关键词。比如,您可以将金门大桥的图片标签为 San Francisco、bridge、Golden Gate、fog(该桥大部分处于大雾之中)等。这些标签由向 Flickr 上传图片的人添加。在本例中,我们不是创建新标签,而是搜索这些标签。
由于此 mashup 包含很多不同的 API,而 Ajax 也在其中,所以本教程按顺序介绍了这些组件:
- 展示有关 Google 地图的基础知识。让您了解如何创建并更改它。
- 随后,介绍 Ajax,这是因为 Ajax 使用来自 Google 地图的数据。关于 Ajax 的介绍中包括对基本 Ajax 调用的回顾。
- 介绍 mashup:来自 Google 地图的纬度和经度坐标通过 Ajax 机制发送给 Flickr API,图片从 Flickr 返回。
- 展示使用 Flickr API 的基础知识。让您了解如何获得 Flickr 帐号和使用 Flickr API。
本教程的目标是将您的 Ajax 知识付诸应用,即利用 Ajax 调用将来自一个 API 的数据发送给另一个 API 。几个参数也随此 Ajax 调用发送。由此 Ajax 调用返回的信息随后被格式化以便适合在 Web 页面显示。
本教程大部分使用的是 JavaScript 代码。Ajax 并不是一种语言,而是一种在很大程度上依赖于 JavaScript 代码的编程范型。因此,具备 Ajax 的知识将会很有帮助,但如果不具备,那么至少也要具备使用 JavaScript 代码的知识和经验。本教程还假设您了解地图的一些关键特性:距离、坐标和比例尺。
具备对 Web 服务器的访问和一个有效的域名是本教程最基本的技术要求。此外,还需要具备向此域添加文件的权限。服务器端语言使用的是 PHP,但服务器端代码很简单。在服务器端,主要是使用代码来查询数据库或从服务检索数据。这些概念在任何一种服务器语言中都很常见,所以用您自己选择的服务器端语言对 PHP 代码进行重写应该不难。
