PDF《结合使用 Ajax 和WebSphere Commerce》

? 版权所有?IBM 公司?2007 商标 结合使用 Ajax 和WebSphere Commerce 第1页,共13 结合使用 Ajax 和WebSphere Commerce Marco Deluca (madeluca@ca.

ibm.com) 解决方案架构师 IBM Canada Frances Mullally ([email protected]) 信息开发人员 IBM

2007 年2月26 日 本教程提供一系列快速任务以结合使用 Ajax 技术和 WebSphere Commerce. 它还提供有关如何 使用完整测试环境来启用 Ajax 动态缓存的说明. 引言 异步 JavaScript 和XML (Ajax) 是一组结合使用的技术,用作创建交互式 Web 应用程序的 Web 开发技 术.使用 Ajax,与加载网页不同,浏览器加载一个显示用户所见页面的 Ajax 引擎(用JavaScript 编写),然后与服务器通信.Ajax 引擎允许用户与应用程序的交互同时进行,而不管服务器的操作如 何. 当与 WebSphere Commerce 结合使用时,Ajax 可以消除客户在等待服务器操作时盯着浏览器窗口和 沙漏图标所花的时间.客户通过浏览器发出请求,Ajax 作出响应并从 WebSphere Commerce Server 获取信息.本教程提供了小部件 (widget),开发人员可使用它们来增强 WebSphere Commerce v5.6.1 应用程序的功能.本教程还提供有关如何使用完整测试环境来启用 Ajax 动态缓存的说明. 请访问 Ajax 技术资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻.任何新信息都能在这里找到. 本教程提供了一些示例,您可以在这些示例中结合使用 Ajax 和WebSphere Commerce.这些示例展 示了简单和复杂的场景,其中 Ajax 通过消除页面刷新为客户带来了更好的效果,从而为他们提供了 即时结果: ?? 场景一――菜单填充 ?? 场景二――信用检查 ?? 场景三――快速 SKU 查找 通过这些场景,您将了解如何使用显示 (css) 和Java 脚本来调用即时服务器调用,而无需进行传统的 网页刷新.还将检查用于提高性能的缓存 Ajax 请求.注意:本教程中的场景可能无法直接适用于您 的业务需求.本教程的目的是提供一个示例包,以形成 Ajax 实现的基础. developerWorks? ibm.com/developerWorks/cn/ 结合使用 Ajax 和WebSphere Commerce 第2页,共13 场景一――菜单填充 本场景展示如何填充给定菜单的用户输入.当选中国家/地区时,将通过 Ajax 调用服务器来检索所选 国家/地区的州或省/市/自治区名称,以便填充州或省/市/自治区下拉菜单.如果您的存储仅服务于 一两个国家/地区,则更有效的方法是完全绕过 Ajax 调用,并在加载初始页时加载所有州或省/市/自 治区.本例中还演示了用于提高性能的缓存.图1显示了在选中国家/地区时,州或省/市/自治区字 段中即时显示的选项. 图1. 菜单填充 场景二――信用检查 本场景演示了在从后端系统为用户检索数据时,通知用户等待的流畅而友好的方式.Web 服务和 MQ 消息调用并非始终是即时的,有时要求用户等待.在传统的方法中,用户单击某个链接,等待 发送一个同步消息,并在网页返回到用户之前等待接收消息.在网络繁忙时,请求的时间可能比预 期的时间长,这可能会提示用户单击他们浏览器上的 刷新 按钮.这样可能会导致服务器再转过来 处理另一个请求,从而减慢了处理速度.在此场景中,会重绘网页并即时通知用户等待.接着,会 将一个请求发送到 MQ 服务器,以便为特定用户获取数据(在本例中为信用数据).在返回结果 时,会将结果立即显示出来.如果超过设置的时间或出现错误,将显示一条错误消息,并向用户显 示刷新按钮.图2显示了在从服务器检索客户的信用检查信息时,他们将看到的内容. ibm.com/developerWorks/cn/ developerWorks? 结合使用 Ajax 和WebSphere Commerce 第3页,共13 图2. 信用检查 场景三――快速 SKU 查找 此场景更为复杂一些,适用于较小的名单列表. 在此场景中,用户在 SKU 文本区域键入两个字符 (可配置 #),Ajax 调用帮助用户查找 SKU.每额外输入一个字符都将过滤缩小 SKU 列表,而无需 向服务器执行进一步请求. 缓存这些查找结果可以提高性能.图3显示了客户在输入部分 SKU 编号 时,他们可以看到的选项. 图3. 快速 SKU 查找 部署资产 部署资产涉及将所有 Ajax 资产移动到您的系统上.要将 Ajax 资产移动到您的系统,请执行下列步 骤: developerWorks? ibm.com/developerWorks/cn/ 结合使用 Ajax 和WebSphere Commerce 第4页,共13 1. 将命令和 Bean 导入到您的 WebSphere Commerce 系统. 2. 加载数据库资产. 3. 加载访问控制策略. 4. 加载信用检查请求和响应信息. 将Ajax 资产导入 WebSphere Commerce 结合使用 Ajax 和WebSphere Commerce 的第一步涉及导入所有命令、Bean 和将资产存储到您的 WebSphere Commerce Developer 工作区.要导入存储资产,请执行下列步骤: 1. 将Ajax.zip 下载到 WebSphere Commerce 所在的计算机上. 2. 将文件解压缩到所选目录. 3. 在WebSphere Studio Application Developer 中,打开 Java Perspective:Window ->