≪サンプル説明≫
郵便番号の右横のopenの上にマウスカーソルを重ねると住所テーブルが表示されます。
このとき非同期通信でWEBサーバ上のテーブルデータを取得し表示しています。
≪作成時注意点≫
・Ajaxの使用方法の詳細は『Ajaxを使ったマスタデータ取得方法』と同じですので
まずそちらを参照してください。
・テーブル（テーブルタグで構成されたテーブル）等のHTMLをAjaxを使用して
送信し、表示させるときには以下の注意が必要です。
・レスポンスデータにHTMLのタグを含むデータをセットすると、<や>等の記号は
安全のため<や>に変換されブラウザーに送られます。
そのため、HTMLのタグを含むデータは意図した様に表示されません。
この対処法として引数にboolean safeHTML, boolean safeStringが付加されている
ResponseData.putメソッドを使用し、両フラグともfalseを指定してデータをセットしてください。
【例】responseData.put("area" + openNo, createZipTable(openNo), false, false);
・このときHTMLタグ以外のデータ部にHTMLタグと解釈できる文字列が含まれていると
画面が崩れたりセキュリティーホールとして悪用される危険性があります。
そのためデータ部はHtmlTools#webStringメソッドを使用してHTML上安全な文字列に変換した
物を使用するようにしてください。
【例】郵便番号・住所テーブル作成メソッド
private String createZipTable(String code3) {
TreeMap<String, String> map = AjaxZipDB.getCode3Map(code3);
StringBuilder sb = new StringBuilder();
sb.append("<table border=\"1\">");
sb.append("<tr style=\"background-color: #e0ffe0\">");
sb.append("<th>");
sb.append("郵便番号");
sb.append("</th>");
sb.append("<th>");
sb.append("住所");
sb.append("</th>");
sb.append("</tr>");
if (map != null) {
for (String zipCode : map.keySet()) {
sb.append("<tr>");
sb.append("<td style=\"background-color: #e0ffff\">");
sb.append(HtmlTools.webString(zipCode.substring(0, 3)));
sb.append("-");
sb.append(HtmlTools.webString(zipCode.substring(3)));
sb.append("</td>");
sb.append("<td style=\"background-color: #ffffe0\">");
sb.append(HtmlTools.webString(map.get(zipCode)));
sb.append("</td>");
sb.append("</tr>");
}
}
sb.append("</table>");
return sb.toString();
}
ソースファイル
AjaxTable.html サンプル画面のHTMLファイル
<html>
<head>
<head>
<title>pirka逆引きサンプル Ajaxを使ったテーブルの部分更新方法</title>
<script name="ajax" type="text/javascript"></script>
</head>
<body>
<center>
<span style="color: #8080ff">pirka逆引きサンプル Ajaxを使ったテーブルの部分更新方法</span><br>
</center>
<hr>
<br>
〒マークの横のopenまたはcloseにマウスカーソルを乗せてください<be>
<form name="testForm" method="post">
<input type="submit" name="returnButton1" value="戻る"><Br><Br>
〒330- <A href="#" name="o330">open</a> <A href="#" name="c330">close</a><br>
<div id="area330"></div><br>
〒331- <A href="#" name="o331">open</a> <A href="#" name="c331">close</a><br>
<div id="area331"></div><br>
〒332- <A href="#" name="o332">open</a> <A href="#" name="c332">close</a><br>
<div id="area332"></div><br>
〒333- <A href="#" name="o333">open</a> <A href="#" name="c333">close</a><br>
<div id="area333"></div><br><Br>
<input type="submit" name="returnButton2" value="戻る"><Br>
</form>
</body>
</html>
package jp.oarts.pirka.sample.instruction.is103000;
import java.util.Map;
import java.util.TreeMap;
import jp.oarts.pirka.core.ajax.AjaxScript;
import jp.oarts.pirka.core.ajax.JavaScriptInnerHTML;
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.analyzer.html.HtmlTools;
import jp.oarts.pirka.core.kernel.FieldMap;
import jp.oarts.pirka.core.win.PirkaWindow;
import jp.oarts.pirka.sample.instruction.is102900.ZipDB;
/**
* pirka逆引きサンプル Ajaxを使ったテーブルの部分更新方法
*/
public class AjaxTable extends PirkaWindow {
/**
* コンストラクタ
*/
public AjaxTable() {
FieldMap field = getFieldMap();
// AjaxJavaScriptオブジェクト作成
AjaxScript script = new AjaxScript() {
// JavascriptよりXMLHttpRequestで呼ばれたときに動作するメソッド
@Override
public ResponseData run(Map<String, String[]> param) {
String[] strings = param.get("openNo");
String openNo = "";
if (strings != null && strings.length > 0) {
openNo = strings[0];
}
strings = param.get("mode");
String mode = "";
if (strings != null && strings.length > 0) {
mode = strings[0];
}
ResponseData responseData = new ResponseData();
if ("open".equals(mode)) {
responseData.put("area" + openNo, createZipTable(openNo), false, false);
} else {
responseData.put("area" + openNo, "", false, false);
}
return responseData;
}
};
script.addResScript(new JavaScriptInnerHTML("area330", new ResponseName("area330")));
script.addResScript(new JavaScriptInnerHTML("area331", new ResponseName("area331")));
script.addResScript(new JavaScriptInnerHTML("area332", new ResponseName("area332")));
script.addResScript(new JavaScriptInnerHTML("area333", new ResponseName("area333")));
field.setAjaxScript("ajax", script);
field.setOption("o330", "onmouseover", OnEventJavaScript.getSource("ajax", true, new RequestData("openNo", "330"), new RequestData("mode", "open")));
field.setOption("c330", "onmouseover", OnEventJavaScript.getSource("ajax", true, new RequestData("openNo", "330"), new RequestData("mode", "close")));
field.setOption("o331", "onmouseover", OnEventJavaScript.getSource("ajax", true, new RequestData("openNo", "331"), new RequestData("mode", "open")));
field.setOption("c331", "onmouseover", OnEventJavaScript.getSource("ajax", true, new RequestData("openNo", "331"), new RequestData("mode", "close")));
field.setOption("o332", "onmouseover", OnEventJavaScript.getSource("ajax", true, new RequestData("openNo", "332"), new RequestData("mode", "open")));
field.setOption("c332", "onmouseover", OnEventJavaScript.getSource("ajax", true, new RequestData("openNo", "332"), new RequestData("mode", "close")));
field.setOption("o333", "onmouseover", OnEventJavaScript.getSource("ajax", true, new RequestData("openNo", "333"), new RequestData("mode", "open")));
field.setOption("c333", "onmouseover", OnEventJavaScript.getSource("ajax", true, new RequestData("openNo", "333"), new RequestData("mode", "close")));
}
/**
* 住所コード3桁から該当する一覧のHTMLテーブルイメージを作成する
* @param code3 住所コード頭3桁
* @return HTML
*/
private String createZipTable(String code3) {
TreeMap<String, String> map = ZipDB.getCode3Map(code3);
StringBuilder sb = new StringBuilder();
sb.append("<table border=\"1\">");
sb.append("<tr style=\"background-color: #e0ffe0\">");
sb.append("<th>");
sb.append("郵便番号");
sb.append("</th>");
sb.append("<th>");
sb.append("住所");
sb.append("</th>");
sb.append("</tr>");
if (map != null) {
for (String zipCode : map.keySet()) {
sb.append("<tr>");
sb.append("<td style=\"background-color: #e0ffff\">");
sb.append(HtmlTools.webString(zipCode.substring(0, 3)));
sb.append("-");
sb.append(HtmlTools.webString(zipCode.substring(3)));
sb.append("</td>");
sb.append("<td style=\"background-color: #ffffe0\">");
sb.append(HtmlTools.webString(map.get(zipCode)));
sb.append("</td>");
sb.append("</tr>");
}
}
sb.append("</table>");
return sb.toString();
}
/**
* 戻るボタン（上）が押された時の処理<BR>
*/
public PirkaWindow returnButton1() {
return null;
}
/**
* 戻るボタン（下）が押された時の処理<BR>
*/
public PirkaWindow returnButton2() {
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", "神奈川県愛甲郡清川村宮ケ瀬");
}
}
