【Javascript】Ajax OPTION要素をXMLで書き換える

OPTION要素をXMLで書き換える

---

今回は、前回、前々回、に引き続き、インタラクティブなフォーム生成のサンプルを作ります。

前回は、CSVファイルから、データを読み込みましたが、今回は、XMLファイルからデータ読み込んでOPTION要素を書き換えます。

XMLには、前回と同じく、都道府県名と、県庁所在地の経度、緯度が書いてあります。 これを、Ajaxで読み込み、オプション要素を書き換えるという手順です。ページ構築後に、読み込んで動的に書き換えるというわけです。

＊今回は、いままで利用してきた暫定Ajax用ライブラリのバージョンアップ版、v037を利用しています。

1: OPTION要素をXMLで書き換える
2: 暫定Ajax用ライブラリv037

---

OPTION要素をXMLで書き換える

→Sample
（＊このサンプルは上記リンク参照）

動作ブラウザ

win					mac				linux
n7	m1	e6	o7	o8	n7	m1	e5	s1	n7	m1	k3
○	○	○	×	○	○	○	×	○	○	○	○

　

このサンプルは、ボタンを押すと、Ajaxライブラリの関数 sendRequest(on_loaded1,'','POST','./ken.xml',true,true)を実行してXMLデータをロードします。

XMLデータの読み込みが終了すると、コールバック関数on_loaded1(oj)を起動して、OPTIONタグを生成します。さらに、生成されたOPTIONをクリックすると、県庁の経緯度がダイアログ表示されます。 細かい説明は、ソース内のコメントをご参照下さい。

前回行ったエンコード処理については、responseTextで受け取る場合のもので、今回はresponseXMLなので少し事情が違います。前回対策が必要でした、SafariとKonquerorのうちSafariは対策不要になります。また、Konquerorも3.4以降は安定してきていますので、今回は、分岐をせずに処理してみます。（参考：文字コードによって生じる文字化け調査）

使用したJavaScript/HTML側とXML側のソースは、下記の通りです。

【JavaScript側】

 
<!-- Ajax簡易ライブラリ jslb_ajax.js 
     Toshiro Takahasi 
     http://jsgt.org/mt/archives/01/000409.html-->
<script languege = "JavaScript"
        src      = "./jslb_ajax037.js"
        charset  = "utf-8"></script>

<script language = "JavaScript">
<!--
    

  //送信用関数
  function loadFile(url)
  {
    sendRequest(on_loadedXML,'','POST',url,true,true) 
  }
  
  
  //コールバック関数 ( 受信時に実行されます )
  function on_loadedXML(oj)
  {
    //responseXMLでレスポンスを取得
    var res  =  oj.responseXML

    //OPTION書き換え作業用オブジェクト
    resOj = new chgXMLtoHTMLOptions(res,document.test1.s0)
    
    resOj.addOptions()
  }


  //読み込んだXMLのデータをもとにOPTIONを書き換えるメソッド(太字部分)を作成します
  function chgXMLtoHTMLOptions(xdoc,oj){
  
    return {
    
      //XMLのitems,value,textを連想配列で返します
      setItems : function (){
     
        //XML内の"items"という名前のタグ(要素)の配列を作る
        var items = xdoc.getElementsByTagName("items")
  
        //XML内の都道府県名データ"ken"という名前のタグ(要素)の配列を作る
        var ken = xdoc.getElementsByTagName("ken")
        //XML内の経度データ"lon"という名前のタグ(要素)の配列を作る
        var lon = xdoc.getElementsByTagName("lon")
        //XML内の緯度データ"lat"という名前のタグ(要素)の配列を作る
        var lat = xdoc.getElementsByTagName("lat")
        
        return { 'items':items,'kens':ken,'lons':lon,'lats':lat };
      
      },
  
      //XMLのデータからオプションを生成します
      addOptions : function (){
      
        //すべてのオプションを削除します
        this.delAllOptions(oj)
        //XMLデータのオブジェクトを受け取ります
        var data = this.setItems()
        //"item"タグが出てきた順に処理します
        for( i = 0 ; i < data.items.length ; i++ ){
          var text  = data.kens[i].firstChild.nodeValue 
          var value = data.lons[i].firstChild.nodeValue 
                    +','+ data.lats[i].firstChild.nodeValue 
          oj.options[oj.length]=new Option(text,value)
        }
      },
      
      //すべてのオプションを削除します
      delAllOptions : function (oj){
        var optionIndex = oj.options.length  
        for ( i=0 ; i <= optionIndex ; i++ ){
          oj.options[0]=null
        }
      },
      
      //optionが選択された時のダイアログを表示します
      onselectedOption : function(oj){
        var msg = oj.options[oj.selectedIndex].text+'が選択されました。県庁の?n'
                + '経度は、'+oj.options[oj.selectedIndex].value.split(',')[0]+'です?n'
                + '緯度は、'+oj.options[oj.selectedIndex].value.split(',')[1]+'です?n'
        alert(msg)
      }
      
    }
    
  }

  
//-->
</script>

<form name="test1">

<input type="button" 
       value="都道府県名リスト"
       onclick="loadFile('ken.xml')"><br>
       
<select name="s0" size="5"
        onchange="resOj.onselectedOption(this)"> 
  <option selected> --ここへ読み込まれます--
</select> 

</form>
  

【XML側】
（ken.xml）

<?xml version="1.0" encoding="utf-8" ?> 
  <lists>
    <items>
      <ken>北海道</ken>
      <lon>141.35046</lon>
      <lat>43.06197</lat>
    </items>
    <items>
      <ken>青森県</ken>
      <lon>140.74365</lon>
      <lat>40.82178</lat>
    </items>
    <items>
      <ken>秋田県</ken>
      <lon>140.10626</lon>
      <lat>39.71539</lat>
    </items>
    <items>
      <ken>岩手県</ken>
      <lon>141.15547</lon>
      <lat>39.70096</lat>
    </items>
    <items>
      <ken>山形県</ken>
      <lon>140.36452</lon>
      <lat>38.23758</lat>
    </items>
    <items>
      <ken>宮城県</ken>
      <lon>140.87549</lon>
      <lat>38.26594</lat>
    </items>
    <items>
      <ken>福島県</ken>
      <lon>140.47157</lon>
      <lat>37.74733</lat>
    </items>
    <items>
      <ken>新潟県</ken>
      <lon>139.02640</lon>
      <lat>37.89942</lat>
    </items>
    <items>
      <ken>東京都</ken>
      <lon>139.69487</lon>
      <lat>35.68627</lat>
    </items>
        :
        :