开发中
页面重载循环是最大
个使用障碍对于 Java™ 开发人员来说也是个严峻挑战
在这个系列中作者 Philip McCarthy 介绍了种创建动态应用体验开创性方式Ajax(异步 JavaScript 和 XML)是种编程技术它允许为基于 Java Web 应用把 Java 技术、XML 和 JavaScript 组合起来从而打破页面重载范式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, _disibledevent=
cart.getAttribute("total");
}
到此
整个 Ajax 往返过程完成了但是您可能想让 Web 应用运行下查看实际效果(请参阅 下载 节)这个举例非常简单有很多需要改进的处例如我包含了从购物车中清除项目服务器端代码但是无法从 UI 访问它作为个好练习请试着在应用现有 JavaScript 代码的上构建出能够实现这个功能代码使用 Ajax
挑战就像任何技术
样使用 Ajax 也有许多出错可能性我目前在这里讨论问题还缺乏容易解决方案但是会随着 Ajax 成熟而改进随着开发人员社区增加开发 Ajax 应用经验将会记录下最佳实战和指南XMLHttpRequest
可用性Ajax 开发人员面临
个最大问题是:在没有 XMLHttpRequest 可用时该如何响应？虽然主要现代浏览器都支持 XMLHttpRequest但仍然有少数用户浏览器不支持或者浏览器安全设置阻止使用 XMLHttpRequest如果开发 Web 应用要部署在企业内部网那么可能拥有指定支持哪种浏览器权力从而可以认为 XMLHttpRequest 总能使用但是如果要部署在公共 Web 上那么就必须当心如果假设 XMLHttpRequest 可用那么就可能会阻止那些使用旧浏览器、残疾人专用浏览器和手持设备上轻量级浏览器用户使用您应用所以
您应当努力让应用“平稳降级”在没有 XMLHttpRequest 支持浏览器中也能够工作在购物车举例中把应用降级最好方式可能是让 Add to Cart 按钮执行个常规表单提交刷新页面来反映购物车更新后状态Ajax 行为应当在页面装入时候就通过 JavaScript 添加到页面只有在 XMLHttpRequest 可用时才把 JavaScript 事件处理
附加到每个 Add to Cart 按钮另种方式是在用户登录时检测 XMLHttpRequest 是否可用然后相应地提供应用 Ajax 版本或基于表单普通版本可用性考虑
有关 Ajax 应用
某些可用性问题比较普遍例如让用户知道他们输入已经注册了可能是重要沙漏光标和 spinning 浏览器常用反馈机制“throbber”对 XMLHttpRequest 不适用种技术是用“Now updating...”类型信息替换 Submit 按钮这样用户在等候响应期间就不会反复单击按钮了另
个问题是用户可能没有注意到他们正在查看页面某部分已经更新了可以使用区别可视技术把用户眼球带到页面更新区域从而缓解这个问题由 Ajax 更新页面造成其他问题还包括:“破坏了”浏览器后退按钮地址栏中 URL 也无法反映页面整个状态妨碍了设置书签请参阅 参考资料 节获得专门解决 Ajax 应用可用性问题文章服务器负载
用 Ajax 实现代替普通
基于表单 UI会大大提高对服务器发出请求数量例如个普通 Google Web 搜索对服务器只有个请求是在用户提交搜索表单时出现而 Google Suggest 试图自动完成搜索术语它要在用户输入时向服务器发送多个请求在开发 Ajax 应用时要注意将要发送给服务器请求数量以及由此造成服务器负荷降低服务器负载办法是在客户机上对请求进行缓冲并且缓存Cache服务器响应(如果可能话)还应该尝试将 Ajax Web 应用设计为在客户机上执行尽可能多逻辑而不必联络服务器处理异步
非常重要
是要理解无法保证 XMLHttpRequest 会按照分派它们顺序完成实际上应当假设它们不会按顺序完成并且在设计应用时把这点记在心上在购物车举例中使用最后更新时间戳来确保新购物车数据不会被旧数据覆盖(请参阅 清单 7)这个非常基本方式可以用于购物车场景但是可能不适合其他场景所以在设计时请考虑如何处理异步服务器响应结束语
现在您对 Ajax
基本原则应当有了很好理解对参和 Ajax 交互客户端和服务器端组件也应当有了初步知识这些是基于 Java Ajax Web 应用构造块另外您应当理解了伴随 Ajax 方式些高级设计问题创建成功 Ajax 应用要求整体考虑从 UI 设计到 JavaScript 设计再到服务器端架构；但是您现在应当已经武装了考虑其他这些方面所需要核心 Ajax 知识如果使用这里演示
技术编写大型 Ajax 应用复杂性让您觉得恐慌那么有好消息给您由于 Struts、Spring 和 Hibernate 这类框架发展把 Web 应用开发从底层 Servlet API 和 JDBC 细节中抽象出来所以正在出现简化 Ajax 开发工具包其中有些只侧重于客户端提供了向页面添加可视效果简便方式或者简化了对 XMLHttpRequest 使用有些则走得更远提供了从服务器端代码自动生成 Ajax 接口方式这些框架替您完成了繁重任务所以您可以采用更高级方式进行 Ajax 开发我在这个系列中将研究其中些Ajax 社区正在快速前进
所以会有大量有价值信息涌现在阅读这个系列下期的前我建议您参考 参考资料 节中列出文章特别是如果您是刚接触 Ajax 或客户端开发话您还应当花些时间研究举例源代码并考虑些增强它方式在这个系列
下篇文章中我将深入讨论 XMLHttpRequest API并推荐些从 JavaBean 方便地创建 XML 方式我还将介绍替代 XML 进行 Ajax 数据传递方式例如 JSON(JavaScript Object Notation)轻量级数据交换格式附件:Ajax-demo_and_document.7z(196K) 
最新评论