• 丰搜首页
• 文档中心
• 视频中心
• 丰搜贴吧
• 问题集锦
• 更多功能

选择显示字体大小

• 最大
• 较大
• 标准

面向java程序员的ajax:构建动态java程序

    ajax（即异步 javascript 和 xml）是一种 web 应用程序开发的手段，它采用客户端脚本与 web 服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地更新 web 页面。 使用 ajax，可以创建更加丰富、更加动态的 web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。

　　ajax 不是一项技术，而更像是一个 模式 —— 一种识别和描述有用的设计技术的方式。ajax 是新颖的，因为许多开发人员才刚刚开始知道它，但是所有实现 ajax 应用程序的组件都已经存在若干年了。它目前受到重视是因为在 2004 和 2005 年出现了一些基于 ajax 技术的非常棒的动态 web ui，最著名的就是 google 的 gmail 和 maps 应用程序，以及照片共享站点 flickr。这些用户界面具有足够的开创性，有些开发人员称之为“web 2.0”，因此对 ajax 应用程序的兴趣飞速上升。

　　在这个系列中，我将提供使用 ajax 开发应用程序需要的全部工具 。在第一篇文章中，我将解释 ajax 背后的概念，演示为基于 java 的 web 应用程序创建 ajax 界面的基本步骤。我将使用代码示例演示让 ajax 应用程序如此动态的服务器端 java 代码和客户端 javascript。最后，我将指出 ajax 方式的一些不足，以及在创建 ajax 应用程序时应当考虑的一些更广的可用性和访问性问题。

　　更好的购物车

　　可以用 ajax 增强传统的 web 应用程序，通过消除页面装入从而简化交互。为了演示这一点，我采用一个简单的购物车示例，在向里面添加项目时，它会动态更新。这项技术如果整合到在线商店，那么用户可以持续地浏览和向购物车中添加项目，而不必在每次点击之后都等候完整的页面更新。虽然这篇文章中的有些代码特定于购物车示例，但是演示的技术可以应用于任何 ajax 应用程序。清单 1 显示了购物车示例使用的有关 html 代码，整篇文章中都会使用这个 html。

　　清单1. 购物车示例的有关片断

＜!-- table of products from store's catalog, one row per item --＞
＜th＞name＜/th＞ ＜th＞description＜/th＞ ＜th＞price＜/th＞ ＜th＞＜/th＞
...
＜tr＞
＜!-- item details --＞
＜td＞hat＜/td＞ ＜td＞stylish bowler hat＜/td＞ ＜td＞$19.99＜/td＞
＜td＞
＜!-- click button to add item to cart via ajax request --＞
＜button onclick="addtocart('hat001')"＞add to cart＜/button＞
＜/td＞
＜/tr＞
...

＜!-- representation of shopping cart, updated asynchronously --＞
＜ul id="cart-contents"＞

＜!-- list-items will be added here for each item in the cart --＞

＜/ul＞

＜!-- total cost of items in cart displayed inside span element --＞
total cost: ＜span id="total"＞$0.00＜/span＞
　　ajax 往返过程

　　ajax 交互开始于叫作 xmlhttprequest 的 javascript 对象。顾名思义，它允许客户端脚本执行 http 请求，并解析 xml 服务器响应。ajax 往返过程的第一步是创建 xmlhttprequest 的实例。在 xmlhttprequest 对象上设置请求使用的 http 方法（get 或 post）以及目标 url。

　　现在，您还记得 ajax 的第一个 a 是代表 异步（asynchronous） 吗？在发送 http 请求时，不想让浏览器挂着等候服务器响应。相反，您想让浏览器继续对用户与页面的交互进行响应，并在服务器响应到达时再进行处理。为了实现这个要求，可以在 xmlhttprequest 上注册一个回调函数，然后异步地分派 xmlhttprequest。然后控制就会返回浏览器，当服务器响应到达时，会调用回调函数。

　　在 java web 服务器上，请求同其他 httpservletrequest 一样到达。在解析了请求参数之后，servlet 调用必要的应用程序逻辑，把响应序列化成 xml，并把 xml 写入 httpservletresponse。

　　回到客户端时，现在调用注册在 xmlhttprequest 上的回调函数，处理服务器返回的 xml 文档。最后，根据服务器返回的数据，用 javascript 操纵页面的 html dom，把用户界面更新。图 1 是 ajax 往返过程的顺序图。


图 1. ajax 往返过程
　　现在您对 ajax 往返过程有了一个高层面的认识。下面我将放大其中的每一步骤，进行更详细的观察。如果过程中迷了路，请回头看图 1 —— 由于 ajax 方式的异步性质，所以顺序并非十分简单。

 

关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

标准 网站致力的规范