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

では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処理になります。

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処理が実現されていると考えられます。

今日はここまで。