http://developers.sun.com.cn/Java/petstore.html

?

?

使用 Ajax 創建用于無縫數據交互的 Web 2.0 web 應用程序是一項復雜的任務，Ajax 是一種包含（但不僅限于）Asynchronous JavaScript 和 XML 的技術。為了幫助您準確理解什么是 Web 2.0，以及 Ajax 如何改善用戶體驗， Java BluePrints 程序 小組開發了 Java Pet Store 2.0 參考應用程序。通過探索 Pet Store 2.0 應用程序的用例、設計和實現，您將了解構建具有類似功能的應用程序的更多信息。

Java Pet Store 2.0 演示程序提供了一個寵物購買者、出售者和只想看看寵物的寵物愛好者的聯系場景。該程序演示了如何使用 Java Platform, Enterprise Edition 5 （Java EE 5）開發支持 Ajax 的 Web 2.0 應用程序。它還附帶了獲得 BSD-style 許可的完整的源代碼，因此您可以使用它進行試驗，并在您自己的應用程序中使用。

同時，Java Pet Store 2.0 演示程序還演示了支持 Ajax 的 JavaServer Faces 組件庫和 Java Persistence API、model-view-controller (MVC) 和其他設計模式，以及 mashup 的用法，其中 mashup 是組合了多個源的數據的 web 應用程序。 試用 Live Java Pet Store 2.0 應用程序 并 下載 。

本文對 Java Pet Store 2.0 演示程序中的許多特性進行概述，并演示這些內容如何由用戶驅動、組織和控制。

Java Pet Store 2.0 演示程序是一個 Web 2.0 應用程序。到底什么是 Web 2.0 呢？

在歷史上，web 站點最初只是作為一個 HTML 頁面的集合，僅僅提供一些與公司或主題有關的信息。許多這類站點其實就是在做廣告。隨著時間的推移，web 站點演變為包含動態的、允許用戶輸入信息或需求、以某類表單形式呈現的頁面。信息被傳遞到服務器，服務器隨后向用戶返回一個頁面。用戶的瀏覽器頁面重新加 載以包含請求的信息。一些流行的動態特性包括投票、調查和商品搜索。Applet 和類似的應用程序也允許用戶在線玩游戲和與他人聊天。無論大多數這類站點多么動態，其內容始終由站點所有者控制，而且以所有者覺得最適合 web 特性的方式安排導航。

有了 Web 2.0，web 站點轉變為由用戶驅動，而不是由所有者驅動。用戶可以添加自己的內容，標記自己和其他人添加的內容 —— 從而，數據根據公眾的需求進行組織。此外，借助 Ajax 這樣的技術，頁面不需要完全重新加載，改善了用戶體驗。數據片段在后臺異步傳輸，從而只需刷新一小部分頁面，為用戶提供了更接近于桌面應用程序的使用體 驗。

BluePrints 小組使用 Web 2.0 創建了 Java Pet Store 2.0 參考應用程序：其中的所有內容都是用戶驅動的，而且允許用戶以對自己有意義的方式標記數據。此外，Java Pet Store 演示程序在整個程序中使用一個 Ajax 用戶界面（UI），提供了一種類似于桌面應用程序的更加豐富的用戶體驗。最后，Java Pet Store 演示程序包含活動服務的動態數據和 mashup。本文將定義所有這些特性并解釋其中涉及的技術。

您可能訪問過這樣一種 web 站點，每次單擊一個菜單項或鏈接時都需要重新加載整個頁面。這不僅減緩了應用程序，而且會刺激眼睛，有時還會使您不知所措，特別是當您在查看一個包含很多 數據的頁面時。為了克服其中的一些問題，Java Pet Store 演示程序中的所有頁面都使用 Ajax 創造了一種更加流暢的用戶體驗，而且避免了煩人的整個頁面重載。

Ajax 在 HTML 頁面中使用 JavaScript 技術異步調用服務器并取回數據。然后，JavaScript 技術可以使用此數據更新或修改 HTML 頁面的文檔對象模型（Document Object Model，DOM）。起初，開發人員使用 Ajax 和 XML 文檔表示數據，但是他們逐漸改用其他格式了。

Ajax 交互允許將表示邏輯從數據中明確地分離出來。HTML 頁面可以只更新所需的小部分數據，而無需在顯示每次更改時都重新加載整個頁面。需要一種不同的服務器端架構來支持這種交互模式。傳統情況下，服務器端 web 應用程序主要用于為導致一個服務器調用的每個客戶機事件生成 HTML 文檔。客戶端然后針對每個響應刷新并重新呈現完整的 HTML 頁面。富 web 應用程序（比如 Java Pet Store 2.0 演示程序）主要關注一個 HTML 文檔的客戶機抓取，它用作一個根據客戶端事件注入內容的模板或容器，使用從服務器端組件獲取的數據。

當您使用這個 Java Pet Store 應用程序時，您將會看到頁面上的內容被無縫地更改了，無需重新加載真個頁面。該應用程序也將 Ajax 用于其他特性。圖 1 展示了一些特殊的特性。

Figure 1. Java Pet Store 2.0 主屏幕

?

當將鼠標放到菜單項上時，應用程序主頁左側的導航菜單還顯示了一個 魚眼（fish-eye） ，一種好像通過超廣角攝像機鏡頭看到的可視的畸變。這是一個使用 Ajax 和 JavaScript 技術使頁面更生動的有趣的示例。盡管一些查看者可能討厭生動的頁面，但 Ajax 的這種用法顯示了它使頁面更生動的能力。

只要用戶單擊一個寵物類型，例如 dogs，屏幕中間顯示的鸚鵡將會被更新為一副狗的圖片，出現新的 Ajax 導航，屏幕底部出現一個滾動條。圖 2 在結果頁面上標識了這些部分。

圖 2. 包含 Ajax 導航、滾動條和陰影窗格的第二個屏幕

?

Java Pet Store 應用程序的管理員在主頁左側的導航欄中只提供了主要的寵物類別，以及一些基本的導航。用戶提供具體的內容：待售的寵物。此外，用戶可以標記他們自己的描 述，或者以對它們有意義的方式將其應用到內容中。通過這種方式，Java Pet Store 應用程序現在基于用戶驅動內容了。

圖 3 展示了單擊一個類別的狗時顯示的頁面。該頁面包含一些值得注意的特性。屏幕底部的滾動條顯示幾種狗的照片。單擊任何一張照片，以前顯示的狗的大圖片就會被您選擇的狗的圖片無縫地取代。

圖 3. 在狗類別中導航

?

如果單擊連續的 Ajax 滾動條中的箭頭，后臺代碼將會異步地抓取一個類別中的一組圖片的片段。從而，當用戶在照片上滾動時，滾動條流暢地顯示似乎是連續的列表。通過這種方式，用 戶不必刷新一個頁面。這是 Ajax 如何改善用戶體驗的一個很好的示例。在沒有 Ajax 的 web 應用程序中，當用戶在圖片列表中滾動時，應用程序必須向服務器發出另一個請求，以抓取整個新頁面，然后再次顯示頁面。借助 Ajax，應用程序可以抓取下一組數據 —— 在本示例中為圖像 URL —— 然后僅更新頁面的一部分取代顯示的圖像。此外，應用程序的客戶端可以緩存一些數據，并當用戶在滾動圖片列表中滾動時重用這些數據，這樣就避免了再次與服務 器通信。

滾動條上面是陰影窗格。該窗格包含大量特性，其中之一就是另一個箭頭集，包含一個向上的箭頭或向下的箭頭。當用戶單擊該箭頭集時，將會出現一個顯示了寵物詳細信息的陰影窗格。這是一個很普通的 Ajax 用例。陰影窗格并不顯眼，而且可以輕松關閉或隱藏。

在陰影窗格上，用戶也可以使用 PayPal 服務向出售者支付費用。當用戶單擊 Pet Store 2.0 應用程序中的 PayPal 按鈕購買寵物時，就會出現 PayPal 開發人員沙箱頁面。當然，在實際的應用程序中，需要使用一個允許用戶購買寵物的真實的 PayPal 帳戶。

最后，注意圖 3 左側的導航欄。滾動到任何一項上面時，將會打開一個子類別的 “手風琴”，無需重新加載頁面。此處，Ajax 允許用戶在各種寵物子類別之間輕松導航。它還允許 BluePrints 小組以一種可視的有效方式呈現一個大的類別和子類別集。

Java Pet Store 演示程序中的每個頁面頂部都有一個共同的新聞欄，如圖 1 所示。它可以是一個新聞欄，或滾動頂部的 4 個標題的滾動欄，這些標題來自 java.net 的 BluePrints 項目 RSS 提要。用戶可以單擊新聞欄的標題直接跳轉到的 java.net 上的 RSS 項，或者單擊 BluePrints 的文字 News，這將跳轉到一個在應用程序 BluePrints News 中創建的頁面。

RSS 是一個輕量型 XML 文檔，設計用于共享標題和其他 web 內容。RSS 語法定義一個包含一組類似 HTML 的標記 XML 文檔，用于共享新聞標題、文章標題等內容。每個 RSS XML 文件包含關于站點的靜態信息和關于新事件的動態信息，所有信息都位于一對開始和結束標記之間。web 站點然后將這些 RSS 提要向想要這些數據的標題鏈接的人公開。一旦關于每個項的信息是 RSS 格式，稱為新聞聚合器的 RSS 感知的程序可以檢測到更改的提要，并用適當的方式回應這些更改。

在本例中，java.net 提供了 RSS 服務，因此 XML 文檔和 Java Pet Store 應用程序就是一個聚合器，它們可以將 XML 文件解碼為適合作為新聞欄的格式，新聞欄作為到新聞和博客的活動鏈接。

新聞欄分散在 Java Pet Store 演示程序的所有頁面，而且它包含一個到新聞頁面的鏈接，以及到一些流行故事和博客的鏈接，這些故事和博客來自 java.net 上的 BluePrints 活動公告 RSS 提要。用戶可以單擊 Next 和 Previous 按鈕獲得更多故事。Ajax 的使用避免了刷新整個頁面。相反，只替換了新聞項，允許讓頁面模板保持原樣。

Java Pet Store 演示程序允許用戶使用一個描述性單詞為寵物添加標記，比如 awesome ，或者使用毛的顏色、種類名稱或其它特征。如圖 1 所示，主頁右側顯示了一個標記集（tag cloud）。這允許用戶通過用戶驅動的內容分類瀏覽內容。

當用戶為寵物創建了一個標記，標記將存儲在數據庫中，并關聯到該寵物。系統跟蹤用戶輸入的所有標記和輸入同一個標記的次數。標記然后出現在標記集中，并根據該標記的流行程度為其分配一個顏色和字體大小。當用戶單擊標記集中的一個標記時，應用程序檢索一組相關聯的寵物。

出售者頁面允許用戶上傳寵物照片和關于該寵物的信息，以在 Java Pet Store 應用程序內部共享。用戶必須在一個表單中提供待售寵物的信息，該表單中嵌入了一個富文本編輯器，允許用戶為寵物的描述設置文本格式，比如粗體或斜體。圖 4 展示了富文本編輯器。

圖 4. 出售者表單

?

當用戶填寫完表單，Ajax 將無縫地跳轉到下一個表單。該頁面要求輸入出售者信息。在該頁面上使用了 Ajax，允許在表單的 city 字段使單詞完備化。這簡化了從下拉菜單中選擇正確城市的過程。

最后，包含一個 CAPTCHA，以阻止虛假內容的輸入。CAPTCHA 是 Completely Automated Public Turing test to tell Computers and Humans Apart 的縮寫，需要用戶輸入扭曲的圖片中的文字，有時會在屏幕上添加一個模糊的文字或數字序列。圖 5 展示了單詞完備化下拉菜單和 CAPTCHA。

圖 5. Ajax 下拉菜單和 CAPTCHA

?

當用戶單擊 Submit 按鈕時，在用戶的數據和圖像被上傳到服務器的過程中，將顯示一個進度條。當完成該過程時，一個 Thank You 頁面顯示用戶上傳的照片和到顯示該照片的頁面的鏈接。本文的一位作者上傳了一張 Harry 的照片，這是她在佛羅里達遇到并拍下一種梭魚，我們可以在活動應用程序演示中看到。顯然，她不會真的出售 Harry，此示例只是演示 Java Pet Store 應用程序中的出售者頁面和上傳功能。圖 6 展示了 Harry 最終的寵物頁面。

圖 6. Harry，一種梭魚

?

出售者頁面還允許用戶將桌面上的圖像上傳到 Java Pet Store 服務器，在這里可供其他用戶查看。圖像和描述都需要經過表單和服務器驗證，應用程序然后自動創建圖像的縮略圖，下一節將詳細展示這些功能。

允許用戶以一種易用的內容交付機制提供內容，這使 Java Pet Store 真正屬于 Web 2.0 應用程序，還有其他一些特性使得界面轉換（比如使用 Ajax 重新加載頁面的部分區域）和更新過程變得更加流暢和生動。但是，允許用戶向 web 站點輸入內容，而且其他人可以立即訪問這些內容，這又帶來了新的問題。

可以在幾個級別對內容進行驗證，首先使用用戶提供寵物信息的表單，檢查合適的文本格式和合適的圖像大小和格式，以及檢查用戶可能輸入表單中的惡意代碼。在數據庫級別，針對合適的存儲和檢索對數據進行檢查。

表單驗證包括兩個方面：

• 客戶端驗證
• 服務器端驗證

客戶端驗證

客戶端驗證的第一部分是使用典型的 web 技術來完成的，通過編寫 JavaScript 在提交之前檢查表單數據。該方法能夠快速響應用戶，而且不會引起傳輸延遲。它不會增加任何不必要的網絡流量。如果用戶還有任何必須字段未填或輸入的格式錯 誤，將會向用戶顯示一條消息并終止表單提交。應用程序在顯示給用戶的頁面上一次性指出所有錯誤，而不是一次顯示一個錯誤。通過這種方式，用戶可以一次性修 改所有錯誤，無需一次修改一個錯誤并重新提交表單以查看是否還有其他錯誤存在。此驗證部分包括確保上傳的文件具有合適的后綴 —— .jpg 、 .gif 或 .png —— 以及為了安全起見，描述字段沒有包含腳本或鏈接標記。如果應用程序允許用戶在其中包含腳本元素，那么黑客就可以使用這類安全漏洞劫持頁面或者濫用服務器的資源。

服務器端驗證

客戶端執行的驗證會在服務器端重新執行。這項功能是為了發現用戶在瀏覽器上禁用 JavaScript 代碼的情形，或者嘗試通過某種替代方法直接向服務器發送請求以攻擊一個提交過程的情形。

這種初級的應用程序攻擊可以輕易地克服。借助服務器端驗證，可以一次性向用戶顯示上傳過程中的所有錯誤，而不是一次顯示一個錯誤。如果一次顯示一個錯誤，那么用戶必須不斷提交并忍耐著傳輸延遲，才能查看下一個錯誤。此功能是在每個實體的特定類中實現的。例如， Address 類驗證自己的數據，但是由于 Item 類是一個合成的類，所以它不但驗證自己的數據，還會調用其包含的任何類的驗證方法，比如 Address 類。

除了包含客戶端的驗證之外，服務器端驗證還包含檢查客戶端不可能發生的情形。例如，在服務器端針對 JavaScript 攻擊的 SQL 注入進行檢查。

驗證還檢查提交的圖片是否有效，以及其大小是否小到可以發布。為了維護和安全性目的，應用程序將上傳大小限制為大約 100k。這個限制會阻止用戶上傳可能導致維護問題的圖像，這些問題包括磁盤空間和向服務器添加不必要的負載，這將會導致一種拒絕服務攻擊。由于上傳是多 部分 mime 格式，所以允許隨附的數據和多部分 mime 開銷。總體上傳大小限制為 150k，這為上傳 100k 圖像的用戶提供了充足的空間。如果上傳大小小于 150k，上傳就會成功。如果大于 150k，就會設置一個包含該錯誤的狀態對象，以讓客戶機能夠讀取并向用戶顯示。應用程序然后中斷上傳過程。

出售者頁面始終位于頂部菜單中，如圖 1 所示，用于解決一些驗證問題。應用程序的其他部分也可以解決這些問題。

在陰影窗格上還有一個寵物評定系統，使用星形圖標表示，如圖 2 所示。默認情況下，顯示用戶對該項的評定的平均值。要評定一個寵物，用戶只需單擊一個星形圖標。一旦用戶進行了評定，評定信息就會傳送到服務器，然后與其 他用戶提供的信息盡心組合，服務器計算出一個新的綜合評定等級。這個新評定等級將會向所有后續查看者顯示。

由于用戶提供了在 Java Pet Store web 站點上顯示的內容，應用程序執行一些步驟來確保用戶不會填入不適當的內容。除了允許戶添加自己的內容之外，站點必須允許用戶清除不好的內容。用戶還擁有控 制功能，任何人都可以將圖像標記為不適當，只需單擊 “Flag as inappropriate” 鏈接即可，如圖 3 所示。

當用單擊此鏈接時，顯示一個彈出框，詢問用戶是否要刪除該圖片。當用戶單擊 OK 按鈕時，圖片就會消失，從而被刪除。但是，在后臺，應用程序只標記了該圖片，所以應用程序管理員可以在以后決定是否將圖像從數據庫永久刪除。這阻止了用戶 刪除所有內容，只能標記確實不雅或不合適的內容。

對用戶驅動內容進行控制可以阻止無關的或者不受歡迎的圖像或文本。必須將一些標記為不合適的內容刪除，如前面討論的陰影窗格所示。此外，必須有一種方式來阻止垃圾信息發送者添加信息。

應用程序頁面還提供了一個基于關鍵字的搜索功能。在 Pet Store 頁面頂部的主菜單中單擊 Search，可以體驗該功能，如圖 1 所示。Pet Store 實現使用 Apache Lucene 搜索引擎對存儲的每項的名稱、描述和標記進行索引。如果只想根據名稱和描述搜索，不想使用標記，用戶應該取消 Also Search Tags 復選框。

在搜索頁面上，將會看到典型的搜索框。默認情況下，框中的內容為單詞 cat 。單擊 Submit 按鈕，就會出現一個結果頁面。將鼠標停留在結果頁面上的每個寵物名稱的鏈接上，可以獲得一個包含特定寵物信息的彈出菜單，信息包括圖片和地址，如圖 7 所示。此外，在結果頁面右側的 Tags 列中，可以看到用戶為每個寵物輸入的標記，也可以在此添加您自己的標記。單擊 Add Tags，出現一個對話框。輸入一個標記，就會看到它和該寵物的其他標記一起顯示。注意，每個寵物的價格也會出現在這些搜索結果最右側的 Price 列中。

圖 7. 搜索結果頁面

?

Java Pet Store 搜索功能使您不僅可以根據特定寵物類型關鍵字搜索，還可以定制在您的臨近地區進行搜索。隨后，搜索結果與 Google Maps 服務進行 mashup，以提供針對用戶定制的詳細結果。

mashup 是將特定于內容的數據和另一個 web 站點的服務組合起來的結果，這個 web 站點可能來自一個或多個提供者，從而提供一種綜合體驗。Mashup 與簡單地繼承一個服務不同。例如，java.net RSS 提要是一種在 Java Pet Store 應用程序內部提供和使用的服務。java.net 提供的 XML 文件的數據被拉入應用程序中，經過格式化并作為鏈接添加到 web 頁面中。當用戶單擊一個鏈接時，瀏覽器就會轉到 java.net web 站點，以閱讀該文章或博客。

但是，使用 mashup，服務不僅被添加到 Java Pet Store 應用程序中，它還會與用戶提供的數據交互，然后在應用程序中顯示定制的結果。通過這種方式，搜索結果的數據與來自 Google Maps 的服務混合起來，并且方便地顯示在應用程序中。

要嘗試對基于位置的搜索進行 mashup，請單擊頂部菜單欄中的 Search。在搜索結果頁面中，通過在 Map 列中勾選一些復選框選擇一些寵物，然后滾動到頁面底部。在文本字段下面輸入您的地址或一個建議的地址，然后單擊 Map Checked Items。在瀏覽器底部，當應用程序調用 Google Maps 服務并將您的數據結果拉入該頁面上的地圖窗體中時，將會看到閃爍的 Google URL。通過這種方式，應用程序提供了特定于內容的寵物搜索與 Google Maps 的一種 mashup，從而在您的區域找到可以購買到的寵物。

在應用程序的任何頁面的頂部菜單欄中單擊 Map，也可以做一些類似的事情。這個頁面將會轉到 Google Maps 客戶端 mashup 頁面，以在地圖上顯示您所選類別的寵物位置。通過輸入一個可選的中心點位置和一定距離的搜索范圍，用戶可以將顯示的內容進一步限制到中心點周圍的特定區域 內。然后，地圖頁面讓您選擇搜索哪種寵物類型、想要搜索的區域，以及搜索區域離中心點的距離范圍。然后會獲得一個結果頁面，如圖 8 所示。

圖 8. 地圖顯示頁面

?

Google Maps 頁面的左側提供了與地圖上特定點對應的超鏈接。用戶可以單擊此位置或使用超鏈接選擇特定點。當用戶將鼠標停留在超鏈接上時，一個彈出菜單就會顯示該項的細 節，應用程序使用 Ajax 請求檢索到的信息。每個項的鏈接發送編目頁上的項的用戶信息，顯示關于該項的詳細信息。

Java Pet Store 2.0 應用程序由大量技術和一個服務 mashup 組成：

• 使用 Ajax、DHTML 和一個數據庫進行客戶端緩存
• Java EE 5 技術： JavaServer Faces 、 JavaServer Pages (JSP) 、 Java Servlet 技術 、 Java Database Connectivity (JDBC) 、 Java EE 注釋 、 Java 持久性 API ，以及 Java 事務 API
• 開源工具集、實用程序和服務：Dojo 工具集、Dojo 部件、Rome for RSS 閱讀器、Apache 文件上傳 、Apache Lucene 搜索、RSS 提要、Google Maps、Yahoo Geocoding

本文概述了 Web 2.0 Java Pet Store 應用程序如何由用戶內容驅動，以及如何利用 Ajax 通過大量不同特性提供更加流暢的用戶體驗。此外，還了解了驗證和控制用戶驅動數據的考慮因素，而且提供了服務 mashup，除了常規服務（比如 RSS 提要和 PayPal）之外，還包括 Google Maps。最后，您還了解了用于此應用程序的 Java 技術和其他技術。

本系列的后續文章將會詳細討論如何將各種技術用于 Java Pet Store 應用程序，以及需要考慮哪些設計選項。

?

轉載自：http://thinktothings.iteye.com/blog/850362

Java Pet Store 2.0 應用程序簡介