技术开发 频道

在Java EE 6中使用JSF 2.0简化页面制作

  JSF 2.0对Ajax的支持

  JSF 2.0天生就支持Ajax,利用Ajax技术,Web应用程序在后台以异步的方式从服务器获取数据。支持Ajax后,允许页面局部刷新,允许选择视图中的一个组件进行处理而不影响其它组件。

  要在JSF中使用Ajax,需要访问有资源标识符的JavaScript资源jsf.js,它存在于javax.faces资源库中,包含让JSF与Ajax交互的JavaScript API,JavaScript API由一组标准的JavaScript函数组成,使JavaServer Faces框架中的Ajax操作变得简单了,你几乎不用直接包括这个文件,当你使用任何开启Ajax的标签或组件时,JSF会自动包括它。然后你就可以使用<f:ajax>标签或调用JavaScript API中的函数了。

  下面是一个<f:ajax>使用标签的示例:

<h:commandButton id="button1">
      
<f:ajax execute="..." render="..."/>
    </h:commandButton>

  这里的<f:ajax>标签是嵌套在<h:commandButton>标签内的,这样会结合在execute属性中指定的Ajax行为和<h:commandButton>标签呈现的命令按钮,你也可以指定一个event属性来识别JavaScript DOM事件,如果你不指定event属性,JSF使用组件的默认行为,这里的默认行为是onclick,因此JSF结合execute属性中指定的Ajax请求和呈现按钮的onclick事件。用户点击该按钮时,JSF提交Ajax请求给服务器。

  使用<f:ajax>标签的一个好处是不用在页面中指定载入jsf.js,它会自动为你载入,相比之下,如果你调用JavaScript API,首先需要使用<h:outputScript>让jsf.js对当前视图可用,例如:

<f:view contentType="text/html"/>
      
<h:head>
        
<meta...
        <title...
      </h:head
>
      
<h:body>
        ...
        
<h:outputScript name="jsf.js" library="javax.faces" target="body"/>
        ...      
</h:body>
      ...  

  然后才可以使用JavaScript API中的函数产生Ajax请求。例如,你使用JavaScript函数jsf.ajax.request向服务器发送一个请求,如下面的代码:

<h:commandButton id="button1" value="submit">
    onclick="jsf.ajax.request(this,event);" />

  代码包括一个标签,它呈现为一个按钮,用户点击这个按钮时,向服务器提交一个Ajax请求。

0
相关文章