Ajax4jsf User Guide Chapter 3.Ajax4jsf 框架中的基本概念

该框架被实现为使用一个组件库来添加ajax功能到你的页面中,而不要写js代码或者使用新的Ajax装饰器替换你已经做好的JSF组件. Ajax4jsf 具有页面范围(page-wide)的Ajax支持,而不是传统的组件范围(component-wide)的ajax支持.  这意味着你可以在页面中定义一个激活Ajax请求的事件,和当根据客户端事件触发Ajax请求来改变服务器端数据后 如何使用JSF组件树来同步显示JSF页面.

下面的图片展示了它是如何工作的:

Ajax4jsf 允许你定义(意味着通过JSF tags)你希望通过AJAX请求更新的JSF页面的不同部分并且提供的一些发送AJAX请求到服务器端的选项,除了你的JSF页面于常规的JSF有点不同外,没有其他的不同了,这是一个你不需要写JS代码和XMLHttpRequest对象的天堂.

结构概览

下面的图片展示了Ajax4jsf 框架的一些重要的元素

Ajax 过滤器(Filter).  为了得到应用 Ajax4jsf 的好处 你必须在在 web.xml 文件中注册一个Ajax Filter.该过滤器有一些职责. Ajax Filter 可以识别多种ajax请求种类. 图片3的序列图展示了在处理常规页面和AJAX请求页面的不同之处.在开始的情况下,所有的JSF树将被编码(encoded). 在第二种情况下依据AJAX 区域(region) (你可以通过使用<a4j:region> tag来定义AJAX region  )的大小(size). 就如你看到的,第二种情况下 过滤器将解析AJAX响应的内容,在它被发送到客户端以前, 查看下面的图片来理解这两种方式:

在这两种情况下, 你的程序所需要的静态或者动态资源的信息将被注册到ResourseBuilder 类中.当请求一个资源时(图片4),AJAX filter 检查资源缓存(Resource Cache)看看这个资源是否存在,如果存在该资源将被送到客户端.否则过滤器将在ResourceBuilder中搜索注册的资源. 如果该资源被注册了,AJAX filter将发送一个请求到 ResourceBuilder来创建[create (deliver)]该资源.下面的图片显示了请求资源的处理过程.

Ajax动作组件(Action Components).  有3个Ajax动作组件: AjaxCommandButton, AjaxCommandLink 和 AjaxSupport. 你可以使用他们从客户端发送AJAX请求.

Ajax容器 (Containers).  AjaxContainer 是一个接口,该接口描述了在Ajax请求中应该被解码(decoded)的JSF页面中的一个区域.AjaxViewRoot 和 AjaxRegion 实现了该接口.

JavaScript引擎 (Engine).  Ajax4jsf JavaScript 引擎 在客户端运行. 它知道如何根据来自于Ajax响应的信息来更新你JSF页面上的不同的区域. 程序开发者不需要直接使用这里的JavaScript代码.它自动的下载到客户端.

如何做...

发送一个 AJAX 请求

从JSF页面发送ajax请求有不同的方法. 你可以使用 <a4j:commandButton>, <a4j:commandLink> 或者 <a4j:support> tags.

所有的这些标签隐藏了在创建一个XMHttpRequest 对象和发送ajax请求所需要的JavaScript 活动.并且, 他们允许你选择页面中那个JSF组件被重新渲染(re-rendered) 来表现Ajax响应的结果 (你可以列出他们的 IDs 在“reRender” 属性中).

<a4j:commandButton> 和 <a4j:commandLink> tags 用来在 “onclick” JavaScript 事件中发送Ajax请求.

在你选择JS事件(“onkeyup”, “onmouseover”, etc)时, <a4j:support> tag 允许你在普通的JSF组件中添加Ajax 功能和发送ajax请求.

提供Ajax请求功能的大部分重要的属性如下:

• reRender 属性 - 就如我们前面提到过的,在一个Ajax响应到来时重新渲染(reRendered)组件.

• RequestDelay 属性 – 用来调节请求的频率.

      <h:inputText size="50" value="#{bean.text}">
          <a4j:support event="onkeyup" RequestDelay=”3”/>
      </h:inputText>
              

  因此每一个来自于键盘事件的请求将会延迟3 ms ,来减少请求的次数.

• EventsQueue – 储存下一个请求的队列的名字. 队列帮助阻止下一个请求知当前的处理完.

• LimitToList 用来控制更新的区域. 设置为true – 将更新仅在reRender list中的区域, 如果为false,将更新所有Output Panels区域.

• ajaxSingle 如果设置为false用来指定发送请求的区域  – 如果为true则发送整个区域
  

  决定发送什么

  你可能描述了一个你决定发送到服务器的页面区域.当你发送ajax请求的时候,通过这种方式你可以控制JSF View的那个部分在服务器端被解码(decoded).

  描述你JSF页面上的一个Ajax区域的最容易的方法是什么都不做.这是因为在<f:view> 和 </f:view> tags 中的内容在默认值的情况下认为是ajax区域.

  通过使用<a4j:region> tag你可以在一个JSF页面中定义多个Ajax区域 (they can even be nested).

  如果你希望渲染ajax响应以外的区域,那么renderRegionOnly属性值应该设置为false.否则ajax更新被限制在活动区域的元素中.

  决定改变什么

  在大部分情况下都可以使用 “reRender”中的ids来定义需要更新的 “AJAX zones”.

  但是如果你的页面包含<f:verbatim/> tag(你希望在ajax响应中更新它的内容)你不可以使用这种方式.

  我们在上面描述的<f:verbatim/> tag 的问题涉及到JSF组件的transientFlag值. 如果该标记的值为true,这个组件不能参与保存和恢复组件树(saving or restoring)的处理过程.

  为了提供一种解决这个问题的方法, Ajax4jsf 利用<a4j:outputPanel> tag定义了一个output panel . 如果你把<f:verbatim/> tag放在output panel中, 那么在AJAX 响应中 <f:verbatim/> tag和其他panel中的child tags中的内容可以被更新 .有两种方法来控制它:

  • 设置“ajaxRendered” 属性值为true.

  • 设置动作组件的“reRender” 属性值为output panel的 ID.