开发移动Web Ajax应用

尽管受到媒体追捧,但是开发移动设备应用很多年来一直都是高投入、低回 报的工作。 基于 iPhone OS 和 Google Android 的最新一代智能手机提供了一 个更简单的应用开发方法:Web 应用。 这种一次编译就可以支持所有设备的方 法可以降低开发成本。更重要的是, 所有这些高端设备都具备支持高级 HTML、 JavaScript 和 CSS 的超现代的浏览器。在本文中, 我们将学习如何开发充分 利用现代智能手机功能的广泛使用 Asynchronous JavaScript and XML (Ajax) 技术的应用。 我们将不仅能了解到如何发挥这些设备的最大功效,同时还能学 习到如何处理它们之间的细微差别。

开始

本文阐述如何开发一个运行在 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);
   }
}

时间: 2024-12-08 01:01:37

开发移动Web Ajax应用的相关文章

面向 Java 开发人员的 Ajax: Google Web Toolkit 入门

简介: Ajax 被用于创建更加动态和交互性更好的 Web 应用程序.Google Web Toolkit (简称GWT) 是 Google 推出的 Ajax 应用开发包,GWT 支持开发者使用Java 语言开发 Ajax 应用.本文中作者将介绍如何使用 GWT 开发 Ajax 应用的基本方法和步骤. ## Ajax简介 ## Ajax是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写,由XHTML.CSS.JavaScript.XMLHttpReq

面向Java开发人员的Ajax:使用Google Web Toolkit开发Ajax

Ajax技术是当前开发web应用的非常热门的技术,也是Web 2.0的一个重要的组成部分.然而如果用传统的方式Javascript进行Ajax开发的话,就会使得应用程序非常难以进行调试,从而降低了生产效率.Google最近推出的GWT有望为我们解决这个难题,GWT是一个开发Ajax应用的框架,它使程序员用Java同时开发客户端和服务器端的代码.GWT的编译器会把用于开发客户端的Java代码转化成Javascript和Html,而程序员不用关心这一转换过程.这样程序员就可以在自己喜欢的Java I

使用AJAX技术开发新一代Web应用程序(2)

ajax|web|程序 开发新一代Web应用程序(2)-ajax与php web开发">图2 一个独立桌面应用程序的图解架构. 该应用程序运行于其自身的进程之中-在其内数据模型和程序逻辑彼此清晰可见.在同一台计算机上运行的该应用程序的第二个实例除了经由文件系统之外无法存取第一个实例的数据模型.典型地,全部程序状态存储在单个的文件中-当该应用程序运行时它被锁定以阻止任何信息的同步交换. 图3 客户端/服务器系统和n层架构图解. 该服务器提供一个客户可以用之进行交互的可共享的数据模型.客户端仍

用AJAX开发智能Web应用程序之高级篇(2)

ajax|web|程序|高级 •标准HTML复选框不支持"校验"事件以允许取消一个GUI行为,而这种要求可能存在于某些应用程序中. 现在,让我们看一个正在构建的该控件的用法示例,它的用法可能如下情形: <checkbox id="cbx_1" value="N" labelonleft="true" label="Show Details:" onValue="Y" offValu

使用AJAX技术开发新一代Web应用程序(4)

ajax|web|程序 由于网络潜力的不可预测性,这种可察觉的错误来来去去,并且测试应用程序的响应性也可能变得更为困难.因此,网络潜力是真实世界应用程序具有可怜的交互性的最通常的原因.四.异步客户端 在实际中,我们必须尽量使UI响应独立于网络活动.幸好,一段固定时间的响应经常就足够了,只要它是及时的.让我们再次看一下实际中的问题.我的早上例程的主要任务之一是唤醒我的孩子们上学.我可以站在他们上面戳他们直到他们起床并穿上衣服,但这是一相当花费时间的方式,留下很长的一段时间我几乎无事可做(图8).

使用AJAX技术开发新一代Web应用程序(3)

ajax|web|程序 这并不是在诋毁Amazon,在非常有限的限定内它工作得相当优秀.但是与工作表相比,它所依赖的交互模型毫无疑问相当有限. 那么,为什么在现代web应用程序中存在这么多的限制呢?目前,存在很多技术上的原因.因此,现在让我们作进一步分析.三.网络的潜力 互联网时代的伟大就在于世界各地所有的计算机互相联系,就象在一个非常大的计算资源之中.远程和本地过程调用变得很难区分,并且发行者已经不再清醒地了解它们在哪些物理机器上工作.  不幸的是,远程和本地过程调用是根本不相同的技术. 在网

面向Java开发人员的Ajax: 使用Jetty和DWR实现Comet Web应用程序

作为一种广泛使用的 Web 应用程序开发技术,Ajax 牢固确立了自己的地位,随之而来的是一些通用 Ajax 使用模式.例如,Ajax 经常用于对用户输入作出响应,然后使用从服务器获得的新数据修改页面的部分内容.但是,有时 Web 应用程序的用户界面需要进行更新以响应服务器端发生的异步事件,而不需要用户操作 -- 例如,显示到达 Ajax 聊天应用程序的新消息,或者在文本编辑器中显示来自另一个用户的改变.由于只能由浏览器建立 Web 浏览器和服务器之间的 HTTP 连接,服务器无法在改动发生时将

面向Java开发人员的Ajax:结合Direct Web Remoting使用Ajax

理解 Ajax 编程的基本知识 是重要的,但是如果正在构建复杂的用户界面,那么能够在更高层次的抽象上工作也很重要.在面向 Java 开发人员的 Ajax 系列的第 3 篇文章中,我在上个月的 Ajax 的数据序列化技术 基础之上,介绍一种可以避免繁琐的 Java 对象序列化细节的技术. 在 上一篇文章 中,我介绍了如何用 JavaScript 对象标注(JSON)以一种在客户机上容易转化成 JavaScript 对象的格式对数据进行序列化.有了这个设置,就可以用 JavaScript 代码调用远

面向Java开发人员的Ajax:探索 Google Web Toolkit

最近发布的 Google Web Toolkit (GWT) 是一组全面的 API 和工具,它支持用户几乎完全使用 Java 代码来创建动态 Web 应用程序.Philip McCarthy 回到了他广受欢迎的面向 Java 开发人员的 Ajax 系列,向您展示 GWT 能做什么,并帮助您确定它是否适合您. GWT(请参阅 参考资料)采用了一种不寻常的方式进行 Web 应用程序开发.它没有采用客户端和服务器端代码库的普通隔离,而是提供了一个 Java API,该 API 允许创建基于组件的 GU