スポンサード リンク

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初心者入門講座TOPへ