用 HTML 5 构建 Web 应用程序
创建未来的 Web 应用程序
简介： 多年来，Web 开发人员一直垂涎于 HTML 5 规范中所描述的下一代 Web 浏览器中的某些特性。您可能会吃惊地发现其实有很多特性已经在如今的浏览器中可用了。在本文中，了解如何查证哪些功能已经存在以及如何在您的应用程序中充分利用这些功能。探索 HTML 5 的强大功能，例如多线程、地理定位、嵌入数据库及嵌入视频。
本文的标签: 5, ajax, dhtml_(dynamic_html), html, html5, javascript, web, xml, 应用架构, 应用程序... more tags
构建, 用, 用户界面, 组件
标记本文！
简介
基于 HTML 5 已经涌现出了很多新的特性和标准。一旦您发现了当今浏览器中的一些可用的特性，就可以在您的应用程序中充分利用这些特性。在本文中，通过开发一些示例应用程序来了解如何探寻和使用最新的 Web 技术。本文的绝大多数代码都是 HTML、JavaScript 和 CSS — Web 开发人员的核心技术。
立即开始
为了能跟随我们的示例进行学习，最重要的一件事情是要有多个浏览器供测试使用。建议使用 Mozilla Firefox、Apple Safari 和 Google Chrome 最新版本。本文中我们使用的是 Mozilla Firefox 3.6、Apple Safari 4.04 和 Google Chrome 5.0.322。您可能还希望在移动浏览器上进行测试。例如，最新的 Android 和 iPhone SDK 被用于在模拟机上测试它们的浏览器。
您可以 下载 本文中所使用的源代码。
这些示例包括非常小的用 Java? 写的后端组件。本文使用的是 JDK 1.6.0_17 和 Apache Tomcat 6.0.14。有关下载这些工具的链接，请参见 参考资料。
回页首
探测的能力
有一个关于 Web 开发人员的笑谈，Web 开发人员用他们 20% 的时间写代码，然后用剩下的 80% 的时间让这些代码能够在所有浏览器中运转起来并获得相同的效果。要说 Web 开发人员已习惯于处理不同浏览器间的差别多少有点不切实际。随着浏览器新一轮创新浪潮的出现，这种低效的方法仍然没有改善。最新、最好的浏览器所支持的特性在不断变化。
不过，也有好的一面，这些新特性均集中在 Web 标准，这就让您能够现在就开始使用这些新特性。您可以采用渐进增强的老技巧、提供一些基线特性、查找高级特性，然后用出现的额外特性增强您的应用程序。要做到这一点，我们需要学习如何探测新功能。清单 1 显示了一个简单的探测脚本。
清单 1. 探测脚本
目前已经出现了大量新特性和标准，成为了 HTML 5 标准的一部分。本文重点将放在几个最有用的特性上。清单 1 中的脚本探测到了四个新特性：
Web worker（多线程）
地理定位
数据库存储
本地视频回放
这个脚本的开头显示了用户浏览器的用户代理。它通常是一个惟一标识此浏览器的字符串，但它很容易被篡改。对于这个应用程序它已经足够好了。下一步是开始检测特性。首先要通过在全局范围（视窗）中查找 Worker 函数来检测 Web worker。这里用到了一些符合语言习惯的 JavaScript：双重否定。如果 Worker 函数不存在，那么 window.Worker 的求值结果为未定义，这是 JavaScript 中的一个 “伪” 值。如果在它前面放上一个单否定，就会被求值为真，因此放上一个双否定将被求值为假。检测完该值后，脚本会通过修改清单 2 中显示的 DOM 结构来将这个评估结果显示在屏幕上。
清单 2. 检测 DOM
这里需要注意的重要一点是代理了两个 Foursquare API。一个用来搜索，另一个用来获得这个场所的细节。要辨别这二者，细节 API 添加了一个操作参数。此外，将返回类型指定为 JSON，这会使解析来自 JavaScript 的数据变得十分简单。知道了应用程序代码所能进行哪种类型的调用之后，接下来让我们看看它如何进行这些调用以及如何使用来自 Foursquare 的数据。
使用地理定位
第一个调用是一个搜索。清单 5 显示了对于纬度和经度需要两个参数：geoLat 和 geoLong 。如下的清单 6 显示了如何获得应用程序内的这两个参数以及如何调用这个 servlet。
清单 6. 用位置进行搜索
清单 7 内的代码主要是用来创建内含场所信息的数据表的 DOM 代码。但其中也不乏一些亮点。请注意高级 JavaScript 特性（比如数组对象的映射以及 forEach 函数）的使用。这里还有在支持地理定位的所有浏览器上均可用的一些特性。最后的两行代码也很有趣。对数据库支持的检测在此执行。如果支持，那么就启用一个 Save 按钮，用户单击此按钮就可将所有该场所的数据保存到一个本地数据库。下一节将讨论这一点是如何实现的。
结构化存储
清单 7 展示了典型的渐进增强策略。这个示例测试了是否有数据库支持。如果有此支持，就会添加一个 UI 元素以便向这个应用程序添加一个新特性供其使用。在本例中，它启用了一个按钮。单击此按钮会调用函数 saveAll，如清单 8 所示。
清单 8. 保存到数据库
要将场所数据保存到数据库，先要创建一个用来存储数据的表。创建表的语法是非常标准的 SQL 语法。（所有支持数据库的浏览器均使用 SQLite。查阅 SQLite 文档获得受支持的数据类型、限制等。）SQL 执行异步完成。此外，还会调用事务函数并向其传递一个回调函数。callback 函数获得一个事务对象，用来执行 SQL。executeSQL 函数接受一个 SQL 字符串，然后是一个可选的参数列表，外加成功和错误处理器函数。如果没有错误处理器，错误就被 “吃掉”。对于 create table 语句而言，这是一种理想状况。脚本首次执行时，此表将会被成功创建。当再次执行时，脚本将会失败，因为表已经存在 — 但这也问题不大。因为我们只需要确保在向表内插入行之前，此表已经存在。
此表创建后，通过 forEach 函数用从 Foursquare 返回的每个场所调用 saveVenue 函数。此函数先是通过查询这个场所来查证这个场所是否已经被存储在本地。这里，使用了一个成功处理器。查询的结果集将被传递给这个处理器。如果没有结果或场所尚未被存储于本地，就会调用 insertVenue 函数，由它执行一个插入语句。
借助 saveAll，在所有的保存/插入完成后，调用 countVenues。目的是查询插入到这个场所表内的行的总数。这里的语法（row["COUNT(*)"]）从查询的结果集中拉出该计数。
了解了如何使用数据库支持（如果有的话）后，接下来的一节将会探讨如何使用 Web worker 支持。
Web worker 的后台处理
回到 清单 6，让我们对它进行稍许修改。如下面的清单 9 所示，检测是否有 Web worker 支持。如果有，就用它来获得从 Foursquare 检索来的每个场所的更多信息。
清单 9. 修改后的场所搜索
这个细节脚本迭代所有场所。对于每个场所，此脚本会使用 XMLHttpRequest 调用 Foursquare 代理以便获得场景的细节。不过，请注意在使用它的 open 函数打开连接时，传递进第三个参数（true）。这会使调用成为同步的，而不再是通常的异步的。在 worker 中这么做是可以的，因为没有处于主 UI 线程，并且不会冻结整个应用程序。把它变成同步的，意味着一个调用必须结束后，下一个才能开始。处理程序只简单从场所细节中抽取 tips 并收集所有这些 tips 后一并传递回主 UI 线程。为了将此数据传递回去，调用了 postMessage 函数，由该函数在这个 worker 上调用 onmessage 回调函数，如 清单 9 中所示。
默认地，这个场所搜索返回 10 个场所。不难想象为了获得细节而进行 10 个额外的调用将要花费多长时间。因而使用 Web worker 在后台线程中完成这类任务是很有意义的。
回页首
结束语
本文介绍了现代浏览器内的一些 HTML 5 的新功能。您了解了如何检测新的特性以及如何将这些新特性添加到您的应用程序内。这些特性的绝大多数现在都已经广受流行浏览器的支持 — 特别是移动浏览器。现在您就可以充分利用地理定位和 Web worker 等特性来创建具有创新性的 Web 应用程序了。
