JSF2中輕松使用ajax 

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

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

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

2：最簡(jiǎn)單的ajax功能

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

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

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

       <f:ajax render="id1">

</h:commandButton>

我們?cè)谏厦娴睦又胁](méi)有看到任何的js代碼，其實(shí)JSF2標(biāo)簽幫我們封裝好了所有的操作，在生成頁(yè)面的時(shí)候會(huì)進(jìn)行相應(yīng)的處理，具體的屬性介紹我們下面的內(nèi)容會(huì)詳細(xì)講解。

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

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

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

</h:commandButton>

屬性說(shuō)明：

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

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