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

 　　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 }

　　总结：目前使用到的还不是很多，有些特殊使用方法还没遇到过，比如有引入jsf的js库，可以实现更为复杂的ajax操作，传递ajax参数等等。以后遇到再详细了解。