≪サンプル説明≫
郵便番号フィールドに郵便番号を入力しタブキー等で郵便番号フィールドから
フォーカスが離れると住所フィールドに郵便番号に対応する住所が表示されます。
このときサブミットを行わない非同期通信でWEBサーバ上のデータを検索し住所を取得しています。
≪作成時注意点≫
・pirkaは標準でAjaxをサポートしているためサブミット無しでWEBサーバーとの
同期／非同期通信を行うことが可能です。
・実行時のブラウザの設定はJavaScriptが有効でなければ正しく動作しません。
・Ajaxを使用するにはAjaxScriptオブジェクトを作成します。
AjaxScriptオブジェクトはAjaxScriptクラスから派生させたクラスより作成してください。
派生したクラスはWEBブラウザから同期／非同期で送信されるデータを受信
したときに動作し処理を行うrunメソッドを実装してください。
runメソッドではブラウザーから送信されるデータを引数として取得し、ブラウザーへ
戻すレスポンスとしてResponseDataオブジェクトを戻します。
【例】AjaxScriptのオブジェクトを無名クラスとして作成
引数の郵便番号（zipCode）から住所を検索し、検索された値をレスポンスデータのadrsとして戻す
AjaxScript script2 = new AjaxScript() {
public ResponseData run(Map<String, String[]> param) {
// 郵便番号から住所を検索しセットレスポンスにセット
ResponseData responseData = new ResponseData();
String[] zipCode = param.get("zipCode");
if (zipCode != null && zipCode.length > 0) {
responseData.put("adrs", AjaxZipDB.getAdrs(zipCode[0]));
} else {
responseData.put("adrs", "");
}
return responseData;
}
};
・AjaxScriptオブジェクトはブラウザー側で動作する処理を登録することができます。
通信前に動作する処理はaddPreScriptメソッド、通信後はaddResScriptメソッド、
エラー時はaddErrScriptメソッドを使用して登録を行います。
登録できる処理はJavaScriptのラッパーオブジェクトであり、複数登録することも可能です。
以下は定義済みJavaScriptのラッパークラスです。
1) JavaScriptAlert アラート（メッセージボックス）を表示
2) JavaScriptElementById HTML上のID属性で指定されるオブジェクトの任意のプロパティにデータをセット
3) JavaScriptInnerHTML HTML上のID属性で指定されるオブジェクトのinnerHTMLプロパティにデータをセット
4) JavaScriptInnerText HTML上のID属性で指定されるオブジェクトのinnerTextプロパティにデータをセット
5) JavaScriptSource 指定された文字列をJavaScriptとして動作させる
6) JavaScriptSrc HTML上のID属性で指定されるオブジェクトのsrcプロパティにデータをセット
7) JavaScriptValue HTML上のID属性で指定されるオブジェクトのvalueプロパティにデータをセット
【例】サーバー呼び出し前にID=smarkに"★"をセット
script2.addPreScript(new JavaScriptInnerHTML("smark", "★"));
【例】サーバーからレスポンスが戻された後にID=smarkに"☆"をセットし、ID=adrsにレスポンスデータのadrsを
セットする
script2.addResScript(new JavaScriptInnerHTML("smark", "☆"));
script2.addResScript(new JavaScriptValue("adrs", new ResponseName("adrs")));
【例】サーバーと通信がエラーとなったときに通信エラーのアラートを表示
script2.addErrScript(new JavaScriptAlert("通信エラー"));
・作成したAjaxScriptオブジェクトをコンストラクタ等でSCRITPタグへsetAjaxScriptメソッドを使用して
セットします。
【例】HTML
<script name="ajaxTest02" type="text/javascript"></script>
【例】Java
field.setAjaxScript("ajaxTest02", script2);
・AjaxScriptオブジェクトはブラウザに送られるHTML内では以下の
functionとして自動挿入されます。
通信が必要な何らかのイベント時発生時に上記ファンクションをJavaScriptで呼び出してください。
function scriptName(async, data);
scriptName : SCRIPTタグのname属性の値（名前）
async : trueのときは非同期通信、falseの時は同期通信
data : プロパティ名とその値で構成されるオブジェクト（JSON:JavaScript Object Notation）
であり、WEBサーバーに送信されAjaxScriptオブジェクトのrunメソッドの引数となる
・またOnEventJavaScript#getSourceメソッドを使用しJavaScriptの記述なしでAjax用のファンクションを
呼び出すこともできます。
【例】zipCodeフィールドのonChange属性に自フィールド値をzipCodeとしてajaxTest02を
呼び出すJavascriptコードを設定
field.setOption( "zipCode", "onChange",
OnEventJavaScript.getSource( "ajaxTest02", true, new RequestData("zipCode")));
ソースファイル
AjaxGetMstData.html サンプル画面のHTMLファイル
<html>
<head>
<head>
<title>pirka逆引きサンプル Ajaxを使ったマスタデータ取得方法</title>
<script name="ajaxScript" type="text/javascript"></script>
</head>
<body>
<center>
<span style="color: #8080ff">pirka逆引きサンプル Ajaxを使ったマスタデータ取得方法</span><br>
<hr>
<br>
<form name="testForm" method="post">
<table>
<tr>
<td>氏名</td>
<td><input type="text" name="name" size="50"></td>
</tr>
<tr>
<td>郵便番号<span style="color: #c0c000" id="smark">☆</span></td>
<td><input type="text" name="zipCode" size="10" maxlength="8">（東京、埼玉、神奈川は自動検索されます）</td>
</tr>
<tr>
<td>住所</td>
<td><textarea name="adrs" id="adrs" warp="soft" rows="5" cols="50"></textarea></td>
</tr>
<tr>
<td><input type="submit" name="execButton" value="登録">
<input type="submit" name="returnButton" value="戻る"><Br>
</td>
<td></td>
</tr>
</table>
</form>
</center>
</body>
</html>
package jp.oarts.pirka.sample.instruction.is102900;
import java.util.Map;
import jp.oarts.pirka.core.ajax.AjaxScript;
import jp.oarts.pirka.core.ajax.JavaScriptAlert;
import jp.oarts.pirka.core.ajax.JavaScriptInnerHTML;
import jp.oarts.pirka.core.ajax.JavaScriptValue;
import jp.oarts.pirka.core.ajax.OnEventJavaScript;
import jp.oarts.pirka.core.ajax.RequestData;
import jp.oarts.pirka.core.ajax.ResponseData;
import jp.oarts.pirka.core.ajax.ResponseName;
import jp.oarts.pirka.core.kernel.FieldMap;
import jp.oarts.pirka.core.win.PirkaWindow;
/**
* pirka逆引きサンプル Ajaxを使ったマスタデータ取得方法
*/
public class AjaxGetMstData extends PirkaWindow {
/**
* コンストラクタ
*/
public AjaxGetMstData() {
FieldMap field = getFieldMap();
// AjaxJavaScriptオブジェクト作成
AjaxScript script = new AjaxScript() {
// JavascriptよりXMLHttpRequestで呼ばれたときに動作するメソッド
@Override
public ResponseData run(Map<String, String[]> param) {
// 郵便番号から住所を検索しセットレスポンスにセット
ResponseData responseData = new ResponseData();
String[] zipCode = param.get("zipCode");
if (zipCode != null && zipCode.length > 0) {
responseData.put("adrs", ZipDB.getAdrs(zipCode[0]));
} else {
responseData.put("adrs", "");
}
return responseData;
}
};
// サーバー呼び出し前にID=smarkに"★"をセットするJavascriptを追加
script.addPreScript(new JavaScriptInnerHTML("smark", "★"));
// サーバーからレスポンスが戻された後にID=smarkに"☆"をセットするJavascriptを追加
script.addResScript(new JavaScriptInnerHTML("smark", "☆"));
// サーバーからレスポンスが戻された後にID=adrsにレスポンスデータのadrsをセットするJavascriptを追加
script.addResScript(new JavaScriptValue("adrs", new ResponseName("adrs")));
// サーバーと通信がエラーとなったときに通信エラーのアラートを表示するJavascriptを追加
script.addErrScript(new JavaScriptAlert("通信エラー"));
// ajaxTest02フィールドに上記で作成したAjaxJavaScriptオブジェクトをセット
field.setAjaxScript("ajaxScript", script);
// zipCodeフィールドのonChange属性に自フィールド値をzipCodeとしてajaxScriptを呼び出すJavascriptコードを設定
field.setOption("zipCode", "onChange", OnEventJavaScript.getSource("ajaxScript", true, new RequestData("zipCode")));
}
/**
* 登録ボタンが押された時の処理<BR>
* 全フィールドクリア
*/
public void execButton() {
FieldMap field = getFieldMap();
field.setValue("name", "");
field.setValue("zipCode", "");
field.setValue("adrs", "");
}
/**
* 戻るボタンが押された時の処理<BR>
*/
public PirkaWindow returnButton() {
return null;
}
}
package jp.oarts.pirka.sample.instruction.is102900;
import java.util.HashMap;
import java.util.Map;
import java.util.TreeMap;
/**
* サンプル用郵便番号データベース
*/
public class ZipDB {
/** 郵便番号マップ */
private static Map<String, String> zipMap;
/** 郵便番号3桁マップ */
private static Map<String, TreeMap<String, String>> zipMap3;
static {
zipMap = new HashMap<String, String>();
zipMap3 = new TreeMap<String, TreeMap<String, String>>();
setDataS(zipMap);
setDataT(zipMap);
setDataK(zipMap);
for(String code : zipMap.keySet()){
String code3=code.substring(0,3);
TreeMap<String, String> subMap=zipMap3.get(code3);
if(subMap==null){
subMap=new TreeMap<String, String>();
zipMap3.put(code3, subMap);
}
subMap.put(code, zipMap.get(code));
}
}
/**
* 郵便番号より住所を検索する<b>
* @param zipCode 郵便番号
* @return 住所 ただし、対応する住所が無い時はnull
*/
public static String getAdrs(String zipCode) {
if (zipCode == null) {
return "";
}
StringBuilder sb= new StringBuilder();
for(char c : zipCode.toCharArray()){
if(c>='0' && c<='9'){
sb.append(c);
}
}
String adrs = zipMap.get(sb.toString());
if (adrs == null) {
return "";
}
return adrs;
}
/**
* 郵便番号頭3桁より該当する住所マップを作成する<b>
* @param code3 郵便番号頭3桁
* @return 住所マップ
*/
public static TreeMap<String, String> getCode3Map(String code3){
return zipMap3.get(code3);
}
// 以下テストデータ ////////////////////////////////////////////////////////////
private static void setDataS(Map<String, String>zipMap){
zipMap.put("3310000", "埼玉県さいたま市西区");
zipMap.put("3310058", "埼玉県さいたま市西区飯田");
・
・
・
zipMap.put("3430113", "埼玉県北葛飾郡松伏町ゆめみ野");
zipMap.put("3430114", "埼玉県北葛飾郡松伏町ゆめみ野東");
}
private static void setDataT(Map<String, String>zipMap){
zipMap.put("1000000", "東京都千代田区");
zipMap.put("1020072", "東京都千代田区飯田橋");
・
・
・
zipMap.put("1002101", "東京都小笠原村父島");
zipMap.put("1002211", "東京都小笠原村母島");
}
private static void setDataK(Map<String, String>zipMap){
zipMap.put("2300000", "神奈川県横浜市鶴見区");
zipMap.put("2300033", "神奈川県横浜市鶴見区朝日町");
・
・
・
zipMap.put("2430112", "神奈川県愛甲郡清川村煤ケ谷（その他）");
zipMap.put("2430111", "神奈川県愛甲郡清川村宮ケ瀬");
}
}
