Ajax入門　その１

Ajax

１年位前に社内で大先生（Java開発者のための Ajax実践開発入門の著者の一人）の教育を受講してそれ以来なんもフォローしてなかったけど、Teedaには取り込まれているし、SAStrutsにも取り込まれるようなので、そろそろ調査してみる。

まずはなにもライブラリを使わないパターンで調べてみる。

  • サーバ側
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		PrintWriter writer = response.getWriter();
		writer.println(request.getParameter("name"));
	}

リクエストパラメータの値をそのまま返します。

  • HTML
<form>
<input type="text" id="name" onkeyup="getName();"/><br/>
Hello <div id="message"></div>
</form>

inputタグに入力したものをサーバに送ります。

function getName() {
	var request;
	if(window.XMLHttpRequest) {
		request = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		try {
			request = new ActiveXObject('Msxml2.XMLHTTP');
		} catch(e) {
			request = new ActiveXObject('Microsoft.XMLHTTP');
		}
	} else {
		alert("XMLHttpRequestオブジェクトが取得できません");
		return;
	}
	request.onreadystatechange = function() {
		if(request.readyState == 4 && request.status == 200) {
			var text = request.responseText;
			document.getElementById("message").innerHTML = text;
		}
	};
	request.open('GET', '/ajaxtest/HelloServlet?name=' + document.getElementById("name").value, true);
	request.send(null);
}

サーバからのレスポンスをdivタグのところに出力します。

JSONを使った場合

  • サーバ側
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		PrintWriter writer = response.getWriter();
		writer.println("{\"name\":\"" + request.getParameter("name") + "\"}");
	}

無理やりJSONにしてます。

function getName() {
	var request;
	if(window.XMLHttpRequest) {
		request = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		try {
			request = new ActiveXObject('Msxml2.XMLHTTP');
		} catch(e) {
			request = new ActiveXObject('Microsoft.XMLHTTP');
		}
	} else {
		alert("XMLHttpRequestオブジェクトが取得できません");
		return;
	}
	request.onreadystatechange = function() {
		if(request.readyState == 4 && request.status == 200) {
			var text = eval('(' + request.responseText + ')');
			document.getElementById("message").innerHTML = text.name;
		}
	};
	request.open('GET', '/ajaxtest/HelloServlet?name=' + document.getElementById("name").value, true);
	request.send(null);
}

evalってます。

実行結果は以下。


prototype.jsやjQueryを使った場合も書くつもりつもりつもり。。。

追記（7/20）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>
<script type="text/javascript" src="js/prototype.js">
</script>
<script type="text/javascript">
<!--
function getName() {
	var request = new Ajax.Request('/ajaxtest/HelloServlet?name=' + $F("name"), {
		method : 'get',
		onComplete: function(req) {
			var text = eval('(' + req.responseText + ')');
			$("message").innerHTML = text.name;
		}
	});
}
// -->
</script>
</head>

<body>
<form>
<input type="text" id="name" onkeyup="getName();"/><br/>
Hello <div id="message"></div>
</form>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.2.6.js">
</script>
<script type="text/javascript">
<!--
$(function(){
	$('#name').keyup(function(){
		$.getJSON('/ajaxtest/HelloServlet', {name:$('#name').val()}, function(json){
			$('#message').text(json.name);
		});
	});
});
// -->
</script>
</head>

<body>
<form>
<input type="text" id="name"/><br/>
Hello <div id="message"></div>
</form>
</body>
</html>