使用 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 文档的客户机抓取,它用作一个根据客户端事件注入内容的模板或容器,使用从服务器端组件获取的数据。