Indexへ戻る
サンプル（２）prototype.jsで作り直し

  サンプル(２)をprototype.jsを使って作り直してみました。 prototype.jsはJavascriptのライブラリです。
様々な便利な関数やクロスブラウザの対応など今まで開発者が一から書いていたコードをこのprototype.jsでは数多くサポートしてくれています。
  まずprototype.jsをダウンロードします。URL:http://prototype.conio.net/からダウンロードしてきて、それを解凍します。 解凍したファイルの中に何個かフォルダがあって、その中のdistフォルダの中にあるprototype.jsファイルを呼ばれるフォルダに置いてあげます。
これで使えたのですがprototype.js はdistフォルダと同階層にあるsrcフォルダ以下のjsファイルを組み合わせたものなので用途によっては使う物のjsファイルだけをよんでやって使ってもいいみたいです。
サンプル（２）の実行
■Javascript
 // 検索結果画面初期表示用
function setList() {
    var chiku  = "0";
    var ken    = "000";

    setKenOption(chiku);
    setCityOption(chiku, ken);

    document.form1.selChiku.selectedIndex = 0;
    document.form1.selKen.selectedIndex   = 0;
    document.form1.selCity.selectedIndex  = 0;
}

// 地区選択時
function changeChiku(selChiku)
{
    var selKen  = "000";
    var selCity = "00000";

    setKenOption(selChiku.value);
    setCityOption(selChiku.value, selKen);

    getResult(selChiku.value, selKen, selCity);
}

// 都道府県選択時
function changeKen(selChiku, selKen)
{
    var selCity = "00000";

    setCityOption(selChiku.value, selKen.value);

    if (selChiku.value == "0") {
        document.form1.selKen.selectedIndex = 0;
    }

    getResult(selChiku.value, selKen.value, selCity);
}

// 市区町村選択時
function changeCity(selChiku, selKen, selCity)
{
    if (selChiku.value == "0" || selKen.value == "0") {
        document.form1.selCity.selectedIndex = 0;
    }

    getResult(selChiku.value, selKen.value, selCity.value);
}

// 都道府県オプション設定
function setKenOption(chiku)
{
    len = document.form1.selKen.options.length;
    for (i=len-1; i>=0; i--){
        document.form1.selKen.options[i] = null;
    }
    var data = "selChiku=" + chiku;
    url = "optionKen.php";
    var myAjax = new Ajax.Request(
        url, 
        {
            method: 'post', 
            parameters: data, 
            onComplete: callBack1
        });

    document.form1.selKen.selectedIndex = 0;
}
function callBack1(xmlhttp)
{
    var result = xmlhttp.responseText;

    var resArray = result.split(",");
    for (i=0; i<resArray.length; i++) {
        var kenArray = resArray[i].split("/");

        document.form1.selKen.options[i] =
             new Option(kenArray[1], kenArray[0]);
    }
}

// 市区町村オプション設定
function setCityOption(chiku, ken)
{
    len = document.form1.selCity.options.length;
    for (i=len-1; i>=0; i--){
        document.form1.selCity.options[i] = null;
    }

    var data = "";
    data += "selChiku=" + chiku;
    data += "&selKen=" + ken;
    url = "optionCity.php";

    var myAjax = new Ajax.Request(
        url, 
        {
            method: 'post', 
            parameters: data, 
            onComplete: callBack2
        });

    document.form1.selCity.selectedIndex = 0;
}

function callBack2(xmlhttp)
{
    var result = xmlhttp.responseText;

    var resArray = result.split(",");
    for (i=0; i<resArray.length; i++) {
        var cityArray = resArray[i].split("/");

        document.form1.selCity.options[i] =
             new Option(cityArray[1], cityArray[0]);
    }
}

// データ検索
function getResult(chiku, ken, city)
{
    var data = "";
    data += "selChiku=" + chiku;
    data += "&selKen="  + ken;
    data += "&selCity=" + city;
    url = "result.php";

    var myAjax = new Ajax.Request(
        url, 
        {
            method: 'post', 
            parameters: data, 
            onComplete: callBack
        });

}
function callBack(xmlhttp)
{
    var result = document.getElementById("result");
    result.innerHTML = xmlhttp.responseText;
}
  サンプル(２)とほとんど変わらないのですがprototype.jsで使うために何箇所か変更しています。 Ajax.Requestクラスを使っています。 前の形ではXMLHttpRequest オブジェクトを作成し、それを各々で作ってあげた自作のオブジェクトに放り込んでいたんですがAjax.Requestクラスを使うとそれらを一括でやってくれます。 Ajax.Requestオブジェクトへの値の渡し方なのですがJSONというXMLと並んで便利なデータ交換用フォーマットを使用しています。
     var myAjax = new Ajax.Request(
        url, 
        {
            method: 'post', 
            parameters: data, 
            onComplete: callBack
        });
ここで{method: 'post' , parameters: data , onComplete: callBack}と3つのプロパティを持つオブジェクトを引数として渡しています。まず値の渡し方を'post'にするか'get'にするかのmethodプロパティ、HTTP リクエストのクエリ文字列を値として持つparametersプロパティ、コールバック関数を値として持つonCompleteプロパティです。
2006年9月29日更新