(转载)开发移动 Web Ajax 应用
转自 http://www.ibm.com/developerworks/cn/web/wa-aj-mobileajax/?ca=drs-tp4608
开始
本文阐述如何开发一个运行在 Apple iPhone 以及基于 Android 的智能手机上的移动 Web 应用。 开发这些设备上的移动 Web 应用，我们不能使用平常的桌面浏览器，至少不能完全只使用桌面浏览器。 我们还需要模拟器或实际的设备。对于 iPhone 来说，我们需要使用 iPhone 模拟器。它是 iPhone SDK 的一部分。本文所使用的是 iPhone SDK 3.1。类似地，我们也需要使用 Android SDK。它包含了一个 Android Virtual Device 管理器，这个管理器可以用来创建运行各个 Android 版本的 Android 模拟器。 其中本文使用的是 Android SDK 2.1。本文所用到的大部分代码是 JavaScript 代码，以及一些 HTML 和 CSS。 此外，应用还有一个使用 Java™ 实现的服务器端。这并不是强制性要求的，和其它的 Web 应用一样， 我们可以自己选择使用任意的服务器端技术。我们需要使用 Java 1.6 来运行本文所开发的应用。 另外我们还需要使用 Jersey，它是 JAX-RS 的参考实现，以及所有相关的 Java Archive (JAR) 文件（见 参考资料）。
手机浏览器与 WebKit
移动设备很多年就有 Web 浏览器了。然而，由于 Web 开发人员必须处理跨浏览器支持问题， 因此开发浏览器应用一直是很困难的。开发人员需要花费很多的时间来实现 HTML、JavaScript 和 CSS 在不同版本的浏览器上运行完全一致，如 Internet Explorer、Mozilla Firefox、Safari 等。 而桌面浏览器的问题几乎与手机浏览器中的问题如出一辙。不同版本的手机浏览器也是多得惊人。 每个设备制造商都拥有各自的浏览器，甚至来自相同厂商的设备在操作系统、屏幕大小等方面都有很大的差别。 有些浏览器只支持 WAP，而有一些则支持部分的 HTML，还有一些完全支持 HTML，但不支持 JavaScript。
幸好，现在情况已经大不相同了。到 2010 年 1 月，美国有超过 80% 的移动互联网流量都是通过 iPhone 或 Android 手机产生的。这两种操作系统不仅都是使用 WebKit 进行 HTML/CSS 渲染， 而且它们都是一样积极地使用 HTML 5 标准所采用的 JavaScript 引擎。没错。 移动领域的主流浏览器现在都使用了开放标准。这是 Web 开发人员所遇到的最好时机。
浏览器之间还是存在差别的，即使是不同版本的 iPhone 和 Android 也不例外。 其中 Android 浏览器差别最大。在 2.0 之前版本的 Android 上，Android 浏览器使用的是私有的 Google Gears 技术。虽然 Gears 有很多优秀的创新技术，现在已经包含在 HTML 5 标准中了。 然而，这意味着在很长的一段时间里，Android 浏览器是不支持其中一些 HTML 5 标准的， 但是我们还是能够使用 Gears 来实现一部分功能。本文的所有代码都是基于 HTML 5 标准并且是可以正常运行在 Android 2.0+ 或 iPhone 3.0+ 上的。 既然我们已经拥有了这些现代的基于 WebKit 的浏览器，接下来让我们来看看一些这些设备上的 Ajax。
手机浏览器上的 Ajax
像桌面 Web 应用一样，在移动 Web 应用上创建引人注目的用户体验的关键通常就是使用 Ajax。当然， 用户体验并不是使用 Ajax 的唯一原因；其中还可能涉及到速度和效率的原因。而后者恰恰是在移动 Web 应用上使用 Ajax 的更重要的原因所在，因为移动网络的延迟更大，而浏览器本身也受到处理器速度、 内存和缓存大小的限制。幸好，由于只需要关注于基于标准的浏览器，因此 Ajax 则恰好是许多因此变得更简单的技术之一。在详细讨论这个问题之前， 让我们先快速地了解一下本文所开发的应用所使用的后台服务器。
在开始之前，我们需要下载必要的 JAR 文件，其中包括 Jersey、Xerces、Rome 和 Google App Engine SDK (见 参考资料)。然后将它们安装到下面的文件夹中：WebKitBlog>war>WEB-INF>lib。 我们可以从这里 下载 应用的其它源代码。
WebKit 博客
本文的移动 Web 应用是一个简单的阅读移动 Web 开发新闻的应用。虽然目前它只是简单地从官方 WebKit 博客抓取 RSS 源，但是它可以经过简单地修改来收集多个 RSS 源。这个应用是一个普通的 Java Web 应用，它可以部署到任何一个 Java 应用服务器上。所有代码见清单 1。
清单 1. Feed 类
@Path("/feed")
public class Feed {
String surfinSafari = "http://webkit.org/blog/feed/";
@GET @Produces("application/json")
public News getNews(@DefaultValue("0") @QueryParam("after") long after)
throws Exception{
URL feedUrl = new URL(surfinSafari);
SyndFeedInput input = new SyndFeedInput();
SyndFeed feed = input.build(new XmlReader(feedUrl));
List<Item> entries = new ArrayList<Item>(feed.getEntries().size());
for (Object obj : feed.getEntries()){
SyndEntry entry = (SyndEntry) obj;
if (entry.getPublishedDate().getTime() > after){
Item item = new Item(entry.getTitle(), entry.getLink(),
entry.getDescription().getValue(),
entry.getPublishedDate().getTime());
entries.add(item);
}
}
return new News(feed.getTitle(), entries);
}
} |
这个类使用 Java 的 JAX-RS 创建一个 RESTful 服务。@Path 注释表示了服务的终端，即服务的相对 URL 是 /feed。@GET 表示这个服务支持 HTTP GET。@Produces 声明这个服务将生成 JSON 格式的数据。这是一个简单的以 JSON 格式序列化数据的方法。 方法 getNews 接收一个名为 after 的参数， 即获取一个特定日期之后的实体。这里也使用 JAX-RS 注释来将参数 after 绑定到查询字符参数 after 上。如果没有赋值，它会使用默认值 0。
到这里，我只阐述了 清单 1 中创建服务寻址和数据序列化的代码所用到的 JAX-RS 注释。该方法的主体实际上大部分依赖于处理 RSS 的 Rome 包。它只是下载最新的 RSS 源， 然后将它转换成我们应用所需要的数据，这里的数据就是 Item 和 News 这两类。其中唯一复杂的部分是文章的发表日期被转化为一个 long 值，并用作一个 ID。这是一个非常有用的 ID， 因为我们可以用它来进行排序，我们将在后面使用到。News 类如清单 2 所示。
清单 2. News 类
@XmlRootElement
public class News {
private String title;
private List<Item> entries;
// constructors, getters/setters omitted for brevity
} |
注意 News 类使用了 JAXB 注释 @XmlRootElement。 这个应用中不使用 XML，但是 JAX-RS 使用 JAXB 完成自动的序列化/反序列化。这个类只有一个标题属性和一组 Item。 Item 类如清单 3 所示。
清单 3. Item 类
@XmlType
public class Item {
private String title;
private String link;
private String description;
private Long id;
// constructors, getters/setters omitted for brevity
} |
这个类包含的就是我们在 Web 应用中显示的内容。类似于 News 类， 它也使用 JAXB 注释，这样 JAX-RS 可以将它序列化成 JSON。这部分代码的最后一部分是配置 Web 应用的，以使请求能指向 JAX-RS。为了达到这个目的，我们需要编辑应用的 web.xml 文件， 如清单 4 所示。
清单 4. web.xml 配置文件
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>WebKit Blog Servlet</servlet-name>
<servlet-class>com.sun.jersey.spi.container.servlet.
ServletContainer</servlet-class>
<init-param>
<param-name>com.sun.jersey.config.property.packages</param-name>
<param-value>org.developerworks.mobile</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>WebKit Blog Servlet</servlet-name>
<url-pattern>/resources/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>30</session-timeout>
</session-config>
<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<mime-mapping>
<extension>mf</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
</web-app> |
这是最典型的 web.xml 代码。我们可以看到 servlet 声明，应用使用了 JAX-RS 的参考实现 Jersey。 Servlet 的初始化参数指示 Jersey 扫描 org.developerworks.mobile 包中被标记为处理服务请求的类。同时，任何映射到 /resources/ 的请求都将映射到 Jersey servlet。 这里最后需要注意的是文件最后的 mime-mapping 部分。这是 MANIFEST 文件的 MIME 类型， 也是我后面将讨论到的脱机 Web 应用的一个关键。既然我们已经了解了 Web 应用将使用到的后台服务， 接下来我们将了解它使用到的前台。
Ajax 构建的用户接口
清单 4 中我们可以看到应用有一个标准的 index.html 文件。这是应用的入口点，如清单 5 所示。
清单 5. index.html 文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html manifest="application.mf">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>WebKit News</title>
<meta name = "viewport" content = "width = device-width"/>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="loadEntries()">
<h1 id="title">Recent News About WebKit</h1><img
id="loader" src="loading.gif"/>
</body>
</html> |
这是一个非常简单的 Web 页面，但是其中有许多值得注意的方面。首先，在文件头部我设置了视区。 它指示浏览器放大内容，使内容在设备上良好显示。在 UI 代码方面，这里只有一个标题和表示正在加载的图片。 剩下的部分就是 JavaScript。文件 index.js 中的 loadEntries 函数会发送一个 Ajax 请求加载数据。这个函数如清单 6 所示。
清单 6. loadEntries 函数
function loadEntries(){
if (!window.JSON){
var head = document.getElementsByTagName("head")[0];
var jsScript = document.createElement("script");
jsScript.setAttribute("src", "json2.js");
jsScript.setAttribute("type","text/javascript");
head.appendChild(jsScript);
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 &&this.status == 200){
var theFeed = JSON.parse(this.responseText);
var i = 0;
if (theFeed.entries){
var len = theFeed.entries.length;
for (i=0;i<len;i++){
addEntry(theFeed.entries[len - 1 -i], true);
}
}
var body = document.getElementsByTagName("body")[0];
body.removeChild($("loader"));
}
};
var urlStr = "/resources/feed";
xhr.open("GET", urlStr);
xhr.send();
} |
在这个函数的开始部分，我进行了一些功能检查。大多数浏览器支持内置的解析和序列化 JSON 的函数。 这与 json.org 上的 JSON 库是相同的。然而，如果没有这个函数，我们需要在页面上包含这个文件， 然后我们就有相同的功能了。
另外，这是非常简单的 Ajax 代码。我们不需要担心 Internet Explorer 不支持，所以我们可以直接创建一个 XMLHttpRequest。我们可以设置它的 onreadystatechange 属性为一个函数，在本例中将创建一个闭包。当响应从服务器返回（readyState =
4）且处理过程没有发生问题（status = 200 OK）时，我们就使用 JSON.parse 函数来解析 JSON 响应。对于来自源的每一个记录执行 addEntry 函数。 这个函数为每一个记录创建 UI 元素。如清单 7 所示。
清单 7. addEntry 函数
function addEntry(e, prepend){
var eDiv = document.createElement("div");
eDiv.setAttribute("class", "item");
var link = document.createElement("a");
link.setAttribute("href", e["link"]);
var title = document.createTextNode(e["title"]);
link.appendChild(title);
eDiv.appendChild(link);
var button = document.createElement("input");
button.setAttribute("type", "button");
button.setAttribute("value", "Show");
button.setAttribute("id", "button" + e["id"]);
button.setAttribute("onclick", "showDescription('" + e["id"] + "')");
eDiv.appendChild(button);
var dDiv = document.createElement("div");
dDiv.setAttribute("id", e["id"]);
dDiv.setAttribute("class", "description");
dDiv.setAttribute("style", "display:none");
dDiv.innerHTML = e["description"];
eDiv.appendChild(dDiv);
var body = document.getElementsByTagName("body")[0];
if (!prepend && body.childNodes.length > 1){
body.appendChild(eDiv);
} else {
body.insertBefore(eDiv, body.childNodes.item(2));
}
} |
这个函数里执行的都是标准的 DOM 操作。唯一复杂的方面是记录可以附加在后面或插到前面， 或者添加到顶部或底部。在前面的 清单 6 中，函数的最后一个操作是删除正在加载的图片。 这其中包括基本的 Ajax 函数，我们可以根据用例选择使用。然而，应用需要从服务器下载许多数据， 然后再解析。对于移动 Web 应用，我们可以有更好的方式，我们可以使用本地缓存。
使用本地存储进行缓存
本地存储属于 HTML 5 规范，并且得到广泛的支持。它有一个简单的 name - value 存储机制， 而其中 name 和 value 都是字符串。所以将记录保存到本地存储是很简单的，如清单 8 所示。
清单 8. 保存到本地存储
function saveLocal(entry){
if (!window.localStorage){
return;
}
localStorage.setItem(entry["id"], JSON.stringify(entry));
} |
同样，这里做了一些浏览器功能检查，按照 HTML 5 规范，首先检查 window 对象是否有 localStorage 属性。 如果有，那么我们就可以使用记录的 id 作为存储的键。 对于 value，必须使用字符串，因此我们使用 JSON.stringify 函数来将对象序列化成一个字符串。 这样，我们只需要一个从本地存储读取所有数据的函数。如清单 9 所示。
清单 9. 从本地存储加载数据
function loadLocal(){
if (!window.localStorage){
return [];
}
var i = 0;
var e = {};
var id = 0;
var entries = [];
for (i=0; i< localStorage.length; i++){
id = localStorage.key(i);
e = JSON.parse(localStorage.getItem(id));
entries[entries.length] = e;
}
entries.sort(function(a,b) {
return b.id - a.id;
});
return entries;
} |
同样，这个函数从检查本地存储是否可用开始。接着，它遍历本地存储中的所有数据。 对于存储中的每一个值，我们再次使用 JSON.parse 函数来将字符串解析成为一个对象。 接着，我们需要对记录进行排序，因为它们从本地存储返回的顺序是不一定的。这里进行了一个降序排序，最新记录在最前面。 最后，我们就有了本地存储的保存和加载函数，我们需要将它们整合到 loadEntries 函数中， 如清单 10 所示。
清单 10. 添加缓存到 loadEntries 函数
function loadEntries(){
// check for JSON object
var localEntries = loadLocal();
var newest = 0;
if (localEntries.length > 0){
newest = localEntries[0].id;
}
var i = 0;
for (i=0;i<localEntries.length;i++){
addEntry(localEntries[i]);
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
var theFeed = JSON.parse(this.responseText);
var i = 0;
if (theFeed.entries){
var len = theFeed.entries.length;
for (i=0;i<len;i++){
addEntry(theFeed.entries[len - 1 -i], true);
saveLocal(theFeed.entries[len - 1 -i]);
}
}
var body = document.getElementsByTagName("body")[0];
body.removeChild($("loader"));
}
};
var urlStr = "/resources/feed?after=" + newest;
xhr.open("GET", urlStr);
xhr.send();
} |
这里的主要区别是我们首先加载本地数据。接着确定其中最新的记录，然后在我们连接服务器时使用这个参数， 服务器将只会返回不在本地存储的记录。最后，当我获得新的记录后，在回调函数中我们需要调用 saveLocal 函数来将它们保存到本地缓存中。在新的记录存储到本地后，现在我们就可以启用 Web 应用的完全脱机访问。
脱机访问
使应用以脱机方式工作通常被视为移动 Web 应用开发的圣杯。虽然它可能很复杂， 但是许多 HTML 5 的新特性对它进行了简化。我们需要做的第一件事是确定什么东西需要脱机访问， 然后将它们列在应用的 MANIFEST 中，如清单 11 所示。
清单 11. 应用的 MANIFEST
CACHE MANIFEST index.html index.js json2.js loading.gif |
对于这样简单的应用，它的 MANIFEST 也是非常简单的。它只包含全部的静态文件：HTML、JavaScript 和图片（以及 CSS）。 其中重要的一点是这个文件要用 MIME 类型 text/cache-manifest 挂载 —— 正如我们在 清单 4 的 web.xml 文件中设置的那样。最后，在 清单 5 中， 我们可以看到最外层的 html 元素有一个属性 manifest， 它指向 清单 11 中的 MANIFEST 文件。最后我们需要做的是对 loadEntries 函数进行最后的修改，如清单 12 所示。
清单 12. 脱机检查
function loadEntries(){
// load local
// ...
// check if online
if (navigator.onLine){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
var theFeed = JSON.parse(this.responseText);
var i = 0;
if (theFeed.entries){
var len = theFeed.entries.length;
for (i=0;i<len;i++){
addEntry(theFeed.entries[len - 1 -i], true);
saveLocal(theFeed.entries[len - 1 -i]);
}
}
var body = document.getElementsByTagName("body")[0];
body.removeChild($("loader"));
}
};
var urlStr = "/resources/feed?after=" + newest;
xhr.open("GET", urlStr);
xhr.send();
}
} |
检查 navigator 对象（window.navigator）的 onLine 属性就可以确定当前是否是脱机的。如果是脱机的，应用就不会请求服务器获取新的记录，而只显示所有本地记录。 现在，我们有了一个支持脱机的完整的移动 Web 应用。
结束语
移动 Web 应用是当前一个很热的话题。它们是一种为许多不同设备的用户提供服务的方法。 它们利用浏览器之间最高层次的标准化，这是 Web 开发人员最愿意看到的。在本文中， 我们了解了开发一个基于 Ajax 的移动 Web 应用所需要的重要技术。而且，通过 Ajax， 我们能够利用手机浏览器的最前沿技术。通过浏览本文中的示例代码， 我们知道在页面被请求时我们可以在服务器上生成所有的 HTML。然而，通过将所有 UI 放在客户端和使用 Ajax 从服务器获取数据，我们可以简单地将数据缓存到客户端， 甚至实现应用的脱机工作方式。