ここまでの変更が完了したら、一度ブラウザを落とし、GlassFishを再起動してから再び、http://localhost:8080/SampleWebApp/faces/ajaxsamplejsf.xhtmlを開いて、値を入力して送信してみましょう。すると、次のような画面が表示されます。
これで送受信の仕組みは完了していますが、実はこの結果はAjax通信をしたものではなく、画面がリフレッシュされた結果になっているのです。その証拠に、パスワード欄が空欄になっています。これはHTMLの仕様で、パスワード欄の再表示は行わないことになっているからです。
では、Ajax機能を盛りこんでみましょう。これは非常に簡単で、ManagedBeanは一切修正しません。
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core" …①
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>JSF+Ajaxサンプル</title>
<script type="text/javascript"> …②
<!--
function success(event){
//Ajaxイベント送信が発生するごとに起動する。
//送信成功～サーバからの応答後の処理で利用する。
alert("Success. " + event.status);
}
function failure(event){
//Ajax送信に失敗した場合に出力される。
//サーバからのエラーもここに出力されるので
//サーバのデバッグ情報と共に参考にするとよい。
alert("Error. " + event.status);
}
//-->
</script>
</h:head>
<h:body>
<h:form id="form1">
名前<h:inputText id="username" value="#{user.username}">
</h:inputText>
<br />
パスワード<h:inputSecret id="password" value="#{user.password}"></h:inputSecret><br />
<hr></hr>
<h:commandButton id="sender" action="#{user.action}" value="送信する">
<f:ajax execute="form1" onevent="success" oneerror="failure" render="result" /> …③
</h:commandButton>
<h:outputText id="result" value="#{user.result}"></h:outputText>
</h:form>
</h:body>
</html>
追記したのは3箇所です。まずは<f:ajax>タグを使うための宣言を追加するため、1の記述を追加します。宣言が完了したら、送信ボタンにて「ajax通信を行う」ように指示を出すため、3の記述をボタンに対して行います。上記の例でも、送信ボタンである<h:commandButton>の子要素として、<f:ajax>を挿入しています。
<f:ajax>で指定している内容について説明します。
| 属性名 | 処理概要 |
| execute | サーバへ送信する要素のid。複数指定する場合は半角スペース区切りで記述する。親要素を選ぶと、その子要素も送信される |
| onevent | Ajaxの送受信を検知するたびに呼ばれるJavaScriptのメソッド名。begin（送信処理の開始）、complete（サーバでの処理完了）、success（XHTMLへの表示完了）の3つのステータスでハンドリングできる |
| onerror | Ajaxの送受信で何らかのエラーを検知した場合に呼ばれるJavaScriptのメソッド名 |
| render | サーバからの受信結果を表示するタグのid |
この4つのうち、executeとrenderは指定しておきます。今回のサンプルでは、JavaScriptが起動されてメッセージの受信まで正しく完了したことを通知するよう、oneventやonerrorで起動するJavaScriptを指定し（リスト2部分）、ダイアログを表示しています。
実際に動かしてみた状態は以下のようになります。
画面を確認してみましょう。確かにパスワードの内容はリフレッシュされていません。メッセージの部分のみ動的に更新していることになります。
これでAjaxを使った入出力の機能はひと通りできるようになりました。
以上、JSF2とManagedBeanを使って簡単な入力画面を作るところまで紹介しました。サーブレットを使うことなく、またAjaxを利用するまでに数行の設定を追加するだけで使うことができることがご理解いただけかと思います。
まとめ
今回はAjaxを利用したFacelets取り上げました。次回は今回の続きで、入力チェック機能の追加と、Faceletsが生成するJavaScriptの動作についても解説します。
