クライアント＝サーバー間の値の受け渡し (3/4)

■Ajaxを使ってJSPから情報を受け取る

フォームの送信は、確かにHTMLの基本ですが、しかし最近はあまり多用されなくなりつつあります。送信する度に、またページをリロードしてサーバーから読み込み直すことになるため、嫌う人も多いようです。

フォーム送信に代り、サーバーとのやり取りで多用されるようになっているのが「Ajax」です。Ajaxは、JavaScriptを利用してサーバーと非同期通信を行う機能です。非同期（処理が終わるまで待たずにどんどん先に処理をすすめるやり方）であるため、通信の間、操作ができなくなるようなこともありませんし、バックグラウンドで必要な情報を受け取るためページを移動することもなくその場で表示を更新できます。

Ajaxそのものは、別にJSPなど必要なく、HTMLとJavaScriptがあれば使えます。つまり、普通のHTMLファイルでOKなのです。Ajaxでアクセスする「サーバー側のプログラム」に、JSPを使おう、というわけです。

これは、実際にサンプルを見てもらったほうが早いでしょう。下のリスト欄に、簡単な例をあげておきます。ここでは、index.htmlとhelo.jspを使っています。index.htmlにアクセスし、入力フォームになにか書いてボタンを押すと、Ajax通信でhelo.jspにアクセスし、結果を表示します。

Ajax通信についてはJSPとは関係ないので説明は省略します（興味ある人は、本文終わりに掲載した「Ajaxによる非同期サーバー通信」のリンクを御覧ください）。ここでは、AjaxでアクセスされるJSP側の処理を確認しましょう。

今回は、helo.jspにPOSTでアクセスし、結果を受け取るようにしています。直接このページにアクセスする（GETでアクセスする）場合には、「can't access!」と表示されるようにしてあります。このようなGETとPOSTの使い分けは、リクエストのメソッドを調べることで行えます。

String method = request.getMethod();
if ("GET".equals(method)){……略……}

暗黙オブジェクトrequestの「getMethod」は、アクセスのメソッドを返すものです。返り値は、「GET」か「POST」のいずれかになります。JSPのgetParameterなどのメソッドは、GETでもPOSTでも同様に呼び出され値が取得できます。利用の上では、JSPはGET/POSTを意識することなく、全く同じように扱えるよう設計されているのです。が、時には「GETのときはこれ、POSTのときはあれ」というように処理を分けなければいけないこともあります。こうした場合に、getMethodが用いられます。

他の部分は、特に難しい部分はないでしょう。out.printlnで出力したものがそのままAjax通信でクライアント側に送られることになります。また、今回はAjaxでテキストの値を受け取るだけですので、一番最初にあるpageディレクティブを以下のように修正してあります。

<%@ page language="java" contentType="text/plain; charset=utf-8"
    pageEncoding="utf-8"%>

よく見ると、contentType="text/plain; charset=utf-8"になっていますね？　text/htmlではなく、text/plainに変わっています。こういう「サーバーに問い合わせて結果をもらうだけ」というような場合には、ただのテキストを出力するだけですから、text/plainにしておきましょう。

※[参考] Ajaxによる非同期サーバー通信
http://libro.tuyano.com/index3?id=50003

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※index.htmlの修正

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Hello App Engine</title>
	<style>
	h1 {font-size:16pt; background:#AAFFAA; padding:5px; }
	</style>
	<script type="text/javascript">
	function doAction(){
		var req =  createRequest();
		if (req == null){
			alert("実行できません！");
			return;
		}
		var s = document.getElementById('input').value;
		req.open("post", "helo.jsp?param=" + encodeURI(s));
		req.setRequestHeader("User-Agent","XMLHttpRequest");
		req.onreadystatechange = function(){
		if (this.readyState == 4 && this.status == 200){
			var msg = document.getElementById('msg');
			msg.innerHTML = this.responseText;
		}
		}
		req.send();
	}
	
	function createRequest(){
		var httplist = [
			function(){ return new XMLHttpRequest(); },
			function(){ return new ActiveXObjct("Msxml2.XMLHTTP"); },
			function(){ return new ActiveXObject("Microsoft.XMLHTTP"); }
		];
		for(var i = 0;i < httplist.length;i++){
			try {
				var http = httplist[i]();
				if (http != null) return http;
			} catch(e){
				continue;
			}
		}
		return null;
	}
	</script>
</head>

<body>
<h1>Hello App Engine!</h1>
<p id="msg">※なにか書いて送信してください。</p>
<table>
	<tr><td>入力</td><td>
	<input type="text" id="input" name="input"></td></tr>
	<tr><td></td><td>
	<button onclick="doAction();">Send</button></td></tr>
	</table>
</body>
</html>


※helo.jspの修正

<%@ page language="java" contentType="text/plain; charset=utf-8"
	pageEncoding="utf-8"%>
<%
String method = request.getMethod();
if ("GET".equals(method)){
	out.println("can't access!");
} else {
	String inpt = request.getParameter("param");
	out.println("あなたは、 '" + inpt + "' と書きました。");
}
%>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail