JSP/Servlet | クライアントとサーバー間の値の受け渡し | Ajaxを使ってJSPに情報を渡す

Tags:

フォーム送信は確かにHTMLの基本ではあるが、最近ではそれほど多く使われなくなっている。送信するたびにページを毎回サーバーから再ロードして読み直し、更新するため、それを嫌う人も多い。

フォーム送信の代わりに、サーバーとの通信でよく使われているのが「Ajax」である。AjaxはJavaScriptを利用してサーバーと非同期通信を行う機能である。非同期、つまり処理が終わるまで待たずに先へ進める方式なので、通信中に他の操作ができなくなることもなく、必要な情報をバックグラウンドで取得するため、ページを移動せずに画面表示を更新できる。

Ajax自体は、JSPがなくてもHTMLとJavaScriptだけで使用できる。つまり、普通のHTMLファイルで実現できる。Ajaxからアクセスする「サーバーサイドプログラム」にJSPを使えばよい。

これは実際にサンプルを見るほうが早い。以下の簡単な例を見てみよう。

index.html

<!DOCTYPE html>
<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", "hello.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>

hello.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 + "」と書きました。");
}
%>

ここではindex.htmlとhello.jspを使用している。index.htmlにアクセスし、入力フォームに何かを書いてボタンを押すと、Ajax通信でhello.jspへアクセスして結果を表示する。

Ajax通信についてはJSPとは関係ないため、説明は省略する。興味のある人は「Ajaxによる非同期サーバー通信」について調べてほしい。ここではAjaxでアクセスするJSP側の処理を確認する。

今回はhello.jspにPOSTでアクセスし、結果を受け取れるようにしている。直接このページにアクセス、つまりGETでアクセスした場合は「can not access!」が表示されるようになっている。このようなGETとPOSTの使い分けはrequestメソッドで調べられる。

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にする必要がある。