(转载)开发移动 Web Ajax 应用

转自 http://www.ibm.com/developerworks/cn/web/wa-aj-mobileajax/?ca=drs-tp4608

?

这是最典型的 web.xml 代码。我们可以看到 servlet 声明，应用使用了 JAX-RS 的参考实现 Jersey。 Servlet 的初始化参数指示 Jersey 扫描 org.developerworks.mobile 包中被标记为处理服务请求的类。同时，任何映射到 /resources/ 的请求都将映射到 Jersey servlet。 这里最后需要注意的是文件最后的 mime-mapping 部分。这是 MANIFEST 文件的 MIME 类型， 也是我后面将讨论到的脱机 Web 应用的一个关键。既然我们已经了解了 Web 应用将使用到的后台服务， 接下来我们将了解它使用到的前台。

?

这是一个非常简单的 Web 页面，但是其中有许多值得注意的方面。首先，在文件头部我设置了视区。 它指示浏览器放大内容，使内容在设备上良好显示。在 UI 代码方面，这里只有一个标题和表示正在加载的图片。 剩下的部分就是 JavaScript。文件 index.js 中的 loadEntries 函数会发送一个 Ajax 请求加载数据。这个函数如清单 6 所示。

清单 6. loadEntries 函数

?

这个函数里执行的都是标准的 DOM 操作。唯一复杂的方面是记录可以附加在后面或插到前面， 或者添加到顶部或底部。在前面的 清单 6 中，函数的最后一个操作是删除正在加载的图片。 这其中包括基本的 Ajax 函数，我们可以根据用例选择使用。然而，应用需要从服务器下载许多数据， 然后再解析。对于移动 Web 应用，我们可以有更好的方式，我们可以使用本地缓存。

?

这里的主要区别是我们首先加载本地数据。接着确定其中最新的记录，然后在我们连接服务器时使用这个参数， 服务器将只会返回不在本地存储的记录。最后，当我获得新的记录后，在回调函数中我们需要调用 saveLocal 函数来将它们保存到本地缓存中。在新的记录存储到本地后，现在我们就可以启用 Web 应用的完全脱机访问。

?

检查 navigator 对象（window.navigator）的 onLine 属性就可以确定当前是否是脱机的。如果是脱机的，应用就不会请求服务器获取新的记录，而只显示所有本地记录。 现在，我们有了一个支持脱机的完整的移动 Web 应用。

结束语

移动 Web 应用是当前一个很热的话题。它们是一种为许多不同设备的用户提供服务的方法。 它们利用浏览器之间最高层次的标准化，这是 Web 开发人员最愿意看到的。在本文中， 我们了解了开发一个基于 Ajax 的移动 Web 应用所需要的重要技术。而且，通过 Ajax， 我们能够利用手机浏览器的最前沿技术。通过浏览本文中的示例代码， 我们知道在页面被请求时我们可以在服务器上生成所有的 HTML。然而，通过将所有 UI 放在客户端和使用 Ajax 从服务器获取数据，我们可以简单地将数据缓存到客户端， 甚至实现应用的脱机工作方式。

?