スポンサード リンク

Ajax 選択リストボックスを動的に作成する方法

今回は Ajax を使って、非同期通信で取得した XML データを、「選択リストボックス」にしてみましょう。

選択リストボックスは Web サイトでよく使われています。選択リストボックスを使うと、一覧から入力できるようになります。

しかもデータベースに連動して動的に変化させる方法を覚えておくと、用途がとても広がります。


【1】sample005 フォルダをコピーして sample009 フォルダを作成します。

ajax-312.gif


【2】今回は最終的に以下のようなファイルの構成になります。プログラムを一部変更します。

ajax-313.gif

*index.css に変更はありません。
*「\」はWindowsでは円記号のことです。

保存先 C:\phpdev\www\ajax\sample009
ファイル名 index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../lib/prototype.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="pref.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
    <title>pref</title>
  </head>
  <body>
    <div id="state"></div>
    <div id="result"></div>
  </body>
</html>


保存先 C:\phpdev\www\ajax\sample009
ファイル名 index.js

onload = init;
var state;
var result;

function init() {
  state = $('state');
  result = $('result');
  prefDisp();
}

function clearDisp() {
  state.innerHTML = "";
  result.innerHTML = "";
}


保存先 C:\phpdev\www\ajax\sample009
ファイル名 pref.js

function prefDisp() {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "pref.php";
  var paramList = "";

  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var response = data.responseXML.getElementsByTagName('Response');

    var item = response[0].getElementsByTagName('Item');
    var tmpHtml="";
    tmpHtml += "<form><select name='selectPref'>";
    tmpHtml += "<option value='0' selected>選択してください。</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";
    }

    tmpHtml += "</select></form>";

    result.innerHTML = tmpHtml;
    state.innerHTML = "データを取得しました。<br />\n";
  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}


保存先 C:\phpdev\www\ajax\sample009
ファイル名 pref.php

<?php
  header("Content-type: application/xml");
  $url = "http://ws.bzen.net/pgtop/GetPref.php";
  readfile($url);
?>


保存先 C:\phpdev\www\ajax\sample009
ファイル名 index.css

#state {
  font-size:16px;
  color:#0000cc;
  margin-top:10px;
  margin-bottom:10px;
}

#result {
  font-size:14px;
  color:#000000;
}



準備ができたら、Webサーバーを起動して動作を確認してみましょう。

【3】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【4】Firefox を起動して、動作を確認してみましょう。

http://localhost/ajax/sample009/

ajax-315.gif

*ページを読み込んだ直後にプログラムが動きます。


【5】「選択リストボックス」をクリックします。

ajax-316.gif


【6】都道府県のリストが表示されるので、好きなものを選択してください。

ajax-317.gif


【7】都道府県が選択できました。

ajax-318.gif


【8】同様に Internet Explorer でも動作を確認してください。

ajax-314.gif


【解説】

(1)元になる XML のデータは Web 上のデータベースにあります。

まずデータベースのレコードを GetPref.php で XML 形式に加工して出力しています。
http://ws.bzen.net/pgtop/GetPref.php

それを中継プログラムの pref.php で同一ドメイン内にします。そして Ajax の非同期通信で取り込み、JavaScript のプログラムで選択リストボックスを組み立てる仕組みです。

データベース → GetPref.php(XML出力) → pref.php(中継) → 選択リストボックス組み立て → 画面に表示

この方法のメリットは、データベースのデータが変われば、自動的に選択リストボックスの値にも反映されることです。

*GetPref.php は pref.php の中で呼び出しています。
*サーバーに負荷がかかるため、 GetPref.php は学習目的でのみお使いください。


(2)選択リストボックスの用途について

例えば選択リストボックスをチェンジした時に、イベントハンドラを設定すれば、都道府県を切り替えた瞬間に、該当する市町村だけを表示するような応用ができます。

↓このような使い方( Internet Explorer で確認)
全国の特産品検索

またはネットショップの注文画面で、顧客に住所を入力してもらうときに使うことができます。


プログラムの変更点については、次回に詳しく解説します。


スポンサード リンク






Ajax初心者入門講座TOPへ