用 Ajax 驱动的雷达屏幕跟踪空间对象

级别： 中级

Nicholas Chase , 自由撰稿人

2008 年 7 月 11 日

	现在注册或者使用您的 IBM ID 和密码登录。

您可能希望跟踪交通状况，以便在交通顺畅时回家，或者跟踪 Second Life 或其他虚拟世界中移动的对象和人。如果能够从浏览器直接跟踪这些东西，不是很棒吗？本教程讲解如何用 Ajax 创建一个动画式的自动刷新的雷达屏幕。

在本教程中

本教程讲解如何创建自我更新的页面以及如何显示空间数据。同时也解释如何从外部数据源取得空间数据并在浏览器中以图形方式显示。

目标

本教程解释如何创建一个基于 Ajax 的雷达屏幕，从而在浏览器中跟踪空间数据。数据可以来自任何数据源（我们使用一个 Second Life 传感器跟踪虚拟对象），但必须可以通过 HTTP 访问（这里通过 Java servlet 访问数据）。在本教程中，将学习以下主题：

• 通过 HTTP 把 Second Life 跟踪数据发送到外部数据源
  
  
• 用 Java servlet 跟踪半持久化数据
  
  
• 用 JavaScript Object Notation（JSON）指定对象
  
  
• 用 JavaScript 创建定位的对象
  
  
• 用 Prototype 库处理 Ajax 请求
  
  
• 用 Prototype 库创建重复的动画
  
  
• 探测接近
  
  
• 用 JavaScript 在浏览器中播放声音
  
  
• 在页面上动态地显示文本信息
  

所有这些最终会给您带来一个能将即时消息通信量转变为纯 HTTP 的应用程序，这样您就不会遇到防火墙问题。

预备知识

本教程假设您熟悉 JavaScript。熟悉 Ajax 会有帮助，但不是必需的。本教程演示如何用 Prototype JavaScript 库实现 Ajax 功能，但是不要求您熟悉 Prototype。本教程使用一个 Java servlet 容纳数据，用一个 Second Life 脚本作为数据源，但是其原理适用于来自任何数据源的数据和任何编程语言或环境。

系统需求

为了学习本教程，需要下载并安装以下应用程序：

• 一个支持 JavaScript 的浏览器，比如 Mozilla Firefox：本教程中的代码已经用 Firefox 2.0.0.11 和 Microsoft® Internet Explorer 7 测试过。（但是，它在 Firefox 中的效果更好）。
• Prototype JavaScript 库：Prototype 库可以简化许多基于 JavaScript 的任务。
• Soundmanager 2：在浏览器中播放声音是有点复杂并且独立于平台的问题。Soundmanager 把这个功能封装为一个可通过 JavaScript 访问的 Flash，由此简化了这个任务。
• Macromedia Flash 插件：声音对于本教程是可选的，但是如果希望听到声音，就需要在浏览器中启用 Flash。
• 声音的 MP3 文件：如果您手头没有合适的 MP3 文件，可以使用本教程 源代码 中的 beep.mp3 文件。
• 一个可通过 HTTP 访问的数据服务器：本教程通过 Apache Tomcat servlet 引擎 使用 servlet。也可以使用 PHP 文件或其他数据存取方法，但是出于安全原因，必须能够把 HTML 文件放在同一个服务器上。（关于其他环境的信息参见 参考资料）。
• 一个数据源：我将使用一个 Second Life 脚本，可以在本教程的 源代码 中找到这个文件。（关于在 Second Life 中运行脚本的更多信息，参见 参考资料）。但是，您可以使用任何数据源。

学习时间

1 小时

格式

参考资源

• 链接到 Ajax IM 教程（Nicholas Chase，developerWorks，2007 年 1 月）提供了另一个 Prototype JavaScript 库示例。
  
  
• “Ajax 和 XML: 将 Ajax 用于聊天”（Jack Herrington, developerWorks，2007 年 12 月）介绍如何用 Ajax 创建不需要外部 Jabber 服务器的聊天客户机。
  
  
• “Ajax -- 困惑者指南，第 1 部分: Ajax 工具和技术综述 ”（Gal Shachor 等，developerWorks，2007 年 7 月）介绍一些工具，包括 Prototype。
  
  
• “PHP V5.2 中的新增功能，第 3 部分: 使用新的 JSON 扩展”（Tracy Peterson, developerWorks，2007 年 3 月）介绍如何在 Ajax 应用程序中通过 PHP 使用内置的 JSON 扩展。
  
  
• developerWorks Ajax 资源中心 提供大量 Ajax 参考资料，包括对以下标准进行说明的链接：JavaScript、Cascading Style Sheets（CSS）、HTML、XMLHttpRequest 对象和 Document Object Model（DOM）。
  
  
• 访问 developerWorks Web 开发专区，这里有丰富的 how-to 信息、工具和参考资料，可以帮助您用开放标准技术进行开发。
  
  

回页首