TeedaでjQueryを利用したAjax通信処理
標準機能としてのAjax処理もありますが、JavaScriptのライブラリとしてはjQuery以外入れたくなかったのでjQueryから呼び出してみました。
通常は標準のKunuなどを利用したほうが安心だと思います。
http://teeda.seasar.org/ja/teeda_ajax.html
jQueryを利用した呼び出し方については「Teeda再考 - 使い方から拡張方法まで -」が参考になると思います。
http://teeda.seasar.org/ja/presentations.html
標準の呼び出し方
標準的な利用方法としては、フォームで入力した値が正しいかの入力チェックなどになると思います。
Java側
通常のプログラムと同じで「ajaxから始める関数名」の形式でページクラスの関数を利用します。
package testteeda.web.user; import org.seasar.framework.log.Logger; public class ResistPage { public Logger logger = Logger.getLogger(getClass()); public String nickname; public Class<?> initialize() { return null; } public Class<?> prerender() { return null; } public String ajaxNicknameCheck() { logger.info("nicknameチェック:" + nickname); if( nickname == null || nickname.equals("") ){ return "名前を入力してください"; } if( nickname.indexOf("猫") != -1 ){ return "ＯＫです"; } return "猫じゃないとだめだよ！"; } }
猫が入っていない名前以外はエラーを出す処理です。通常この手の処理はAjaxではなくてJavaScriptで処理したほうがいいと思いますが、DBを絡ますと面倒になるので！
Html側
jQueryにてajax関数を利用して通信を行います。環境により日本語などのエンコードが化けますので、送信時に文字コード情報を混ぜで送信しています。(http://teeda.seasar.org/ja/teeda_ajax.html ->日本語パラメータについて)
呼び出す時のポイントは「サブアプリケーション + "_" + Pageクラス名の先頭小文字"ajaxPage" + "_" + 呼び出したいメソッド名」の形で呼び出します。
<!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:te="http://www.seasar.org/teeda/extension" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="../js/jquery.js"></script> <title>猫チェック</title> <script type="text/javascript" > //<![CDATA[ $(function(){ $("#checkNickname").click( function() { var fields = new Object(); fields["component"] = "user_resistPage"; fields["action"] = "ajaxNicknameCheck"; fields["nickname"] = $("#nickname").val(); $.ajax({ type : "POST", url : "./teeda.ajax", data : fields, contentType : "application/x-www-form-urlencoded; charset=utf-8", success : function(msg){ alert(msg); } }); }); }); //]]> </script> </head> <body> <form id="Form"> <input type="text" id="nickname" /> <input type="button" id="checkNickname" value="名前をチェックする" /> </form> </body> </html>
サンプルの場合パッケージルートが「testteeda.web」なのでサブアプリケーション名が「user」になります。そのため「component」が「user_resistPage」になっています。
パラメータの渡し方については必要なパラメータのみ配列に入れて送信しています。プロパティー名と同じ名前で送信することで受け取ってくれます。
ページ全体の取込
ページの一部のみ、他のページクラスから取得する場合の処理です。タブなどにてリロードしないで読み込む場合などに利用します。
呼び出し元のページに関しては呼び出し用のAjax処理があるだけです。
Java側
通常と同じ。今回は特別な処理はありませんので空のクラスです。
package testteeda.web.user; public class GetPage { public Class<?> initialize() { return null; } public Class<?> prerender() { return null; } }
html側
呼び出し用のAjax処理を追加
<!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:te="http://www.seasar.org/teeda/extension" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="../js/jquery.js"></script> <title>猫チェック</title> <script type="text/javascript" > //<![CDATA[ $(function(){ $("#getPage").click( function() { var fields = new Object(); fields["nickname"] = "あきら"; $.ajax({ type : "POST", url : "./nickname.html", data : fields, contentType : "application/x-www-form-urlencoded; charset=utf-8", success : function(msg){ alert(msg); } }); }); }); //]]> </script> </head> <body> <form id="Form"> <input type="button" id="getPage" value="ページの内容を取得する" /> </form> </body></html>
ほとんど同じ処理ですが、呼んだ後にページ全体が帰ってきます。呼び出され側は通常のページクラスとして実装します。
Java側
通常のページクラスです。
package testteeda.web.user; public class NicknamePage { public String nickname; public Class<?> initialize() { return null; } public Class<?> prerender() { return null; } }
html側
通常のテンプレートです。
<!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:te="http://www.seasar.org/teeda/extension" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body> <span id="nickname"></span> </body></html>
このコードで特徴的なのはイニシャライズを利用してはいけません。
jQueryでpostを利用したページ取得をするとイニシャライズがスキップされてprerenderから実行されます！
イニシャライズに処理を書いても実行されませんので、prerenderに書く必要があります。
Teedaを利用していると、セッションが切れた場合などページプロパティが消えている状態でアクセスした場合もprerenderしか呼ばれないことがあるので、ちょっと注意が必要ですね。
また、このままですとページ全体をそのままdivなどに流し込むとbodyタグなどが重複してしまいます。とりあえずその状態でもエラーになるブラウザは少ないのですが、取得したbodyの中身のみ流し込むコードを追加したほうがきれいなソースになると思います。
ただし、その場合にはhead部分に宣言したものがすべて無効になるので注意してください。
全体の構成
