新年伊始

        如果您看过各种各样的购物车，您可能会发现至少有两点相同：

• 总有一个根据用户输入的数量来更新的按钮，用以重新计算总量、税和价格。
• 购物车中的商品条目都会提供一个链接以提供产品详细信息的页面。

        这里就有文章开始我们所提到的缺陷的实例。购物车仅当用户点击按钮时才会更新，而用户不得不转入其他页面以浏览产品的详细描述。而在 Ajax 的帮助下，用户体验可以得到大幅改进，因为只要数量发生变化总量就会自动更新，而产品详细信息可以在同一页面中得到显示（也许在指定区域，也许在一个弹出 窗口中）。

        在我们来了解一下这个例子，从而可以看到它是如何被构建的，如何使用 Ajax 加以修改的。

注意：从这时起，所有涉及的东西 (JavaServer Pages? [JSP?] 名称、组件 ID， 等等) 都是您可以下载的 AjaxSample 的应用程序。请保存AjaxSample.zip文件，之后使用 Project Interchange 格式将它导入 Rational Application Developer V7 。

购物车：旧的方式

        本例中的购物车使用三种 Java? beans： Product、CartItem 和 ShoppingCart。 您能够在 Project Explorer 中的 Java Resources 类下的 beans 包找到它们。

• Product 包括了站点销售的产品信息：ID、名称、描述、图片和价格。
• CartItem 跟踪购物车中每件商品的数量。
• ShoppingCart 记录了购物车条目列表(商品和数量对)； 计算总数，税和价格; 并且帮助用户根据 ID 查找商品。

        如图 8显示，cart.jsp是一种极为简单的购物车页面的实现方法。

        页面使用 dataTable 组件显示购物车中的所有条目。 Quantity 列使用 inputText 栏改变数量。在用户做出所有修改后，他们可以点击 Recalculate 按钮更新总量、税和价格。商品名称为用户提供了进入其他页面的链接以了解商品详细信息——product.jsp。 商品 ID 作为参数传递。（参见图 9。）

购物车：新的方式

        在这里，cartajax.jsp是相同的购物车页面，但它被重新设计了，利用 Ajax 改善了用户体验。新 cartajax.jsp (图 10) 和老 cart.jsp 有三点明显的不同：

• 没有 Recalculate 按钮。一旦用户焦点离开输入栏就会更新总量。
• 当用户鼠标指针移到商品名上时，商品描述会显示在弹出窗口中。
• 当用户点击商品链接时，商品的所有详细信息会显示在购物车下，而不用更新购物车本身。

        让我们看看这种变化如何发生的。为了解释的目的，这一页面使用了所有三类 Ajax 请求。而且，与本文开始仅使用 IDE 属性建立 Ajax 功能不同，这里您可以看到 Source 模式中的 JSF 标签。

去掉 Recalculate 功能

        不必使用 Recalculate 按钮，您将包括了总量、税、价格的面板使用 ajaxSubmitRequest 标签声明为 "Ajaxable" ，如列表 1所示。

<h:panelGrid id="totals" styleClass="panelGrid" columns="2" style="text-align:right;">  	<h:outputText id="text4" styleClass="outputText" value="Sub-total:"></h:outputText>  	<h:outputText id="textTotalPrice" value="#{cart.totalPrice}" styleClass="outputText">  		<hx:convertNumber type="currency" />  	</h:outputText>  	... other output components ...  </h:panelGrid>   <hx:ajaxRefreshSubmit id="refreshTotals" target="totals"></hx:ajaxRefreshSubmit>

        您这里正使用 Ajax 的 Submit 类型，因此不需传递任何参数，因为全部购物车表格将被提交。这就使得服务器端代码可以使用所有输入栏中的数量。这一面板和 Ajax 标签由 ID 和目标属性连接在一起，它们在本例中是粗体突出的（列表 1）。 一旦用户焦点离开输入栏，总数就会更新。因此，您可以使用 inputText 组件的 onblur 事件初始化请求：

<h:inputText id="textQuantity1" value="#{varproducts.quantity}" styleClass="inputText"   		size="3">  	<hx:behavior. event="onblur" behaviorAction="get" targetAction="totals">  	</hx:behavior>  </h:inputText>

        hx:behavior. 标签是一种十分有效的连接预定义 JavaScript. 功能和客户端 JSF 组件事件的方法。本例中，您使用的是 inputText 组件（hx:behavior. 是 h:inputText 的子集）的 onblur 事件（事件属性）， 并且希望执行totals组件的 get 行为。这里，Totals是需要更新的面板，get 行为表示“获取内容”，因此：使用 Ajax 更新。

注意：选择cartajax.jsp然后Run On Server会发现浏览器中的这些标记工作在一起。

        一旦焦点离开表中任意输入栏，就会运行与 onblur 事件联系的 JavaScript. 代码。 它会发现页面上的 Totals 组件，核实具有与其联系的 ajaxRefreshSubmit 组件，之后通过给服务器发送表格的形式初始化 Ajax POST 请求。 当服务器响应时，Totals 面板会更新为来自于服务器的新内容。

增加弹出描述

        下一个例子使用无模型 Dialog 组件(Rational Application Developer V7 中的新组件)显示购物车中的条目描述。由于 Dialog 是一个面板，它的内容更新可使用与 panelGroup 和 panelGrid 组件相同的 Ajax更新方式(列表 3)：

<hx:panelDialog type="modeless" id="descriptionPopup" styleClass="panelDialog"  		style="background-color: #fff9ca" movable="false"  		align="relative" valign="relative" saveState="false"  		showTitleBar="false">  	<h:outputText id="textDescription1d"  		value="#{cart.selectedProduct.description}"  		styleClass="outputText">  	</h:outputText>  </hx:panelDialog>  <hx:ajaxRefreshRequest id="showPopup" target="descriptionPopup"	  	params="$$AjaxROW$$form1:tableEx1:itemid"></hx:ajaxRefreshRequest>

        这与之前的标签十分相似，除了这次使用 Ajax 的 Refresh 类型。 因此，您需要为服务器传递一个参数 -- 特别是您想看的商品信息的购物车条目 ID。因为您的条目在一个 dataTable 中， 而JSF仅记录表中每个组建的一个实例，因此必须让服务器端代码知道您需要使用active行中的组件值，表示这一行产生请求。为实现它， 需要在ID组件前放入 $$AjaxROW$$。

        为了当用户停留在条目上时显示或隐藏对话框，您可以使用 Link 组件的 onmouseover 和 onmouseout 事件， 正如列表 4所示：

<h:outputLink id="link1">  	<h:outputText id="textName1" value="#{varproducts.product.name}"  			styleClass="outputText">  	</h:outputText>  	<hx:behavior. event="onmouseover" behaviorAction="get;show"  			targetAction="form1:descriptionPopup;form1:descriptionPopup"></hx:behavior>  	<hx:behavior. event="onmouseout" behaviorAction="hide"  			targetAction="form1:descriptionPopup"></hx:behavior>  </h:outputLink>

        当用户鼠标指针经过条目上时，你想更新对话框内容（get行为）并且显示这个对话框（show 行为）。 当鼠标指针离开条目时，你想隐藏这个对话框（hide 行为）。

在同一页面显示商品详细信息

        最后一步改进就是在同一页面的购物车下显示商品详细信息。 您已有显示一个条目的详细信息的页面：product.jsp。 因此， 您不必重新设计与实现 cartajax.jsp 中相似的标记。 您可以在第三类 Ajax 请求的类型的帮助下使用现有的 JSP 文件：External 请求 （参见列表 5）：

<h:panelGrid id="product" width="700" style="margin-top: 20px;"  		styleClass="panelGrid">  	<h:outputText id="text8" styleClass="outputText"  		value="Click on a product to see its details here."  		style="color: gray; font-size: 10pt">  	</h:outputText>  </h:panelGrid>  <hx:ajaxExternalRequest id="showDetails" target="product"  		href="product.faces" source="product"  		params="$$AjaxROW$$form1:tableEx1:itemid">  </hx:ajaxExternalRequest>

        您可能已经意识到这种模式： 一个面板组件和一个关联的 Ajax 标记。 panelGrid 产品如同存储商品的详细信息一样。如果用户没有选择商品，她仅仅为用户解释页面中各部分的用途。当用户点击了一个商品，面板内容就会根据 panelGrid 更新，与 product.jsp 文件中定义的相似（href 属性）。

        这时，Link 组件的onclick 事件初始化了 Ajax 请求，如列表 6所示：

<h:outputLink id="link1">  	<h:outputText id="textName1" value="#{varproducts.product.name}"  		styleClass="outputText">  	</h:outputText>  	<hx:behavior. event="onclick" behaviorAction="get;stop"  		targetAction="product">  	</hx:behavior>  </h:outputLink>

        行为中的第二个动作 (stop) 是为了阻止浏览器中的泡沫事件。您不会想本例中看似正常的链接仅仅初始化了一个 Ajax 请求后就停止了处理事件。

        您需要做的最后一点改变是如何使当前所选的商品 ID 传递到服务器端。在购物车的 cart.jsp 版本中（此时使用一个链接导向另一页面），您将 ID 定义为连接参数(列表 7)：

<h:outputLink id="link1" value="product.faces">  	<h:outputText id="textName1" value="#{varproducts.product.name}"  		styleClass="outputText">  	</h:outputText>  	<f:param name="itemid" id="param1" value="#{varproducts.product.id}" />  </h:outputLink>

        但使用 Ajax 时， 您不再需要真实的连接，只需使用 Ajax 标记的 params 属性传递组件值。因此，不必在连接中包含参数，您只需创建一个包括了紧邻连接的 ID 的组件值，且将这一组件作为 Ajax 参数（参见列表8）：

<h:outputLink id="link1">  	<h:outputText id="textName1" value="#{varproducts.product.name}"  		styleClass="outputText">  	</h:outputText>  </h:outputLink>  <h:inputHidden id="itemid" value="#{varproducts.product.id}" />    <hx:ajaxExternalRequest id="showDetails" target="product"  		href="product.faces" source="product"  		params="$$AjaxROW$$form1:tableEx1:itemid">  </hx:ajaxExternalRequest>

        完成了这个改变，您就完成了对购物车的修改。