Android教程之用_HTML_5_构建_Web_应用程序(三)

### Android教程之用HTML5构建Web应用程序：数据库操作与Web Worker #### 一、数据库操作：保存数据到本地 在本教程中，我们探讨了如何使用HTML5中的`window.openDatabase`方法在Android设备上创建并操作本地数据库，具体地是在Android应用内部使用Web应用程序的形式。这种做法可以有效地提升用户体验，尤其是在网络连接不稳定的情况下。 ##### 清单8. 保存到数据库 为了保存数据到数据库，首先需要创建一个表。以下代码展示了如何创建一个名为`venue`的表，并定义了其结构： ```javascript db = window.openDatabase("venueDb", "1.0", "VenueDatabase", 1000000); db.transaction(function(txn) { txn.executeSql("CREATE TABLE venue (id INTEGER NOT NULL PRIMARY KEY, 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);"); }); ``` 这里的SQL语句使用的是标准的SQL语法。由于几乎所有支持数据库功能的现代浏览器都使用SQLite作为底层实现，因此这些SQL语句也是SQLite兼容的。这意味着你可以查阅SQLite的相关文档来了解更多关于数据类型和支持的限制。 创建表的操作是异步完成的，这意味着我们需要通过回调函数来处理创建表之后的操作。在这个例子中，我们创建了一个事务函数，并向其传递了一个回调函数。回调函数接收到一个事务对象，然后使用`executeSql`方法执行SQL语句。 需要注意的是，`executeSql`方法接受三个参数：SQL字符串、参数列表（如果有的话）、以及成功和错误处理器函数。如果不提供错误处理器函数，则任何发生的错误都将被忽略。在这个场景下，这是合理的，因为如果表已存在，尝试再次创建表将会失败，但这不会对我们的应用程序造成实际影响。 保存数据的过程分为两个步骤：检查数据是否已存在于数据库中，以及插入新数据。这通过`saveVenue`函数实现： ```javascript function saveVenue(venue) { // 检查是否已经保存过该场所 db.transaction(function(txn) { txn.executeSql("SELECT name FROM venue WHERE id=?", [venue.id], function(t, results) { if (results.rows.length == 1 && results.rows.item(0)['name']) { console.log("Already have venue id=" + venue.id); } else { insertVenue(venue); } }); }); } function insertVenue(venue) { db.transaction(function(txn) { txn.executeSql("INSERT INTO venue (id, name, address, cross_street, city, state, geolat, geolong) VALUES (?, ?, ?, ?, ?, ?, ?, ?);", [venue.id, venue.name, venue.address, venue.crossstreet, venue.city, venue.state, venue.geolat, venue.geolong], null, errHandler); }); } ``` 这里我们首先查询数据库，检查场所是否已经存在于表中。如果没有找到对应的记录，则调用`insertVenue`函数来插入新的数据记录。 我们还需要统计已保存的场所数量。这通过`countVenues`函数实现： ```javascript function countVenues() { db.transaction(function(txn) { txn.executeSql("SELECT COUNT(*) FROM venue;", [], function(transaction, results) { var numRows = results.rows.length; var row = results.rows.item(0); var cnt = row["COUNT(*)"]; alert(cnt + " venues saved locally"); }, errHandler); }); } ``` 这段代码执行了简单的计数查询，并显示保存在本地数据库中的场所数量。 #### 二、Web Worker：后台处理 除了数据库操作之外，教程还介绍了如何利用Web Worker来进行后台处理。Web Worker允许在不阻塞用户界面的情况下运行JavaScript脚本，这对于提高应用性能非常重要。 ##### 清单9. 修改后的场所搜索 虽然原文中没有给出具体的修改代码示例，但是我们可以推测这部分可能涉及使用Web Worker进行场所搜索任务的优化。通常，这类任务会非常耗时，将其移至后台处理可以显著提高用户体验。 ##### 清单10. Worker的脚本details.js 这部分可能涉及到了具体的Web Worker脚本文件，用于执行复杂的计算或者数据处理任务。例如，在`details.js`文件中，可以编写用于检索场所详细信息的逻辑，并且这些逻辑可以在后台线程中执行，而不影响用户的正常交互体验。 通过上述知识点的梳理，我们可以看到HTML5提供了丰富的API来支持Web应用程序的功能扩展。特别是在数据库操作和后台处理方面，这些技术能够帮助开发者构建更加高效、响应迅速的应用程序。