③XMLファイルを読み込んでみる
　　　　XML（Extensible Markup Language）とは、汎用的なマークアップ言語で、文書やデータの意味をタグを使い構造的に表現したものである。
　　　　タグは、独自に作ることができ、HTMLのようにホームページを表現するためのものではない。
　　　　XMLに基本構造は、以下のようになります。

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>（ア）
<root>（イ）
  <item1>データ１</item1>（ウ）
  <item2>データ２（エ）
    <subItem1 attr="subData1">サブデータ１</subItem1>（オ）
    <subItem2 attr="subData2">サブデータ２</subItem2>（カ）
  </item2>（エ）
　　　　　　　　｜
　　　　　　　　｜　
</root>（イ）
　　　　ア．XMLデータ（XMLファイル）の宣言
　　　　　　　このデータがXMLであることを定義する。
　　　　　　　バージョン属性（version="1.0"）・・・現時点では、「1.0」を指定する。
　　　　　　　文字コード属性（encoding="UTF-8"）・・・使用する文字コードを指定する。
　　　　　　　スタンド・アロン（standalone="yes"）・・・XML以外のデータを参照するかの指定をする。（省略可）
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　「yes」・・・参照しない場合
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　「no」・・・・参照する場合

　　　　イ．ルート要素（ルートノード）
　　　　　　　XMLでは、必ず「ルート要素」は必要。要素名は、「root」である必要はない。

　　　　ウ．子要素（子ノード）
　　　　　　　階層になるように入れ子（ネスト）構造になるようにする。

　　　　エ．子要素（子ノード）
　　　　　　　階層になるように入れ子（ネスト）構造になるようにする。

　　　　　「ウ」と「エ」は、同階層（同ノード）の要素になる。

　　　　オ．子要素（子ノード）
　　　　　　　階層になるように入れ子（ネスト）構造になるようにする。
　　　　　　　タグには、属性をつけることができる。「属性名＝”属性値”」
　　　　　　　このノードから見れば、「エ」は、親ノードになる。
　　　　　　　「イ」から見れば、孫ノードになる。
　　　　　　　
　　　　カ．子要素（子ノード）
　　　　　　　階層になるように入れ子（ネスト）構造になるようにする。
　　　　　　　タグには、属性をつけることができる。「属性名＝”属性値”」
　　　　　　　このノードから見れば、「エ」は、親ノードになる。
　　　　　　　「イ」から見れば、孫ノードになる。

　　　　　　「オ」と「カ」は、同階層（同ノード）の要素になる。

　　XMLの基本ルール
　　　・データ構造に合わせて、必要なタグ（要素)を自由に決めれる。
　　　・ルート要素が必ず必要です。
　　　・全要素の入れ子(ネスト)構造が構造化されていること。
　　　・要素は、開始タグから始まり、必ず終了タグで閉じること。
　　　・要素の開始タグ内に、属性を記述できる。
　　　　書式：<要素名 属性名="属性値">
　　　・始まりのタグと終わりのタグの間に値を書く。
　　　　書式：<要素名>値</要素名>

　　要素名、属性名の命名規則
　　　・大文字、小文字は区別される。
　　　・使用できる文字は、特殊文字以外の半角英数字、全角英数字、全角ひらがな、全角漢字、全角カタカナ
　　　　「_」、「-」使用可能。ただし、「-」で始まる文字列はダメ。また、予約語は使えない。
　　　
　　　　以下は、住所データをXML化したものです。（サンプルでこの通りにする必要はありません。）

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<addressBooks>
  <addressBook>
    <name>山田　太郎</name>
    <address pref="大阪府">大阪市・・・</address>
    <tel>000-000-0000</tel>
  </addressBook>
  <addressBook>
    <name>山田　良子</name>
    <address pref="大阪府">大阪市・・・</address>
    <tel>000-000-0000</tel>
  </addressBook>
  <addressBook>
    <name>西田　太郎</name>
    <address pref="東京都">渋谷区・・・</address>
    <tel>000-000-0000</tel>
  </addressBook>
       |
       |
</addressBooks>
　　　　XMLを読み込むプログラム（HTML）のファイル名：XMLLoad.html 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AjaxによるXMLデータの受信</title>
<!-- 外部CSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="XMLLoad.css">
<!-- 外部JavaScriptファイルの読み込み -->
<script type="text/JavaScript" src="XMLLoad.js"></script>
</head>
<body>
<table border="0">
  <tr>
    <td align="center">
    <input type="button" value="XML１" id="xml1" data-para="0">
    <input type="button" value="XML２" id="xml2" data-para="1">
    <input type="button" value="XML３" id="xml3" data-para="2">
    </td>
  </tr>
  <tr>
    <td>
      <div id="xmlData">リンクをクリックすると住所が表示されます</div>
    </td>
  </tr>
</table>
</body>
</html>
　　　　XMLを読み込むプログラム（CSS）のファイル名：XMLLoad.css 
/* 住所録のリストを表示するための<div>タグに対するCSS */
div#xmlData {
  border      : 1px solid #000000;
  font-family : 'ＭＳ ゴシック';
  font-size   : 10pt;
  margin      : 5px;
  padding     : 5px;
  height      : 400px;
  width       : 500px;
  overflow    : auto;
}
　　　XMLを読み込むプログラム（Javascript）のファイル名：XMLLoad.js 
window.onload=function(){
  // サーバー上のXML文書のURLを格納するための配列
  //読み込むテキストファイルを配列に入れておく。
  aryXml = [
    "XMLLoad1.xml", 
    "XMLLoad2.xml",
    "xml/XMLLoad3.xml"
  ];

  //イベントの登録
  //XML１のエレメントの「click」イベントの登録
  document.getElementById("xml1").onclick=function(e){
    loadXml(e.target.dataset.para);
  }

  //XML２のエレメントの「click」イベントの登録
  document.getElementById("xml2").onclick=function(e){
    loadXml(e.target.dataset.para);
  }

  //XML３のエレメントの「click」イベントの登録
  document.getElementById("xml3").onclick=function(e){
    loadXml(e.target.dataset.para);
  }

  // XMLHTTPオブジェクトを利用するための変数
  var xmlhttp = null;
}

// サーバー上のXML文書を読み込むための関数
function loadXml(no) {
  // XMLHTTPオブジェクトを作成する
  xmlhttp = new XMLHttpRequest();

  // サーバーに対しXML文書の読み込みを要求する
  xmlhttp.open("GET", aryXml[no], true);

  // XML文書の読み込み中に発生するイベントハンドラに「読み込んだXML文書中の住所録のリストを表示するための関数」を指定する
    xmlhttp.onload = showXml;

  // サーバーに対しリクエストパラメータを送信する（今回はリクエストパラメータなし）
  xmlhttp.send("");
}

// 読み込んだXML文書中の住所録のリストを表示するための関数
function showXml() {
  // 住所録のリストを表示するための<div>タグを参照するための変数
  var xmlData = null;

  // 読み込んだXML文書から住所録を参照するための変数
  //var nodes1 = null;
  //var nodes2 = null;
  //var nodes3 = null;
  var nodes=[null,null,null];

  // 住所録のリストを格納する変数
  var list = "";
  // XMLデータの読み込みが完了した場合

  if (xmlhttp.readyState == 4) {

    // 住所録のリストを表示するための<div>タグを参照する
    xmlData = document.getElementById("xmlData");

    // <div>タグのスクロール位置を左上にする
    xmlData.scrollLeft = 0;
    xmlData.scrollTop  = 0;

    // 読み込んだXML文書から住所録を参照する
    nodes[0] = xmlhttp.responseXML.getElementsByTagName("name");
    nodes[1] = xmlhttp.responseXML.getElementsByTagName("address");
    nodes[2] = xmlhttp.responseXML.getElementsByTagName("tel");

    // 住所録のリストを作成する
    list += "<ul>"
    for (i=0 ; i<nodes[0].length; i++) {
      list += "<li>" + nodes[0][i].textContent + "</li>";
      list += "<li>" + nodes[1][i].getAttribute("pref") + nodes[1][i].textContent + "</li>";
      list += "<li>" + nodes[2][i].textContent + "</li>";
    }
    list += "</ul>"

    // 作成した住所録のリストを表示する
    xmlData.innerHTML = list;
  }
}

//参考URL・・・http://javascriptist.net/ref/element.firstChild.html
//             http://jutememo.blogspot.jp/2009/09/javascript-xml.html
　　　　XMLファイルのファイル名（XMLLoad1.xml XMLload2.xml XMLload3.eml）←すべてUTF-8で保存する。　　 　
　　　　XMLファイルの例（以下のような構造にしたXMLファイルを３つ作ります。）
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<addressBooks>
  <addressBook>
    <name>山田　太郎</name>
    <address pref="大阪府">大阪市・・・</address>
    <tel>000-000-0000</tel>
  </addressBook>
  <addressBook>
    <name>山田　良子</name>
    <address pref="大阪府">大阪市・・・</address>
    <tel>000-000-0000</tel>
  </addressBook>
  <addressBook>
    <name>西田　太郎</name>
    <address pref="東京都">渋谷区・・・</address>
    <tel>000-000-0000</tel>
  </addressBook>
</addressBooks>