スポンサード リンク

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

×

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