クライアント＝サーバー間の値の受け渡し (3/4)
作成:2012-05-03 13:24
更新:2012-05-03 13:24
更新:2012-05-03 13:24
■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の使い分けは、リクエストのメソッドを調べることで行えます。
他の部分は、特に難しい部分はないでしょう。out.printlnで出力したものがそのままAjax通信でクライアント側に送られることになります。また、今回はAjaxでテキストの値を受け取るだけですので、一番最初にあるpageディレクティブを以下のように修正してあります。
※[参考] Ajaxによる非同期サーバー通信
http://libro.tuyano.com/index3?id=50003
フォーム送信に代り、サーバーとのやり取りで多用されるようになっているのが「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();暗黙オブジェクトrequestの「getMethod」は、アクセスのメソッドを返すものです。返り値は、「GET」か「POST」のいずれかになります。JSPのgetParameterなどのメソッドは、GETでもPOSTでも同様に呼び出され値が取得できます。利用の上では、JSPはGET/POSTを意識することなく、全く同じように扱えるよう設計されているのです。が、時には「GETのときはこれ、POSTのときはあれ」というように処理を分けなければいけないこともあります。こうした場合に、getMethodが用いられます。
if ("GET".equals(method)){……略……}
他の部分は、特に難しい部分はないでしょう。out.printlnで出力したものがそのままAjax通信でクライアント側に送られることになります。また、今回はAjaxでテキストの値を受け取るだけですので、一番最初にあるpageディレクティブを以下のように修正してあります。
<%@ page language="java" contentType="text/plain; charset=utf-8"よく見ると、contentType="text/plain; charset=utf-8"になっていますね？ text/htmlではなく、text/plainに変わっています。こういう「サーバーに問い合わせて結果をもらうだけ」というような場合には、ただのテキストを出力するだけですから、text/plainにしておきましょう。
pageEncoding="utf-8"%>
※[参考] 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 + "' と書きました。");
}
%>
※関連コンテンツ