Webアプリの常識をJSPとStrutsで身につける
連載インデックスへ
 Webアプリの常識をJSPとStrutsで身につける（終）

JavaScript/Ajaxで知るWebアプリとスクリプトの常識


株式会社メセナ・ネットコム
竹下 靖久
2009/10/21

■ 【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】）

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

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

■ 処理の定義（赤枠【2】）

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

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

■ データ取得成功と失敗の判断（赤枠【3】）

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

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

■ サーバとの通信開始（赤枠【4】）

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

■ そのほかのファイル

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

■ 【3】実行

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

図5　Amazon.com Diamond Searchの使用例
図6　ディレクトリ構成
　それでは、Tomcatを起動して「http://localhost:8080/hello/pages/ajax/empInfoDisplay.html」にアクセスしてみましょう。

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

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

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

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

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

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

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

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

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

Web開発で需要が増えるJavaとJavaScript/Ajaxの連携

　今回はスクリプトの常識としてJavaScriptやAjaxについて取り上げ、JSPと連携するサンプルも紹介しましたが、スクリプトについて理解が深まったでしょうか？

　これからのWebアプリケーション開発では、スクリプト言語は、さらに需要を増し、そして進化していくでしょう。その進化に置いていかれぬよう、基本となるものをしっかりと抑えておくことを心掛けましょう。

　最後に、JavaとJavaScript/Ajaxの連携に役立つ＠IT記事を挙げておきますので、ぜひ参考にしてみてください。

■ ＠IT関連記事


JavaプログラマはAjaxに乗るべきか
安藤幸央のランダウン（31）　Ajaxアプローチを活用したWebアプリケーション開発には数々の技術的スキルと、センスを要求され、設計や全体の出来に大きく影響する
「Java Solution」フォーラム 2006/4/28
MyEclipseでAjax＋Javaをやさしく開発
サーバサイドにJava EEを、クライアントサイドにAjaxを用いたWebアプリケーションを、MyEclipseを使って容易に開発する手法を紹介していく
CoolなEclipseプラグイン
役立つプラグインを毎月紹介。第1回は「Javaのプロパティファイルエディタ」「Tomcatコントローラ」「HTML/JSP/XMLエディタ」
第12回 便利なプラグインの集大成MyEclipse
第19回 Project Zeroでスクリプト＋Ajaxのアジャイル開発
 第22回 JavaScriptを書かずにAjaxを実現するjMaki
Googleからのサプライズ、Google Web Toolkit
JavaアプリをAjaxアプリに変換できる開発ツール、Google Web Toolkit。まずは、簡単なサンプルを動かしてみよう

1-2-3
  

　Index
最終回　JavaScript/Ajaxで知るWebアプリとスクリプトの常識
  Page1
いまさら聞けない、スクリプト入門
JavaのWebアプリ開発でも必須の「JavaScript」
  Page2
JavaのWebアプリ開発でも採用が増えてきた「Ajax」
JSP上でAjaxを使ってみよう
  Page3
Web開発で需要が増えるJavaとJavaScript/Ajaxの連携

Webアプリの常識をJSPとStrutsで身につける バックナンバー 連載インデックスへ»



Java Solution全記事一覧

TechTargetジャパン

Java Solution フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH