これまでとほとんど同じプログラムなので、選択リストボックスを動的に作成するところ以外は簡単だと思います。
Ajax で非同期通信することで、XML形式のデータを、フォーム部品の値として表示する方法をつかんでください。
選択リストボックスは、「オプションメニュー」や「セレクトボックス」という場合もあります。
■index.html側
sample005と比べると、ボタンを除いただけです。
■index.js側
ページを読み込んだ直後に、すぐ選択リストボックスを表示するため、関数 init() の中で関数 prefDisp() を呼び出すようにしました。
function init() {
省略
prefDisp();
}
■pref.js側
(1)選択リストボックスの開始タグを、変数に代入している部分です。
tmpHtml += "<form><select name='selectPref'>";
(2)選択リストボックスの最初のオプション(1行目)を作成している部分です。
tmpHtml += "<option value='0' selected>選択してください。</option>";
(3)for文で、選択リストボックスのオプション(2行目以降)を、レコード件数分だけ連結している部分です。
<option value='1'>北海道</option> のような値と項目になります。
for(i = 0; i < item.length; i++){
var prefCd = item[i].getElementsByTagName('PREF_CD');
var prefCdValue = prefCd[0].firstChild.nodeValue;
var prefName = item[i].getElementsByTagName('PREF_NAME');
var prefNameValue = prefName[0].firstChild.nodeValue;
tmpHtml +="<option value='" + prefCdValue + "'>" + prefNameValue + "</option>\n";
}
(4)選択リストボックスの終了タグを、変数に代入している部分です。
tmpHtml += "</select></form>";
(5)プログラムで組み立てた選択リストボックスを、ブラウザの画面に表示している部分です。
result.innerHTML = tmpHtml;
■pref.php側
sample005では静的な XML を使っていましたが、sample009では動的な XML に変更してみました。
・静的なXML
http://ws.bzen.net/pgtop/pref.xml
↓
・動的なXML
http://ws.bzen.net/pgtop/GetPref.php
どちらを使っても結果は同じです。
動的な GetPref.php は、データベースのレコードを XML 形式に加工して出力するプログラムです。一種のWebサービスだと考えると、GetPref.php プログラムの中身はブラックボックスでかまいません。
Webサービスは、使い方さえわかれば、プログラムの中でどういった処理が行われているのか、考慮しなくても大丈夫です。(楽天や Amazon の Web サービスでも同じ)
＊GetPref.php はサーバーに負荷がかかるため、学習目的でのみお使いください。その他の利用は禁止します。
【ワンポイント】
今回、選択リストボックスの表示に「.innerHTML」プロパティを使いました。この方法が一番簡単だからです。innerHTML は HTML タグや文字列を直接代入できるため、わかりやすいというメリットがあります。
しかし動的に生成したフォーム部品に、イベントハンドラを設定すると、不具合が出ることがあります。したがって、「.innerHTML」ではなく DOM(ドム:Document Object Model) を使ったほうがよいと言われています。
DOM を使う方法については、次回に説明します。
