JSF2中輕松使用ajax 

http://blog.csdn.net/thinkhlin_down/archive/2010/04/15/5488370.aspx

1：使用JSF2提供的ajax的理由

       js兼容性：寫過web應用的朋友都知道，js在各個瀏覽器中的不兼容是出了名的，在IE上運行好好的放到firefox下可能沒法正常運行，或者相反的情況在firefox下正常運行的代碼在IE上無法運行，甚至在IE6下能正常運行的代碼在IE8里面不能正常運行，但是JSF2.0中將所有的不一致都隱藏起來了，開發者或者使用者無需關心這些惱人的問題。

       ajax框架的選擇：當前有許多流行的ajax框架，如jquery，json，dwr等等，但是這些都必須額外添加支持庫而且有些必須進行繁雜的配置，對于注重應用的開發人員來說很不利（別說用那些很多配置的顯示你很高手，那都是自我安慰的一種方式，誰不喜歡簡單的事情！難不成你用這些理由跟你們老板理論去，那你就等著卷鋪蓋走人吧！），而JSF2是內置了ajax功能，能滿足我們絕大部分的需求，所以可以大大的簡化和加速我們項目的進度。

2：最簡單的ajax功能

       如今流行的ajax框架非常多，比如jquery，dwr等之類的，但是這些ajax框架（或類似腳本庫）都是單獨提供的，而且使用起來還是相對麻煩，而JSF2提供的ajax功能實現非常簡單，甚至一句js代碼都不用寫就可以完成頁面的無刷新功能。

以下是一個非常簡單的一個使用JSF2標簽并帶有ajax功能的代碼

<h:commandButton action="#{testAjax.validateUser}">

       <f:ajax render="id1">

</h:commandButton>

我們在上面的例子中并沒有看到任何的js代碼，其實JSF2標簽幫我們封裝好了所有的操作，在生成頁面的時候會進行相應的處理，具體的屬性介紹我們下面的內容會詳細講解。

3：以上的例子只是一個非常簡單的功能，能完成一些基本的ajax功能，我們現在編寫一個相對完全一點的示例：

<h:commandButton action="#{testAjax.validateUser}">

       <f:ajax render="id1 id2" execute="id3 id4" event="blur" onevent="showFire" />

</h:commandButton>

屬性說明：

屬性名稱	屬性說明
render	頁面上需要刷新的元素的id，如果有多個可以用空格隔開，示例中就是有id1 id2，中間使用空格隔開，前提是我們的元素必須要有一個id屬性，比如一個輸入框<input type="text" id="id1" value=""/>
execute	需要提交給服務器端的參數的id，如果有多個用空格隔開，比如說更新id1時，需要傳入一個輸入框id為id3的元素，那么可以用execute="id3"，其實還可以使用@符號來操作，有@this表示當前元素；@form表示此元素所在表單（form）下的所有的元素；@none表示不提交任何元素；@all表示提交頁面所有JSF的可提交的元素。
event	指ajax事件觸發的條件，比如我們上一例子就是使用了event="blur",表示當blur事件發生時觸發ajax事件(blur只是舉例，可以使用的有action, blur, change, click, dblclick, focus, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup, select)，如果沒有指定則使用默認的事件觸發，默認的事件是action，action其實不是js中有的事件，是指任何方式觸發調用，如點擊也能觸發action事件。
onevent	指ajax事件相應完成后執行的js函數，比如說我們上面示例代碼有onevent="showFire"，這個函數帶可以帶至多一個參數，這個參數是ajax時間觸發后返回的結果DOM對象（并不是我們調用java代碼中的方法返回的參數），在ajax事件響應完成后即調用showFire這個函數，示例如下代碼 <script type="text/javascript">        function showFire() {               alert("回調函數事件已經觸發");        } </script> <h:form>        <h:outputText id="id1" value="#{ajaxTest.number}"/>        <h:commandButton value="數字增加" action="#{testAjax.count}">               <f:ajax render="number" onevent="showFire"/>        </h:commandButton> </h:form> ... Java代碼 ... @ManagedBean @ViewScoped public class AjaxTest implements Serializable {         private int number;     public void count() {         number++;     }        //getter and setter        ... }
listener	此屬性是指ajax事件觸發后調用的managedbean的方法，其實作用很明顯，比如說我們這里不用按鈕之類的標簽，只是需要當我們輸入某個數據的時候觸發一個ajax事件，這個屬性就顯得很重要了。示例如下： JSF頁面代碼 ...     <h:head>         <title>JSF2.0 ajax測試</title>         <script type="text/javascript">             var temp = 0;             function showFire() {                 alert("響應函數！");             }         </script>     </h:head>     <h:body>         <h:form>             <h:outputText id="id1" value="#{ajaxTest.number}"/>             <h:inputText>                 <f:ajax render="id1" event="keyup" onevent="showFire" listener="#{ajaxTest.count}"/>             </h:inputText>         </h:form>     </h:body> ... Java代碼 ... @ManagedBean @ViewScoped public class AjaxTest implements Serializable {         private int number;     public void count() {         number++;     }        //getter and setter        ... } listener屬性的代碼作用就是調用AjaxTest類中的count方法，使數字加一，我們也可以延伸一下作用，比如說注冊信息的時候，輸入的用戶名檢查是否重復，當我們輸入的時候就實時檢測即可。

注：此回調函數showFire會被執行三次，但是通過監控軟件ajax事件觸發后只提交了一次數據請求，所以具體的問題出現在客戶端，由于資料相對較少暫時不做解釋。