Java Pet Store 2.0 应用程序简介

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 演示程序中的许多特性进行概述，并演示这些内容如何由用户驱动、组织和控制。

Web 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。本文将定义所有这些特性并解释其中涉及的技术。

使用 Ajax 的富 Web GUI

您可能访问过这样一种 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 小组以一种可视的有效方式呈现一个大的类别和子类别集。

RSS

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 所示。默认情况下，显示用户对该项的评定的平均值。要评定一个宠物，用户只需单击一个星形图标。一旦用户进行了评定，评定信息就会传送到服务器，然后与其他用户提供的信息尽心组合，服务器计算出一个新的综合评定等级。这个新评定等级将会向所有后续查看者显示。

用户控制（policing）

由于用户提供了在 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. 搜索结果页面

 

使用 Google Maps 进行混搭

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 应用程序，以及需要考虑哪些设计选项。