開發移動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 開發人員必須處理跨 瀏覽器支援問題， 因此開發瀏覽器應用一直是很困難的。開發人員需要花費很 多的時間來實現 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);
　　 }
}