Asynchronous JavaScript + XML (AJAX) という開発手法を利用すれば、ユーザーが編集する部分だけに限って、サーバーとの間で情報を中継する Web ページを作成でき、ページの残りの部分は表示させたままにしておくことができます。この手法を利用することで、ユーザーの操作の度にページ全体を再ロードする場合に比べて、Web アプリケーションを高速かつ効率的に実行できるようになります。EGL 制御の JSP ファイルをセットアップして、JSF ハンドラーの onPreRenderFunction を呼び出し、特定の更新内容のみをページに提供します。
更新要求を完了させるために、JSF ハンドラーがページからの情報を必要とする場合は、その要求にパラメーター (複数可) を追加することができます。JSF ハンドラーは、それらのパラメーターを要求とともに受け取ります。 ただし、前述のとおり、JSF ハンドラー内の変数は、その変数がバインドされているコントロールの新しい値には更新されません。詳しくは、 更新要求によるページの更新を参照してください。
J2EELib.getQueryParameter() システム関数は、パラメーターを AJAX 要求から取得します (パラメーターが存在する場合)。また、この関数を使用すると、$$ajaxmode パラメーターの値を検査することにより、AJAX 更新要求の結果または実行依頼要求の結果のどちらとして onPreRenderFunction 関数が呼び出されたかかを判別することもできます。 NULL 以外の値であれば、この関数は AJAX 更新要求またはサブミット要求の結果として呼び出されたということになります。
if (J2EELib.getQueryParmeter("$$ajaxmode") == null)
//AJAX 更新要求とサブミット要求、いずれの結果でもありません。
//AJAX 外部要求の結果だと思われます。
else
//AJAX 要求の結果です。
end
この例では、AJAX 更新要求を使用して、電卓のような簡単な数学演算を実行します。入力コントロールが 2 つと、数学演算を含むコンボ・ボックスが 1 つ、ページ上に表示されます。AJAX 要求は、コンボ・ボックスによって起動され、選択された演算と 2 つの入力コントロールを JSF ハンドラーの onPreRenderFunction に渡します。 これによって、その数学演算が実行され、出力コントロールが更新されて解答が表示されます。
このページは、次の例のようになります。

JSP ファイルのコードは、次のとおりです。
<html>
<head>
<title>calculatorPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="theme/stylesheet.css"
title="Style">
</head>
<f:view>
<body>
<hx:scriptCollector id="scriptCollector1"
preRender="#{calculatorPage._preRender}"
postRender="#{calculatorPage._postRender}">
<h:form id="form1" styleClass="form">
<TABLE>
<TBODY>
<tr>
<td align="left">Field1:</td>
<td style="width:5px"></td>
<td>
<h:inputText id="input1" value="#{calculatorPage.field1}"
binding="#{calculatorPage.field1_Ref}" styleClass="inputText">
</h:inputText>
</td>
</tr>
<tr>
<td align="left">Field2:</td>
<td style="width:5px"></td>
<td>
<h:inputText id="input2" value="#{calculatorPage.field2}"
binding="#{calculatorPage.field2_Ref}" styleClass="inputText">
</h:inputText>
</td>
</tr>
<tr>
<td align="left">Operation:</td>
<td style="width:5px"></td>
<td>
<h:selectOneMenu id="operationComboBox"
styleClass="selectOneMenu" value="#{calculatorPage.operation}">
<f:selectItem itemValue="add" itemLabel="add" />
<f:selectItem itemValue="subtract" itemLabel="subtract" />
<f:selectItem itemValue="multiply" itemLabel="multiply" />
<f:selectItem itemValue="divide" itemLabel="divide" />
</h:selectOneMenu>
<hx:behavior event="onblur"
target="operationComboBox" behaviorAction="get"
targetAction="updatablePanel"></hx:behavior></td>
</tr>
<tr>
<td align="left">Output:</td>
<td style="width:5px"></td>
<td>
<h:panelGroup id="updatablePanel" styleClass="panelGroup">
<h:outputText id="output" value="#{calculatorPage.output}"
binding="#{calculatorPage.output_Ref}" styleClass="outputText">
</h:outputText>
</h:panelGroup>
<hx:ajaxRefreshRequest id="ajaxRefreshRequest1"
target="updatablePanel" params="input1;input2;operationComboBox">
</hx:ajaxRefreshRequest>
</td>
</tr>
</TBODY>
</TABLE>
</h:form>
</hx:scriptCollector>
</body>
</f:view>
</html>
このページと連携する JSF ハンドラーのコードは、次のとおりです。
package jsfhandlers;
handler calculatorPage type JSFHandler
{onPreRenderFunction = onPreRender,
view = "calculatorPage.jsp"}
field1 float;
field2 float;
operation string;
output string;
function onPreRender()
if (J2EELib.getQueryParameter("$$ajaxmode") == null)
output = "Enter values and an operation.";
else
calculateAnswer();
end
end
function calculateAnswer()
param1 float = J2EELib.getQueryParameter("input1");
param2 float = J2EELib.getQueryParameter("input2");
case (J2EELib.getQueryParameter("operationComboBox"))
when ("add")
output = param1 + param2;
when ("subtract")
output = param1 - param2;
when ("multiply")
output = param1 * param2;
when ("divide")
output = param1 / param2;
end
end
end