首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

事件处理、JavaScript 和 Ajax(4)

事件处理、JavaScript 和 Ajax(4)

技巧 2:Ajax 化与非 Ajax HTTP 请求相比,Ajax 请求通常需要额外执行两个步骤:在服务器中对表单进行局部处理,接着在客户机上对 Document Object Model (DOM) 进行局部呈现。
局部处理和呈现通过将 JSF 生命周期分解为两个不同的逻辑部分 —— 执行和呈现,JSF 2 现在支持局部处理和局部呈现。图 5 突出显示了执行部分:
图 5. JSF 生命周期的执行部分图 6 突出显示了 JSF 生命周期的呈现部分:
图 6. JSF 生命周期的呈现部分将生命周期划分为执行和呈现部分的原理很简单:您可以指定 JSF 在服务器上执行(处理)的组件,以及在返回 Ajax 调用时 JSF 呈现的组件。将使用 JSF 2 中新增的 <f:ajax> 实现这个目的,如清单 7 所示:
清单 7. 一个 Ajax 缩放菜单
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<h:selectOneMenu id="menu"
     value="#{cc.parent.attrs.location.zoomIndex}"
     style="font-size:13px;font-familyalatino">

  <f:ajax event="change" execute="@this" render="map"/>
  <f:selectItems value="#{places.zoomLevelItems}"/>
              
</h:selectOneMenu>            
      
<m:map id="map"...>




对  中的第一行所示的菜单进行了修改:我从  中删除了 onchange 属性,并添加了一个 <f:ajax> 标记。这个 <f:ajax> 标记指定了以下内容:
  • 触发 Ajax 调用的事件
  • 在服务器上执行的组件
  • 在客户机上呈现的组件
当用户从缩放菜单中选择一个菜单项时,JSF 将对服务器发出 Ajax 调用。随后,JSF 将菜单传递给生命周期的执行部分(@this 表示 <f:ajax> 周围的组件),并在生命周期的 Update Model Values 阶段更新菜单的 zoomIndex。当 Ajax 调用返回后,JSF 呈现地图组件,后者使用(新设置的)缩放指数重新绘制地图,现在您就有了一个 Ajax 化的缩放菜单,其中添加了一行 XHTML。
但是还可以进一步简化,因为 JSF 为 event 和 execute 属性提供了默认值。
每个 JSF 组件都有一个默认事件,当在组件标记内部嵌入 <f:ajax> 标记时,该事件将触发 Ajax 调用。对于菜单,该事件为 change 事件。这意味着我可以删除  中的 <f:ajax> 的 event 属性。<f:ajax> 的 execute 属性的默认值是 @this,这表示围绕在 <f:ajax> 周围的组件。在本例中,该组件为菜单,因此还可以删除 execute 属性。
返回列表