学习坊广告 网站建设咨询电话0711-3202220 、 QQ:215665888        将学习坊设为主页     广告赞助QQ:410899793     主页申请

面向Java程序员的Ajax:构建动态Java程序

来源:网络 【www.cn0711.net】   作者:未知【学习坊转】 [字体: ]
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 往返过程的顺序图。


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



 

录入:学习坊

查看对 面向Java程序员的Ajax:构建动态Java程序 的评论 【 发表见解 】 【 查看见解 】 【 打印资料 】  
上一篇:Weblogic Portal中实现AJAX编程之架构
下一篇:利用AJAX技术开发应用程序实战
百度中>“面向Java程序员的Ajax:构建动态Java程序”相关内容 google中>“面向Java程序员的Ajax:构建动态Java程序”相关内容
雅虎中>“面向Java程序员的Ajax:构建动态Java程序”相关内容 搜狗中>“面向Java程序员的Ajax:构建动态Java程序”相关内容
中搜中>“面向Java程序员的Ajax:构建动态Java程序”相关内容 爱问中>“面向Java程序员的Ajax:构建动态Java程序”相关内容