JSF2中輕松使用ajax 

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

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

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

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

2：最簡單的ajax功能

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

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

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

       <f:ajax render="id1">

</h:commandButton>

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

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

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

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