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:

<h:form preparedId="false">
<div id="show">#{bean.var}</div>
<h:commandButton value="點擊"> 
    <f:ajax event="click" render="show" listener="#{bean.do}"/>
</h:commandButton>
</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標簽內即可，示例性代碼如下：

<f:ajax event="click" listener="#{bean.do}">
    <h:form>
        <h:commandButton value="click1"/>
        <h:commandButton value="click2"/>
        <h:commandButton value="click3">
             <f:ajax event="blur" lisrener="#{bean.do2}"/>
        </h:commandButton>
     <h:form>
 </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屬性為這幾個狀態,是示例性代碼如下：

　　

function fun(data){
    if(data.status == "begin"){

    }  
     if(data.status == "complete"){

    } 
    if(data.status == "success"){

    }  
 
}

　　總結：目前使用到的還不是很多，有些特殊使用方法還沒遇到過，比如有引入jsf的js庫，可以實現更為復雜的ajax操作，傳遞ajax參數等等。以后遇到再詳細了解。