JSF中使用f:ajax标签无刷新页面改变数据

浏览数：35 / 时间：2015年06月09日

　　ajax本是用在前端的一种异步请求数据的操作，广泛用于js中，一般的js框架如jq都有被封装好的方法，用于发起异步请求操作。异步操作可以增强用户体验和操作，越来越多的程序都在使用ajax。JSF的facelets内置了一个ajax标签，可用于简单的ajax操作。

　　f:ajax 有几个常用属性，分别是：event、listener、render。

1、event：event 对应一个js事件名，该事件名省略了开头的”on“字符，例如点击事件是onclick，那么只需要填入click即可。类似事件还有obblur、onkeyup、onmouseover等等。

2、listener：lisetener为指定一个ajax事件，当前事件需要执行bean中的什么方法。实际调用bean中的方法即可。

3、render：render内填入一个需要渲染的组件id。ajax实现异步操作的目的就是无刷新页面显示数据，那么当返回数据时，这些数据需要显示在那个区域，给该区域指定一个　　id，和render关联即可，这里可以填入多个id，用空格隔开。

示例性代码如下：

a.xhtml:

1 <h:form preparedId="false">
2 <div id="show">#{bean.var}</div>
3 <h:commandButton value="点击"> 
4     <f:ajax event="click" render="show" listener="#{bean.do}"/>
5 </h:commandButton>
6 </h:form>

bean.java:

 private String var;

public void setVar(String var){
  this.var = var;          
}

public String getVar(){
  return var;  
}

public void do(){
  var="hello";      
}

上面的代码中，当在页面点击按钮时，会触发bean中的do方法，进而改变var的值，通过ajax的render属性指定刷新id为“show”的区域。

jsf ajax还可以与一组组件关联起来，形成ajax组，只需要把一组组件内置于ajax标签内即可，示例性代码如下：

1 <f:ajax event="click" listener="#{bean.do}">
2     <h:form>
3         <h:commandButton value="click1"/>
4         <h:commandButton value="click2"/>
5         <h:commandButton value="click3">
6              <f:ajax event="blur" lisrener="#{bean.do2}"/>
7         </h:commandButton>
8      <h:form>
9  </f:ajax>

　　以上代码在第三个按钮中还用了一个ajax标签。ajax组件可以这样嵌套使用，从最近的地方开始执行。

　　jsf的ajax操作广泛用于字段验证方面，通过事件向bean传递数据，一般input类型标签使用validator属性指定验证方法，此验证方法带有3个参数，分别是FacesContext、UIComponent和一个Object类型数据，该object即为输入框内的值。

　　ajax还有一个onevent属性，该属性只能填入一个js方法。这个js方法会被调用3次，分别是三个状态："begin、success、complete"，即对于ajax请求的三个状态：请求之前、呈现响应、成功调用。js方法有一个参数，参数的status属性为这几个状态,是示例性代码如下：

 1 function fun(data){
 2     if(data.status == "begin"){
 3 
 4     }  
 5      if(data.status == "complete"){
 6 
 7     } 
 8     if(data.status == "success"){
 9 
10     }  
11  
12 }