Android教程之用 HTML 5 构建 Web 应用程序(三).ppt

1、Android教程之用HTML5构建Web应用程序（三）,清单 8. 保存到数据库 Web worker 的后台处理 清单 9. 修改后的场所搜索 清单 10. worker 的脚本 details.js 结束语,var db = ; function saveAll() db = window.openDatabase(venueDb, 1.0, Venue Database,1000000); db.transaction(function(txn) txn.executeSql(CREATE TABLE venue (id INTEGER NOT NULL PRIMARY KEY, +

2、name NVARCHAR(200) NOT NULL, address NVARCHAR(100), cross_street NVARCHAR(100), + city NVARCHAR(100), state NVARCHAR(20), geolat TEXT NOT NULL, + geolong TEXT NOT NULL);); );,Android教程之清单 8. 保存到数据库,allVenues.forEach(saveVenue); countVenues(); function saveVenue(venue) / check if we already have the

3、venue db.transaction(function(txn) txn.executeSql(SELECT name FROM venue WHERE id = ?, venue.id, function(t, results) if (results.rows.length = 1 ,function insertVenue(venue) db.transaction(function(txn) txn.executeSql(INSERT INTO venue (id, name, address, cross_street, + city, state, geolat, geolon

4、g) VALUES (?, ?, ?, ?, + ?, ?, ?, ?);, venue.id, , venue.address, venue.crossstreet, venue.city, venue.state, venue.geolat, venue.geolong, null, errHandler); ); ,function countVenues() db.transaction(function(txn) txn.executeSql(SELECT COUNT(*) FROM venue;, function(transaction, results) v

5、ar numRows = results.rows.length; var row = results.rows.item(0); var cnt = rowCOUNT(*); alert(cnt + venues saved locally); , errHandler); ); ,要将场所数据保存到数据库，先要创建一个用来存储数据的表。创建表的语法是非常标准的 SQL 语法。（所有支持数据库的浏览器均使用 SQLite。查阅 SQLite 文档获得受支持的数据类型、限制等。）SQL 执行异步完成。此外，还会调用事务函数并向其传递一个回调函数。callback 函数获得一个事务对象，用来执行

6、 SQL。executeSQL 函数接受一个 SQL 字符串，然后是一个可选的参数列表，外加成功和错误处理器函数。如果没有错误处理器，错误就被 “吃掉”。对于 create table 语句而言，这是一种理想状况。脚本首次执行时，此表将会被成功创建。当再次执行时，脚本将会失败，因为表已经存在 但这也问题不大。因为我们只需要确保在向表内插入行之前，此表已经存在。 此表创建后，通过 forEach 函数用从 Foursquare 返回的每个场所调用 saveVenue 函数。此函数先是通过查询这个场所来查证这个场所是否已经被存储在本地。这里，使用了一个成功处理器。查询的结果集将被传递给这个处理器。

7、,如果没有结果或场所尚未被存储于本地，就会调用 insertVenue 函数，由它执行一个插入语句。 借助 saveAll，在所有的保存/插入完成后，调用 countVenues。目的是查询插入到这个场所表内的行的总数。这里的语法（rowCOUNT(*)）从查询的结果集中拉出该计数。 了解了如何使用数据库支持（如果有的话）后，接下来的一节将会探讨如何使用 Web worker 支持。 Web worker 的后台处理 回到 清单 6，让我们对它进行稍许修改。如下面的清单 9 所示，检测是否有 Web worker 支持。如果有，就用它来获得从 Foursquare 检索来的每个场所的更多信息。

8、,function venueSearch(geoLat, geoLong) var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() if (this.readyState = 4 ,Android教程之清单 9. 修改后的场所搜索,worker.postMessage(allVenues); xhr.open(GET, api?geoLat= + geoLat + ,上述代码使用了与之前相同的检测方法。如果存在对 Web worker 支持，就会创建一个新的 worker。为了创建一个新的 worker，需要指向

9、 worker 将要运行的脚本的 URL 在本例中，即 details.js 文件。当此 worker 完成其作业后，它会向主线程发送回一个消息。onmessage 处理器将接收这个消息；我们为它使用了一个简单的闭包。最后，为了初始化这个 worker，用一些数据调用 postMessage 以便它能工作起来。将所有检索自 Foursquare 的场所信息传递进来。清单 10 显示了 details.js 的内容，该脚本将由此 worker 执行。,var tips = ; onmessage = function(message) var venues = message.data; ven

10、ues.foreach(function(venue) var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() if (this.readyState = 4 ,清单 10. worker 的脚本 details.js,venueDetails.tips.forEach(function(tip) tip.venueId = venue.id; tips.push(tip); ); ; xhr.open(GET, api?operation=getDetails ,这个细节脚本迭代所有场所。对于每个场所，此脚本会使

11、用 XMLHttpRequest 调用 Foursquare 代理以便获得场景的细节。不过，请注意在使用它的 open 函数打开连接时，传递进第三个参数（true）。这会使调用成为同步的，而不再是通常的异步的。在 worker 中这么做是可以的，因为没有处于主 UI 线程，并且不会冻结整个应用程序。把它变成同步的，意味着一个调用必须结束后，下一个才能开始。处理程序只简单从场所细节中抽取 tips 并收集所有这些 tips 后一并传递回主 UI 线程。为了将此数据传递回去，调用了 postMessage 函数，由该函数在这个 worker 上调用 onmessage 回调函数，如 清单 9 中所示。 默认地，这个场所搜索返回 10 个场所。不难想象为了获得细节而进行 10 个额外的调用将要花费多长时间。因而使用 Web worker 在后