1.
2.
3.
4.
1. formパーツ出力サンプル
仕様：先頭が"東京"の金融機関名を検索し、セレクトボックス,チェックボックス,ラジオボタンで表示する。
言語：JavaScript(JSONP), レスポンス:form_select, form_check, form_radio
メモ：最も簡単なサンプルコードです。ブラウザ表示時に一定の条件でformパーツを表示したい場合は、
下記のようにscriptタグを追記することで、非常に簡単にformの部品を表示することが可能です。
ソースコード
<script type="text/javascript" src="http://www.pb-lab.net/wsm/ws/?name_top=%E6%9D%B1%E4%BA%AC&_ws_id=222&_fmt=form_select&_i_val=bank_cd&_i_lbl=bank_name&_t_name=sp1_select&_fhtml=0&_oe=UTF-8"></script><br>
<hr>
<script type="text/javascript" src="http://www.pb-lab.net/wsm/ws/?name_top=%E6%9D%B1%E4%BA%AC&_ws_id=222&_fmt=form_check&_i_val=bank_cd&_i_lbl=bank_name&_t_name=sp1_check&_fhtml=0&_oe=UTF-8"></script><br>
<hr>
<script type="text/javascript" src="http://www.pb-lab.net/wsm/ws/?name_top=%E6%9D%B1%E4%BA%AC&_ws_id=222&_fmt=form_radio&_i_val=bank_cd&_i_lbl=bank_name&_t_name=sp1_radio&_fhtml=0&_oe=UTF-8"></script><br>
実行結果
2. formパーツカスタム出力サンプル
仕様：先頭が"東北"の路線一覧検索し、HTMLを組み立てて表示する。
言語：JavaScript(JSON), レスポンス:json
メモ：前述のサンプルよりさらに細かい制御をformパーツに行いたい場合は、
独自のHTML組み立て用関数(下記の場合は jsonRailwaySampleFeed)を定義します。
この関数は、WsMからのレスポンスによりコールバックされ、引数にjson形式のデータが格納されます。
関数内ではこのデータを利用しHTMLを更新するコードを記述します。
ソースコード
<script language="JavaScript"><!--
function jsonRailwaySampleFeed(json,error) {
if (error) { alert(error); return;}
var items = json["railway"];
var html = "";
for(var i = 0; i < items.length; i++) {
var elem = items[i];
html += "<dt>railway_id="+ elem["railway_id"] + "</dt>"
html += "<dt>railway_name="+ elem["railway_name"] + "</dt>"
html += "<dt>railcorptype="+ elem["railcorptype"] + "</dt>"
html += "<dt>railcorp_name="+ elem["railcorp_name"] + "</dt>"
html += "<hr>";
}
document.getElementById("list_jsonp").innerHTML = html;
}
//-->
</script>
<dl id="list_jsonp" />
<script type="text/javascript" src="http://www.pb-lab.net/wsm/ws/?name_top=%E6%9D%B1%E5%8C%97&_ws_id=218&_oe=UTF-8&_fmt=jsonp&_jsonpfn=jsonRailwaySampleFeed"></script>実行結果
3. セレクトボックス動的表示サンプル
仕様：指定した金融機関名と前方一致する金融機関を検索し、検索した結果をセレクトボックスに表示する。
言語：JavaScript(JSONP), レスポンス:form_select
メモ：画面の入力値によってセレクトボックスの内容を動的に変更したい場合は、jsonpとform_selectレスポンスを利用します。
具体的には、json_sample_init 関数内にて、"検索"ボタンクリック時に src 変数にURL渡し、script エレメントを作成します。
さらに script エレメントを任意の箇所にエレメントに追加(appendChild)することで、src の JavaScript が実行されます。
JavaScriptのコードには "jsonBankSampleFeed([セレクトボックスHTML])" が記述され、このまま実行されるので、
この関数内でHTMLを表示する処理(innerHTML = html)を記述すると動的にセレクトボックスを表示することが可能です。
他のチェックボックス, ラジオボタンに関しても同様です。
※jQueryを利用しています
ソースコード
<script language="JavaScript"><!--
function jsonBankSampleFeed(html) {
document.getElementById('list_json').innerHTML = html;
}
function json_sample_init() {
$("#json_sample_search_btn").click(function() {
var q = $("#json_sample_search_query").val();
var src = "http://www.pb-lab.net/wsm/ws/??name_top="
+encodeURI(q)
+"&_ws_id=222&_oe=UTF-8&_fmt=form_select&_i_val=bank_cd&_i_lbl=bank_name&_t_name=bankcd&_fhtml=2&_jsonpfn=jsonBankSampleFeed";
var script = document.createElement("script");
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', src);
var head = document.getElementById('list_json');
// var head = document.getElementsByTagName('head').item(0);
// console.log(head);
head.appendChild(script);
});
}
$(json_sample_init);
//-->
</script>
デモ (検索ボタンをクリックしてください)
4. JAVAサンプル(xml)
仕様：先頭が"東北"の路線一覧検索結果をXMLで受取り、XMLを解析してMapのリストとして取得し表示する。
言語：JAVA, レスポンス:xml
メモ：JAVAでWsMのレスポンスを扱う場合は、通常XMLレスポンスを扱います。
XMLをXMLパーサー(ここでは SAXParser)によって解析し、任意のオブジェクトに変換してデータを扱います。
ソースコード JsmSampleXmlHandler.java
JsmSampleXmlHandler.java
※ダウンロードしてご覧下さい
実行コマンド
java JsmSampleXmlHandler
実行結果
railcorptype=1
railway_id=56
railway_name=東北新幹線
railcorp_name=JR(新幹線)
----------
railcorptype=2
railway_id=30
railway_name=東北本線
railcorp_name=JR(在来線)
----------
