Ajaxを使う
今回はAjaxの機能をみてみます。
一番簡単な処理として、 あるリンクを押下すると、サーバ処理で文字列を生成し、 その結果を指定の場所に出力する。
というものを作ってみます。
JSFのAjax処理では、まずイベントの起点となるタグに対して、 jsf:ajaxタグを指定するところから始めます。
準備として、非Ajaxの処理を作成しておきます。 更新ボタンを押下したら、サーバのOS名とメモリ使用量を出力する処理です。
<div> <h:outputText value="#{responseBean.serverInfo}"/>:: <h:commandLink action="#{responseBean.updateServerInfo()}" value="更新"></h:commandLink> </div>
public void updateServerInfo() { MemoryMXBean mbean = ManagementFactory.getMemoryMXBean(); MemoryUsage heapUsage = mbean.getHeapMemoryUsage(); long init = heapUsage.getInit(); long used = heapUsage.getUsed(); long committed = heapUsage.getCommitted(); long max = heapUsage.getMax(); this.serverInfo = System.getProperty("os.name").toLowerCase(); this.serverInfo += String.format("[init = %s, used = %s, committed = %s, max = %s.]", init, used, committed, max); }
実行するとこんな感じになります。
ではAjax化してみます。
<div> <h:outputText id="serverInfo" value="#{responseBean.serverInfo}"/>:: <h:commandLink action="#{responseBean.updateServerInfo()}" value="更新"> <f:ajax render="serverInfo"></f:ajax> </h:commandLink> </div>
以上です。 イベントの起点となるタグにajaxタグを指定し、 更新対象となるタグのidを指定してあげることでajax処理になります。
IEのデバッガでネットワークを調べると、通信の種別がXMLHTTMLResponceとなっており、さきほどと処理が異なっているのがわかります。
ajaxタグを指定した箇所は以下の様にhtml出力されています。
<a name="j_idt14:j_idt17" id="j_idt14:j_idt17" onclick="mojarra.ab(this,event,'action',0,'j_idt14:serverInfo');return false" href="#">更新</a>
mojarra.abというのが肝なようです。こんなscripを作った覚えはないのですが、 JSFページを読み込むときに、jsf.jsと呼ばれるjsファイルを読み込んでいるため、 このJavascriptと連動して、一連のAjax処理が実現されていると考えられます。
今日はここまで。