ajaxプログラムのサンプル

８章のyahoo.htmlに相当するサンプルを

http://richard.js.yamanashi.ac.jp/~toyoki/local_test/js2013/getBusRouteXml.html

に置きます。xmlデータを同じディレクトリにおいて、試してみてください。

destination属性も取り出して表示できるようにするといいですね。チャレンジしてください。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xmlデータの非同期読み込み（バス路線データを例に）</title>
<script type="text/javascript">
<!--
  function getXHR() {
      var req;
      try {
          req = new XMLHttpRequest();
      } catch(e) {
          try {
              req = new ActiveXObject('Msxml2.XMLHTTP');
          } catch (e) {
              req = new ActiveXObject('Microsoft.XMLHTTP');
          }
      }
      return req;
  }
  
  function asyncSearch() {
      var req = getXHR();
      req.onreadystatechange = function() {
          var result = document.getElementById('result');
          if (req.readyState == 4) {
              if (req.status == 200) {
                  var doc = req.responseXML;
                  var nodes = doc.getElementsByTagName('item'); // itemというタグを配列として取り出す
		  if (nodes.length == 0) {
		      result.innerHTML = '合致するサイトはありませんでした。';
		  } else {
		      var ul = document.createElement('ul');
		      for (var i = 0; i < nodes.length; i++) {
			  var routeName = nodes[i].getAttribute('name'); // xmlから、name属性を抽出し、routeNameに代入
			  var li = document.createElement('li'); // listオブジェクトを生成
			  var textObj =document.createTextNode(routeName); // テキストオブジェクトを生成（内容はrouteNameに入っている文字列)
			  li.appendChild(textObj);
			  ul.appendChild(li);
		      }
		  }
		  result.replaceChild(ul, result.firstChild); //'通信中...'というコンテントを、ul変数に格納されたデータで置き換える。
	      } else {
		  result.innerHTML = 'サーバエラーが発生しました。';
	      }
	  } else {
	      result.innerHTML = '通信中...';
	  }
      }
      req.open('GET', 'BusCategorizedRouteXml.xml', true);
      req.send(null);
  }

  // windowが開かれたらasyncSearch関数を実行するようonload属性に関数名を代入
  window.onload = asyncSearch;
  -->
</script>
</head>

<body>
yahoo.htmlに対応するサンプル
<h2>路線一覧表示</h2>

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