PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

GAEで始めよう! JSP/サーブレット入門:

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

作成:2012-05-03 13:17
更新:2012-05-03 13:17
■クエリー文字列で値を受け取る
単純に何かを表示するだけというのは、前回説明したJSPの基本タグだけでなんとかできるようになります。今回は一歩進んで、「クライアントからサーバーへ何かを送り、それを受け取って再びクライアントに返す」という、インタラクティブな操作を行なってみましょう。

こうした操作のポイントは、「クライアントからサーバーへ、どうやって必要な情報を送るか」という点でしょう。これがわかれば、サーバーで必要な処理をして、それに応じた表示を送り返せるようになります。

これには、いくつかの方法が考えられます。まず、もっともシンプルなものとして「クエリー文字列を使う」方法からやってみましょう。クエリー文字列というのは、アドレスの後に付けられたパラメータの記述部分のことです。

よくWebサイトで「http://○○/?abc=xyz」みたいに、アドレスの後に余計なものが付けられているのを見たことがあるでしょう。あれがクエリー文字列です。これは、以下のような形になっています。
http://ドメイン/ファイルの指定?名前1=値1&名前2=値2&……
アドレスの後に?をつけ、その後に「名前=値」という形で値に名前をつけて既述します。複数の値を受け渡す場合は&記号でつなげます。値は、まぁ半角英数字のテキストならそのままでもいいのですが、記号や2バイト文字などが入るとトラブルを起こすので、通常はURLエンコードというものを使ってエンコードしたものを指定します。

では、こうして送られてきた値をJSPでどうやって受け取るのか? これには「request」という暗黙オブジェクトを利用します。――覚えてますか、暗黙オブジェクト。特に宣言だのしないで最初から使える状態になっている特別なオブジェクトでしたね。

requestは、サーバーに送られてきたリクエスト(クライアントからの要求ですね)に関するさまざまな情報を管理するものです。この中に「getParameter」というメソッドが用意されています。これを使って、クエリー文字の値をとり出すことができます。
String 変数 = request.getParameter( 値の名前 );
こんな具合に呼び出せばいいのです。――では、実際に簡単なサンプルを作って、サーバーとの間でやり取りをしてみましょう。

下に挙げたサンプルでは、入力フィールドにテキストを書いてボタンを押すと、メッセージが表示されます。ここでは、JavaScriptを使ってクエリー文字列をつけたページのアドレスを作成し、そこにジャンプしています。
var s = document.getElementById('input').value;
var url = 'helo.jsp?param=' + encodeURI(s);
window.location.href = url;
これで、例えばフィールドに「abc」と入力したら、「helo.jsp?param=abc」というアドレスがサーバーに送られます。サーバー側では、JSPのコードでこれを取り出しています。
String str = request.getParameter("param");
これで、変数strに「abc」というテキストが設定されます。後は、<p>パラメータ:<%=str  %></p>というようにして取り出した値を出力するだけです。

今回はただ表示をしているだけですが、もちろん、取り出した値を元にいろいろと処理を実行して結果を出力させることもできます。


 

※プログラムリストが表示されない場合

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

※helo.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
String str = request.getParameter("param");
%>
<!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=utf-8">
	<title>Sample jsp</title>
	<style>
	h1 {font-size:16pt; background:#AAFFAA; padding:5px; }
	</style>
	<script type="text/javascript">
	function doAction(){
		var s = document.getElementById('input').value;
		var url = 'helo.jsp?param=' + encodeURI(s);
		window.location.href = url;
	}
	</script>
</head>
<body>
	<h1>Sample jsp page</h1>
	<p>これはサンプルで用意したページです。</p>
	<p>パラメータ:<%=str  %></p>
	<input type="text" id="input">
	<button onclick="doAction();">Click</button>
	</body>
</html>



 


「GAEで始めよう! JSP/サーブレット入門」に戻る



※その他のコンテンツ