ページ遷移①

フォームとページ遷移

ここまでは1ページ表示するだけでページの遷移（移動）といった動きがありませんでした。ここからは、複数のJSPファイルを作成しページの遷移とそれに伴うパラメーターの受け渡しを学習します。

通常、ページ遷移として主に使われるのは、フォームです。フォームとはWebページ上でデータを入力し、Webサーバーに送り返す機能です。ショッピングサイトをイメージしてください。商品を選んで注文画面を進んでいくと、名前や住所などを入力する画面があります。これがフォームです。フォームの各項目を入力し、「送信」ボタンなどを押すと、入力した情報がお店に送られます。

get送信とpost送信

フォームは、HTMLで<form>タグであらわされ、フォームの内容を記述する範囲全体を囲みます。この範囲に記述される内容がひとつのフォームとみなされ、「送信」ボタンなどをクリックしたときに、情報がまとめて送られます。ひとつのページに複数のフォームを記述することも可能です。記入例は以下の通りになります。

formタグの記入例
<form id="frm1" name="frm1" action="sample05.html" method="get">

このうち、action属性はフォームに必須の属性です。フォームに入力されたデータの送り先を記述します。method属性では、フォームのデータをどのように送るかを指定します。これにはgetとpostの2種類の方法があり、記述を省略した場合はgetを指定したとみなされます。

getでフォームデータを送信すると、ブラウザーのアドレスバーに「?フィールド名=値」の形式で、送信する内容が表示されます。そのため、form以外にも、リンクでget送信を使うことができます。

ただ、これだと表示された内容は第3者に見られてしまう危険があります。それに対し、postを使うと、その値を隠すことができますが、必ずformタグを用いる必要があります。getとpostの長所と短所をまとめると、以下のようになります。（図3-1.）

表3-1.get送信とpost送信の長所と短所
送信方法長所短所
getリンクでも利用できる文字数制限がある。（URLは最大2,083文字文字）
内容を隠せない
post送信内容を隠せる
大量のデータを送れる		リンクでは利用できない。

リンクによるページ遷移

そしてもう一つ、ページ遷移として忘れていけないのが、リンクによるページ遷移です。リンクは、<a>タグにより、<a href="URL">といったような形で記述し、ここをクリックすることでリンク処理を行うことです。

<a>タグを使用しての送信方法は、get送信のHTTPクエリーで、以下のように表わします。

リンクによるデータの送信
href="URL?name1=value1&name2=value2&…"

送り先と送るデータの名前（属性名）、送るデータの中身（属性値）を指定します。複数ある場合は、&で属性値を区切りますが、一つだけの場合は必要ありません。

この書式からわかるとおり、リンクによるページ遷移によるデータの送信は、get送信になります。したがって、フォームのget送信と同じ方法でデータを受信することができます。

リンクによるページ遷移

リンク処理とget送信

では、実際にページ遷移のサンプルを見てみましょう。まずは、一番簡単なリンク処理によるget送信の例を見てみましょう。以下のサンプルを入力してみてください。

sample1_from.jsp 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>sample1_from</title>
</head>
<body>
<br/>
<% String links[] = {"link1","リンク2" }; %>
<% for(int i = 0; i < links.length ; i++){%>
<a href="sample1_to.jsp?text=<%= links[i]%>">リンク処理<%=i %></a>
<br/>
<% } %>
</body>
</html>

sample1_to.jsp 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>sample2_to</title>
</head>
<body>
<%
	request.setCharacterEncoding("utf-8");
	String text = request.getParameter("text");
%>
<b>受信結果</b><br/>
<p><%=text %></p>
<a href="sample1_from.jsp">戻る</a>
</body>
</html>

sample1_from.jspが遷移前、sample1_to.jsp遷移後のページになります。したがって、まずはsample1_from.jspを起動してください。URLは、http://localhost:8080/jsp/day3/sample1_from.jspとなります。（図3-1.）

図3-1.sample1_from.jspの実行結果
sample1_from.jspの実行結果

このページからは、2つのページに遷移できます。一つ目のリンクである「リンク処理0」をクリックすると、以下（図3-2.)のように「link1」と表示される画面になります。「戻る」をクリックすると、再びsample1_from.jspに戻ります。

図3-2.sample1_to.jspへの遷移①（リンク処理0をクリック）
sample1_to.jspへの遷移①（リンク処理0をクリック）

さらに、二つ目のリンクである「リンク処理1」をクリックすると、以下（図3-3.)のようになります。このケースでは、文字化けが起こることが分かります。

図3-3.sample1_to.jspへの遷移②（リンク処理1をクリック）
sample1_to.jspへの遷移②（リンク処理1をクリック）

プログラムの仕組み

ここでは、<a>タグを使用してデータを送っています。そのため、送信方法はget送信のHTTPクエリーで、

<a>タグを使用したデータ送信①（単独のケース）
href="送り先のURL?name=value"

送り先と送るデータの名前（属性名）、送るデータの中身（属性値）を指定します。そして、複数のデータを送る場合は

<a>タグを使用したデータ送信②（複数のケース）
href="送り先のURL?name=value1&name2=value2&…"

のように、&で連結していけばよいのです。sample01_from.jspで<a>タグのパラメーターでtextという名前で送ったので、受け取り側ではrequest.getParameter("text");としてname変数にデータを取得しています。そしてその値を変数textに代入して表示しています。なお、このrequestは暗黙オブジェクトの1つです。(図3-4.)

図3-4.ページ遷移とget送信の仕組み
ページ遷移とget送信の仕組み

なお、リクエストパラメーターを受けとる前にrequest.setCharacterEncoding("文字コード（本書ではutf-8）");を記述し、リクエストで扱う文字のコードをutf-8としています。

ただ、1バイト文字などであれば問題なく動く時もありますが日本語のようなマルチバイト文字は文字化けを起こします。そのため、日本語などを扱う場合は、別の方法を利用する必要があります。