Ajax sample011で使用したプログラムの解説。

今回は sample011 で使用した Ajax プログラムについて、解説します。実際にプログラムを動かしながら解説を読むと理解が深まります。

DOM を使って要素数を調べて、子要素を削除しているところがポイントです。


■index.html側

(1)新しい JavaScript の外部ファイルを読み込む部分を追加しました。
<script type="text/javascript" src="city.js"></script>


(2)タイトルを変えました。
<title>pref・city</title>

(3)新しい div 要素(result2)を追加しました。
<div id="result2"></div>


■index.js側

(1)変数を追加しました。
var result2;

(2)変数で div 要素(result2)を参照できるようにしている部分です。
result2 = $('result2');

(3)関数 clearDisp() は使わないので、削除しました。


■pref.js側

(1)都道府県の選択リストボックスを切り替えた時に、呼び出される関数 prefChange() の中に、市町村をクリアする関数 clearCity() と、市町村を表示する関数 cityDisp() を加えました。

function prefChange(obj) {
    省略

    //市町村をクリア
    clearCity();
    //市町村を表示
    cityDisp(prefCd);
  }
}

(2)関数 cityDisp() は、取得した値(value)を引数にしているところがポイントです。
cityDisp(prefCd);

*prefCd は市町村の抽出条件に使われます。


■city.js側

(1)city.js は、ほどんと pref.js と同じです。大きな違いは関数 clearCity() だけです。

function clearCity() {
  //result2の子要素を取得
  var sel = result2.childNodes;

  //既に子要素がある場合は削除
  if (sel.length >= 1) {
    result2.removeChild(sel[0]);
  }

}

(2)div 要素(result2)の子要素を取得している部分です。
var sel = result2.childNodes;

・div 要素(result2)からみると、select要素が子要素になります。
・childNodes の戻り値は配列になります。


(3)子要素がある場合(すでにselect要素がある)は、削除しています。
result2.removeChild(sel[0]);

・1回目は子要素が無いので何もしません。
・selは配列です。子要素は1個しかないので、[0]番目を指定しています。
 (配列は0から始まるため)


(4)clearCity()を呼び出さないと、以下のようにselect要素がどんどん増えます。

ajax-342.gif

pref.js でコメントにすると確認できます。
//clearCity();


■pref.php側
pref.phpに変更はありません。


■city.php側

(1) city.phpでは、GETメソッドで値を受け取った場合は、さらに「GetCity.php」を呼び出し、XMLとして出力します。値を受け取らなかった場合は、HTMLとしてメッセージを出力します。

<?php
  if (isset($_GET["prefCd"])){
    header("Content-type: application/xml");
    $prefCd = $_GET["prefCd"];
    $url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;
    readfile($url);
  }else{
    header("Content-type: text/html");
    print "パラメータに prefCd を含めてください。";
  }
?>


(2)if文を使って、GETメソッドで値を受け取ったかどうかで、処理を分岐しています。

if (isset($_GET["prefCd"])){
  省略
}else{
  省略
}


(3)XMLで出力することをブラウザに送信する処理です。
header("Content-type: application/xml");


(4)受け取った値を変数に代入している部分です。
$prefCd = $_GET["prefCd"];


(5)受け取った値を、さらに外部ドメインのプログラムへのパラメータとして組み立てている部分です。
$url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;


(6)実際に外部のドメインにあるファイルを開いているのは、readfile()関数を使っているこの1行です。

readfile($url);


(7)HTMLで出力することをブラウザに送信する処理です。
header("Content-type: text/html");


■index.css側

(1)div 要素(result2)を追加したので、CSSにも追加しました。

#result2 {
  省略
}


(2)選択リストボックスを横に並べるため、要素を回り込ませています。
float:left;

・floatを指定しなかった場合は、下に表示されます。
ajax-343.gif


(3)div 要素の間を広げています。
margin-right:10px;

ajax-344.gif


(4)選択リストボックスで、フォントサイズは効果がないので不要です。
font-size:14px;

これは以前に、ブラウザの画面に div 要素として、直接出力していた時の名残です。削除してかまいません。




Ajax sample011の動作確認をしてみる。

前回に作成した Ajax プログラムの動作を確認してみましょう。

このプログラムは、都道府県を切り替えたら、自動的に市町村が変わるというものです。使い方をマスターすれば、いろいろ応用範囲が広がります。

プログラムがまだの方は一つ前のステップをご覧ください。

プログラムの準備ができたら、Webサーバーを起動して動作を確認します。

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

ajax-166.gif


【2】まずは「city.php」がちゃんと動くか確認します。

http://localhost/ajax/sample011/city.php?prefCd=1

ajax-330.gif

*city.php の確認は非常に重要です。

city.php で XML が表示されなければ、city.js のプログラムも動きません。city.php は別ドメインにある「GetCity.php」を、同一ドメイン(localhost)にするための、中継プログラムです。


【3】今度はわざとパラメータを含めないで動かしてみます。パラメータを含めない場合は、メッセージが表示されます。

http://localhost/ajax/sample011/city.php

ajax-331.gif


次はいよいよ Ajax プログラムの動作確認です。

【4】Firefox を起動して、動作を確認します。

http://localhost/ajax/sample0011/

ajax-333.gif


【5】どれか都道府県を選択してください。

ajax-334.gif


【6】新たに選択リストボックスが表示されました。

ajax-335.gif

新しい選択リストボックスには、選択した都道府県に対応する市町村のリストが表示されます。


【7】どれか市町村を選択してください。

ajax-336.gif


【8】選択した市町村の値が、メッセージとして表示されました。

ajax-337.gif


【9】他の都道府県に切り替えてみましょう。

ajax-338.gif


【10】都道府県を切り替えると、市町村がリセットされます。

ajax-339.gif


【11】選択した都道府県に対応する市町村のリストに変わりました。

ajax-340.gif


【12】他の都道府県や市町村でも試してください。


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

・Internet Explorer の場合
ajax-341.gif


【ワンポイント】

市町村の選択リストボックスを切り替えたときに、取得した値を使って、次のプログラムを呼び出す条件にすれば、 全国の特産品検索 のような使い方ができます。
(Internet Explorer で確認)


Ajax 都道府県から市町村を絞り込んで表示する方法。

今回は都道府県を選択すると、該当する市町村の一覧が表示できる Ajax プログラムについて説明します。

全国に都道府県は 47 しかありませんが、市町村は 1900 を超えます。レコードを全件表示していては大変です。

そこで「URLにパラメータを渡すと、該当する市町村のリストをXMLで返す」というWebサービスを私が作りました。

http://ws.bzen.net/pgtop/GetCity.php?prefCd=1

ajax-332.gif

prefCd=1 の数字を 1~47 の範囲で変更すると、XMLのデータが変わります。

このWebサービスを Ajax のプログラムから利用することで、都道府県を切り替えるごとに市町村が変わるフォーム部品が作れます。

*上記のWebサービスは、サーバーに付加がかかるため、この講座の学習目的でのみ利用できます。その他の目的での利用は禁止します。

今回はプログラムが長いので、プログラミング、動作確認、プログラムの解説、というステップに分けて解説します。まずはプログラミングから行ないましょう。


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

ajax-328.gif


【2】今回は最終的に以下のようなファイルの構成になります。

ajax-329.gif

・city.js と city.php は新たに作成します。
・pref.php と city.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。
・変更点があるのは index.html、index.js、pref.js、index.css です。
・pref.php に変更はありませんので省略します。

*「\」はWindowsでは円記号のことです。

保存先 C:\phpdev\www\ajax\sample011
ファイル名 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>
    <script type="text/javascript" src="city.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
    <title>pref・city</title>
  </head>
  <body>
    <div id="state"></div>
    <div id="result"></div>
    <div id="result2"></div>
  </body>
</html>


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

onload = init;
var state;
var result;
var result2;

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


保存先 C:\phpdev\www\ajax\sample011
ファイル名 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');

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectPref');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    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;

      var opt = document.createElement('option');
      opt.setAttribute('value', prefCdValue);
      var text = document.createTextNode(prefNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult要素に追加
    result.appendChild(sel);
    //イベントハンドラの設定
    $('selectPref').onchange = function (){prefChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

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

}

function prefChange(obj) {
  var prefCd = Number(obj.value);

  if (prefCd == 0) {
    state.innerHTML = "都道府県が選択されていません。<br />\n";
  } else {
    var prefName = obj.options[obj.selectedIndex].text;
    state.innerHTML = prefCd + ":" + prefName + " を選択しました。<br />\n";
    //市町村をクリア
    clearCity();
    //市町村を表示
    cityDisp(prefCd);
  }

}


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

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

  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');

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectCity');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    for(i = 0; i < item.length; i++){
      var cityCd = item[i].getElementsByTagName('CITY_CD');
      var cityCdValue = cityCd[0].firstChild.nodeValue;

      var cityName = item[i].getElementsByTagName('CITY_NAME');
      var cityNameValue = cityName[0].firstChild.nodeValue;

      var opt = document.createElement('option');
      opt.setAttribute('value', cityCdValue);
      var text = document.createTextNode(cityNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult2要素に追加
    result2.appendChild(sel);
    //イベントハンドラの設定
    $('selectCity').onchange = function (){cityChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

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

}

function cityChange(obj) {
  var cityCd = Number(obj.value);

  if (cityCd == 0) {
    state.innerHTML = "市町村が選択されていません。<br />\n";
  } else {
    var cityName = obj.options[obj.selectedIndex].text;
    state.innerHTML = cityCd + ":" + cityName + " を選択しました。<br />\n";
  }

}

function clearCity() {
  //result2の子要素を取得
  var sel = result2.childNodes;

  //既に子要素がある場合は削除
  if (sel.length >= 1) {
    result2.removeChild(sel[0]);
  }

}


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

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

#result {
  float:left;
  margin-right:10px;
  font-size:14px;
  color:#000000;
}

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


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

<?php
  if (isset($_GET["prefCd"])){
    header("Content-type: application/xml");
    $prefCd = $_GET["prefCd"];
    $url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;
    readfile($url);
  }else{
    header("Content-type: text/html");
    print "パラメータに prefCd を含めてください。";
  }
?>


pref.php を含めると、必要なファイルは全部で 7つ です。

変更点のある index.html、index.js、pref.js、index.css については、それほど大きな変更ではありません。また新たに作成した city.js と city.php も、 pref.js と pref.php を少し改良しただけです。

ファイル数が増え、プログラムも長くなったように感じるかもしれませんが、中身は今までとほとんど同じで、新しいことは少しだけです。

これまでのステップを順番に学んできた方は、詳しい説明がなくても、大体意味がつかめる力が身に付いていると思います。

プログラムの動作確認は次回に行ないます。


Ajax sample010で使用したプログラムの解説。

今回は sample010 で使用した Ajax のプログラムについて、詳しく解説します。 DOM(ドム:Document Object Model) を使っている部分を重点的に説明します。

「.innerHTML」を使った時と「DOM」を使った時で、どのように変わるのか考えながら読んでみてください。


■index.html側
HTMLには div 要素に id 名を付けているだけで、中身は空です。

<div id="result"></div>


■pref.js側

(1)select要素を作成している部分です。
var sel = document.createElement('select');

イメージ
<select></select>

*新しい要素を作成するには、createElementメソッドを使います。


(2)select要素に id 名を付けている部分です。
sel.setAttribute('id', 'selectPref');

イメージ
<select id="selectPref"></select>


(3)1行目の option 要素を作成している部分です。
var opt = document.createElement('option');

<option></option>


(4)option 要素に値をセットしている部分です。
opt.setAttribute('value', 0);

<option value="0"></option>


(5)option 要素内に項目をセットしている部分です。
var text = document.createTextNode('選択してください。');
opt.appendChild(text);

<option value="0">選択してください。</option>

*要素内に文字列を使う場合は、createTextNode で「テキストノード」を作成する必要があります。文字列を直接使うことはできないので注意してください。

*要素を親要素に追加するには、appendChildメソッドを使います。


(6)select要素に option 要素を追加している部分です。
sel.appendChild(opt);

<select id="selectPref">
  <option value="0">選択してください。</option>
</select>


(7)2行目以降の option 要素は、for文の中で作成します。レコード件数分だけ繰り返されます。

for(i = 0; i < item.length; i++){
  省略
}


(8)2行目の option 要素を作成している部分です。
var opt = document.createElement('option');

<option></option>


(9)option 要素に値をセットしている部分です。
opt.setAttribute('value', prefCdValue);

<option value="1"></option>


(10)option 要素内に項目をセットしている部分です。
var text = document.createTextNode(prefNameValue);
opt.appendChild(text);

<option value="1">北海道</option>


(11)select要素に option 要素を追加している部分です。
sel.appendChild(opt);

<select id="selectPref">
  <option value="0">選択してください。</option>
  <option value="1">北海道</option>
</select>


(12)もう一度for文が繰り返されると、以下のようになります。

<select id="selectPref">
  <option value="0">選択してください。</option>
  <option value="1">北海道</option>
  <option value="2">青森県</option>
</select>

これがどんどん繰り返されます。


(13)select要素を div 要素(result)に追加している部分です。
result.appendChild(sel);

<div id="result">
  <select id="selectPref">
    <option value="0">選択してください。</option>
    <option value="1">北海道</option>
    <option value="2">青森県</option>
  </select>
</div>

*ここではじめて画面に表示されます。


(14)select要素にイベントハンドラを設定している部分です。
$('selectPref').onchange = function (){prefChange(this);}

*thisは選択リストボックス自身です。

*select要素を作成した後でないと、イベントハンドラを設定できないため、この位置に書いています。


(15)イベントハンドラを設定したので、都道府県を切り替えた時には、関数 prefChange() が呼び出されます。

function prefChange(obj) {
  省略
}

*引数の obj は選択リストボックス自身を参照しています。


(16)選択リストボックスで、選択したオプションの値(value)を数値にして、変数に代入している部分です。
var prefCd = Number(obj.value);

*この値は市町村を絞り込む時の抽出条件に使うことができます。


(17)if文で選択リストボックスの値が、0の時(1行目)とそれ以外の時で、処理を分けています。

if (prefCd == 0) {
  state.innerHTML = "都道府県が選択されていません。<br />\n";
} else {
  var prefName = obj.options[obj.selectedIndex].text;
  state.innerHTML = prefCd + ":" + prefName + " を選択しました。<br />\n";
}

*選択リストボックスで、選択したオプションの項目(テキスト)は、以下のように取得できます。
obj.options[obj.selectedIndex].text;


今回のように DOM を使った方法では、要素の種類(select、option、li、a、img など)や目的によって、使うメソッドがいろいろありますので、慣れが必要です。

HTMLタグを直接代入できる「.innerHTML」の簡単さがわかったのではないでしょうか。


【ワンポイント】

index.html側で、select要素と1行目のオプションまでは書いておいて、プログラムでは2行目の option 要素から作成する方法もあります。もちろん1行目は書かなくて、空の select要素だけでもかまいません。

<select id="selectPref">
  <option value='0' selected>選択してください。</option>
</select>

動的に作成したフォーム部品が、どうしても上手く動作しないときには、あらかじめ親要素だけは書いておくと有効です。

その場合、最初から要素が存在するので、index.js側でイベントハンドラを設定することができます。


Ajax DOMを使って選択リストボックスを書き換える方法。

前回の最後に少し説明した通り、 Ajax で「.innerHTML」を使って、動的に生成したフォーム部品に、イベントハンドラを設定すると、不具合が出ることがあります。

そこで今回は DOM(ドム:Document Object Model) を使った方法に書き換えてみます。DOM は慣れるまで少し難しく感じると思いますが、今回はとりあえず動かしてみることに専念してください。


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

ajax-319.gif


【2】今回は最終的に以下のようなファイルの構成になります。

ajax-320.gif

*「\」はWindowsでは円記号のことです。

変更は pref.js だけです。 index.html、index.js、pref.php、index.css に変更はありませんので省略します。

保存先 C:\phpdev\www\ajax\sample010
ファイル名 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');

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectPref');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    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;

      var opt = document.createElement('option');
      opt.setAttribute('value', prefCdValue);
      var text = document.createTextNode(prefNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult要素に追加
    result.appendChild(sel);
    //イベントハンドラの設定
    $('selectPref').onchange = function (){prefChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

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

}

function prefChange(obj) {
  var prefCd = Number(obj.value);

  if (prefCd == 0) {
    state.innerHTML = "都道府県が選択されていません。<br />\n";
  } else {
    var prefName = obj.options[obj.selectedIndex].text;
    state.innerHTML = prefCd + ":" + prefName + " を選択しました。<br />\n";
  }

}



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

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

ajax-166.gif


【4】Firefox を起動して、動作を確認します。

http://localhost/ajax/sample0010/

ajax-321.gif


【5】どれか都道府県を選択してください。

ajax-322.gif


【6】都道府県が選択され、上にメッセージが表示されました。

ajax-323.gif

*選択したオプションの値と項目が表示できるということは、プログラムの中で値を活用できるということです。(例えば市町村を絞り込む検索条件にしたり)


【7】他の都道府県でも試してください。

ajax-326.gif


【8】今度はわざと一番上の「選択してください。」を選択します。

ajax-324.gif


【9】「都道府県が選択されていません。」というメッセージが表示されました。

ajax-325.gif


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

ajax-327.gif

選択リストボックスは、前回と同じように動作することが確認できると思います。


【ワンポイント】

今回の sample010 と同じように、都道府県を切り替えた時にメッセージを表示する機能を、「.innerHTML」を使っている sample009 に組み込んだ場合、 Internet Explorer では動くのですが、Firefox では上手く動きませんでした。

やはり DOM を使った方法のほうがよさそうです。


DOM のプログラム部分については次回に詳しく解説します。


Ajax sample009で使用したプログラムの解説。

今回は sample009 で使用した Ajax のプログラムについて、詳しく解説します。

これまでとほとんど同じプログラムなので、選択リストボックスを動的に作成するところ以外は簡単だと思います。

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 を使う方法については、次回に説明します。


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へ

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。