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 "OKです";
		}

		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部分に宣言したものがすべて無効になるので注意してください。


全体の構成


総括

通常TeedaAjaxというとJSONや文字列のやり取りを想定しています。html形式で埋め込みなどを利用できないので無理やり呼んでみました。ただしファイルのアップロードやセッション切れの処理などもろもろ難しい問題が発生してきてしまいますので可能であればAjaxを利用しないで組んだほうが楽だと思います。。。