JavaScript/Ajaxで知るWebアプリとスクリプトの常識：Webアプリの常識をJSPとStrutsで身につける（終）（3/3 ページ）

» 2009年10月21日 00時00分公開

[竹下靖久，株式会社メセナ・ネットコム]

■【2】JSP/HTML＋JavaScriptの作成

　次に、JSPファイルを作成します。

CardSelect.jsp

<%@ page contentType="text/html; charset=Shift-JIS" %>
<%@ taglib uri="http://struts.apache.org/tags-html"
  prefix="html" %>
<html:html>
  <head>
    <title>CardSelect</title>
    
<script type="text/javascript">
<!--
 
function xmlLoad(form, xmlName){
    
    xmlHttpRequest = createXMLHttpRequest(); // 【1】
    
    // サーバから応答があった場合の処理を定義する。【2】
    xmlHttpRequest.onreadystatechange = function(){
 
        // 【3】始まり
        if (xmlHttpRequest.readyState == 4){
            if (xmlHttpRequest.status == 200){
        // 【3】終わり
 
                xmlData = xmlHttpRequest.responseXML;
 
                //各タグ名を持つ要素のリストを取得します。
                xmlcardnoList = xmlData.getElementsByTagName("cardno");
                xmllastnameList = xmlData.getElementsByTagName("lastname");
                xmlfirstnameList = xmlData.getElementsByTagName("firstname");
                xmlyearList = xmlData.getElementsByTagName("year");
                xmlmonthList = xmlData.getElementsByTagName("month");
                
                resultText = "";
                
                xmlcardno = xmlcardnoList[0].childNodes[0].nodeValue;
                xmllastname = xmllastnameList[0].childNodes[0].nodeValue;
                xmlfirstname = xmlfirstnameList[0].childNodes[0].nodeValue;
                xmlyear = xmlyearList[0].childNodes[0].nodeValue;
                xmlmonth = xmlmonthList[0].childNodes[0].nodeValue;
                
                form.cardno.value = xmlcardno;
                form.name.value = xmllastname + " " + xmlfirstname;
                form.expirationDate.value = xmlyear + "／" + xmlmonth;
             } else {
            
                form.cardno.value = "サーバとの通信に失敗しました。";
                form.name.value = "サーバとの通信に失敗しました。";
                form.expirationDate.value = "サーバとの通信に失敗しました。";
            }
        } else {
            form.cardno.value = "データをロード中です。。。";
            form.name.value = "データをロード中です。。。";
            form.expirationDate.value = "データをロード中です。。。";
        }
    }
    //【4】始まり
    //サーバとの通信を開始する。
    xmlHttpRequest.open("GET", "http://localhost:8080/hello/pages/xml/"+xmlName, true);
    xmlHttpRequest.send(null);
   //【4】終わり
}

　このCardSelect.jspは、ページ上にある「mesenaカード（1111）ボタン」と「mesenaカード（9999）ボタン」をクリックするとサーバ上にあるxmlファイルを読み込み、それぞれのカードデータを表示するプログラムです。それでは、プログラムを読み解いていきましょう。

■XMLHttpRequestオブジェクト生成（【1】13行）

　ボタンが押され、JavaScriptが実行されると、最初にXMLHttpRequestオブジェクトの生成が行われます。

　XMLHttpRequestとは、サーバとのHTTP通信を行うためのオブジェクトでサーバへの要求やデータの取得を実現します。

■処理の定義（【2】15行）

　XMLHttpRequestオブジェクトのメソッドであるonreadystatechangeに処理を定義します。onreadystatechange は、XMLHttpRequestオブジェクトのステータス（readyState）が変化したときに呼び出されるイベントハンドラです。サンプルプログラムでは、以下の3つの処理を定義しています。

データ取得成功or失敗の判定処理
データ取得成功時の処理（社員情報一覧出力）
データ取得失敗時の処理（エラーメッセージ表示）

■データ取得成功と失敗の判断（【3】18～21行）

　データ取得に成功したか失敗したかの判断を行います。判定には、readyStateプロパティとstatusプロパティを利用します。readyStateプロパティはXMLHttpRequest の通信結果ステータスを取得し、statusプロパティにはHTTPステータスコードを取得します。

　通信結果ステータスが「4（準備完了）」で、HTTPステータスコードが「200（ファイルの検出に成功）」であればデータ取得成功と判断し、データ取得成功時の処理を実行します。それ以外は失敗時の処理を実行します。

■サーバとの通信開始（【4】55～59行）

　処理の定義が完了したので、サーバへ接続します。openメソッドを使い、対象のXMLファイルを取得します。

■そのほかのファイル

　そのほかのファイルについては、説明を省きます（ここからダウンロード）。

■【3】実行

　ファイルの作成が完了したので、実際に動かしてみましょう。JavaScriptのときと同様、こちらも連載第2回で構築した環境を利用します。構成は以下のとおりです。

図6　ディレクトリ構成

　それでは、Tomcatを起動して「http://localhost:8080/hello/pages/ajax/empInfoDisplay.html」にアクセスしてみましょう。

編集部注：上記文章のURLに間違いがありましたので、訂正します。正しくは下記となります。間違いがありましたことをお詫び申し上げます（2011年6月5日）。

　それでは、Tomcatを起動して「http://localhost:8080/hello/pages/CardSelect.jsp」にアクセスしてみましょう。

図7　社員情報表示サンプルの起動画面

　経理部社員データボタンをクリックします。

図8　経理部社員データボタンをクリックした結果

　cardA.xmlが読み込まれ、「mesenaカード(1111)」のデータが表示されました。次に、「mesenaカード(9999)」ボタンをクリックします。

図9　「mesenaカード(9999)」ボタンをクリック

　cardB.xmlが読み込まれ、経理部社員データはシステム開発部のものに書き変わりました。ここで注目してもらいたいのが画面の表示位置です。

　通常のWebアプリケーションの場合、ページの切り替えが発生するため表示位置はページTOPに移動します。しかし、Ajaxアプリケーションでは画面を一部書き換えるため表示位置が変わらないのです。例えば、縦に長いWebページ（ユーザー登録画面など）でサーバとやりとりするたびにtopに戻られたのでは、ユーザーはストレスを感じるでしょう。Ajaxアプリケーションはこのような事象に対してもストレスの軽減が可能なのです。