Ajaxとの連携1
1) はじめに
Ajaxは「Asynchronous JavaScript + XML」の省略語です。
Ajaxは非同期通信を利用したJavaScriptとXML、つまりJavaScriptを利用して
非同期通信を行いXMLデータでサーバーとのやりとりを行います。
ここではWeberフレームワークとAjaxを使ったサンプルをご紹介します。
ここで紹介するWebアプリケーションの構成は以下のとおりです
2) 入力画面の作成 (sample1.html)
まず入力となる画面を作成します。
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>従業員番号から氏名表示</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style type="text/css">
#title {font-size:18px; font-weight:600; color:#aa0000}
</style>
<script type="text/javascript" src="./../../js/xmlhttp.js"></script>
<script type="text/javascript">
//<![CDATA[
var httpObj; //XMLHttpObject変数
/**
* XMLHttpObjectを使って,指定されたコンポーネントにセットされている
* 条件に合致する従業員名を取得します
*/
function getEmpName(e){
var emp_no = document.getElementById("emp_no").value;
var emp_name;
httpObj = createXMLHttpRequest(displayData);
httpObj.open("GET", "./html_4_0/ajax/sample.wb?empNo=" + emp_no);
httpObj.send(null);
}
/**
* サーバから受け取った結果を画面に出力する
*/
function displayData(){
if(httpObj.readyState == 4){
if(httpObj.status == 200){
emp_name = httpObj.responseText;
emp_name = ' 検索結果＝' + emp_name + 'がヒットしました';
document.getElementById("emp_name").innerHTML = emp_name;
}
}
}
//]]>
</script>
</head>
<body>
<center><span id="title">従業員番号から氏名表示</span></center>
<p>0000〜0002までの従業員番号を入力し、タブキーを押下してください</p>
<form>
<table align="center">
<tr>
<td>
従業員番号:<input id="emp_no" type="text" name="emp_no" onblur="getEmpName();"/>
</td>
<td>
<div id="emp_name"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
このサンプルは、インプットボックスに4桁の従業員番号を入力し、タブキーを押すと
従業員番号に該当する氏名をサーバから取得し、表示するといったものです。
最初の行で <?xml ...> で XML宣言を記述していまます。
Weberフレームワークでは任意指定ですが、Ajaxの利用などを考えると、XML宣言を記述
しておいたほうがいいでしょう。
Shift_JIS の部分には使用する文字コードを Shift_JIS（シフトJIS）、euc-jp（EUC）、
iso-2022-jp（JISコード）、UTF-8（Unicode:UTF-8）などを指定します。
以下の記述はXHTMLのバージョンを指定していますが、Weberフレームワークでは任意指定です。
これもAjaxの利用などを考えるとDOCTYPEも記述しておいた方がよいでしょう。
getEmpNameメソッドは、従業員番号入力テキストがフォーカスを失ったときに
呼ばれます。
このメソッドの内部のcreateXMLHttpRequestメソッドによってXMLHttpRequestインスタンス
を生成し、そのインスタンスに対して、リクエストを発行しています。
createXMLHttpRequestメソッドに指定している引数"displayData"は応答時の
コールバック関数を指定しています。
function getEmpName(e){ var emp_no = document.getElementById("emp_no").value; var emp_name; httpObj = createXMLHttpRequest(displayData); httpObj.open("POST", "./html_4_0/ajax/sample.wb?empNo=" + emp_no); httpObj.send(null); }
displayDataメソッドは、Ajaxによる非同期通信の応答を処理します。
ここでは、サーバから受け取った結果を文字列で取得(httpObj.responseText)し、
document.getElementById("emp_name").innerHTMLにセットしています。
function displayData(){ if(httpObj.readyState == 4){ if(httpObj.status == 200){ emp_name = httpObj.responseText; emp_name = ' 検索結果＝' + emp_name + 'がヒットしました'; document.getElementById("emp_name").innerHTML = emp_name; } } }
3) Javaスクリプト(xmlhttp.js)
XMLHttpRequestを取得するJavaスクリプトのサンプルです。
このスクリプトファイルはこの後も使用します。
//This File encoding is utf-8
/**
* XMLHttpObjectを取得します
* @param cbFunc onreadystatechangeにセットするコールバック関数を指定します
* @return XMLHttpObjectを返します
*/
function createXMLHttpRequest(cbFunc)
{
var XMLhttpObject = getHttpObject();
if (XMLhttpObject){
XMLhttpObject.onreadystatechange = cbFunc;
}
return XMLhttpObject;
}
/**
* XMLHttpObjectを取得します
* @return XMLHttpObjectを返します
*/
function getHttpObject() {
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
return XMLhttpObject;
}
/**
* イベントリスナー用ラッパ関数
* 外部（HTML)からaddListenerで呼び出され、内部でIEとそのほかのブラウザ
* で処理関数を切り替えて処理しています。
* @param obj イベントタイプ
* @param イベントが発生したときに呼び出されるコールバック関数
* @param trueを指定するとキャプチャーフレーズ/falseを指定するとバブリングレーズ
* @reurn 処理にしっぱした場合はfalseを返します。
*/
function addListener(obj, eventType, func, cap){
if(obj.attachEvent){ //IEの場合
obj.attachEvent('on' + eventType, func);
}else if(obj.addEventListener){ //そのほかのブラウザ
obj.addEventListener(eventType, func, cap);
}else {
alert('No support on your Browser');
return false;
}
}
4) アクションクラスの作成(AjaxSampleAction.java)
このサンプルのアクションクラスです。
package weber_4_0_sample.org.itscool.ajax;
import org.itscool.commons.util.InputCheckUtil;
import org.itscool.weber.action.Action;
import org.itscool.weber.action.ActionBucket;
import org.itscool.weber.controller.Globals;
public class AjaxSampleAction extends Action {
/**
* アクションを実行し、結果をテキストで出力します。
* このアクションの実行結果はGlobals.RET_NOFORWARDを返巣必要があります。
* XmlHttpRequestで非同期通信、同期通信を行う場合は、RequestDispatcher.forwardで
* 画面を飛ばすと、XmlHttpRequestが画面の表示内容を受け取ってしまうため、
* 結果がうまく表示されません。
* 又、bucket.printXml系のメソッドを実行すると、出力内容が確定してしまっているため、
* RequestDispatcher.forwardを呼び出すと、ServletExceptionがスローされます。
* @param bucket ActionBucketインスタンス
* @return Globals.RET_NOFORWARDを返します
*/
public String doExecute(ActionBucket bucket)throws Exception{
String emp_no = (String)getParameter("empNo");
String emp_name = "該当なし";
if( emp_no.equals("0000")){
emp_name="太郎";
}else if( emp_no.equals("0001")){
emp_name="加納";
}else if( emp_no.equals("0002")){
emp_name="hanako";
}
System.out.println(emp_name);
//引数に指定した文字列を、テキスト形式のレスポンスとして出力します
bucket.print(emp_name);
return Globals.RET_NOFORWARD;
}
}
インプットボックスに入力された従業員番号をgetParameter("emp_no");
で取得しています
従業員番号に合致する氏名がヒットした場合、bucket.print(emp_name);
で結果をクライアントに送信します。
又、このサンプルではフォームクラスを使用していません。
"return Globals.RET_NOFORWARD"は、フレームワークに対して、画面遷移を行わせないことを
表します。
Ajaxのような非同期通信を行う場合、Globals.RET_NOFORWARDを指定し、フレームワークが
画面遷移処理を行わないようにする必要があります。
5) 実行
ここまでの作業が完了したら、コンパイル・デプロイを行い、動作を確認してみましょう。