Ajaxを極める
Sec.1　XMLファイルを扱う

まずは今回扱うXMLファイルです。

<?xml version="1.0" encoding="UTF-8" ?>
<userlist>
<user>
<Number>0001</Number>
<Syain>Yamada</Syain>
</user>
<user>
<Number>0002</Number>
<Syain>Tanaka</Syain>
</user>
<user>
<Number>0003</Number>
<Syain>Kinoshita</Syain>
</user>
</userlist>




それでは上のXMLファイルを取得します。

【サンプル】

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>サーバー上のXMLファイルを読み込む</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function getXMLFile(fName)
{
　　 httpObj = createXMLHttpRequest(readComplete);
　　if (httpObj)
　　{
　　 　　 httpObj.open("GET",fName,true);
　　 　　 httpObj.send(null);
　　}
}
function readComplete()
{
　 if ((httpObj.readyState == 4) && (httpObj.status == 200))
　{
　　 xmlData = httpObj.responseXML;//①取得したXMLファイルを変数へ格納します
　　//②XMLデータを編集します。やり方はいくつかありますが、一番オーソドックスなやり方を示します。

　　Syain_Tag = xmlData.getElementsByTagName("Syain");
　　Number_Tag = xmlData.getElementsByTagName("Number");
　　User_Tag = xmlData.getElementsByTagName("user");

　　userLen = User_Tag.length; //②件数を取得します
　　
　　resultText = ""; //③データの内容を表示するための変数
　　for(i=0; i<userLen; i++){

　　//④取得したタグのテキストデータを編集します
　　　s_name = Syain_Tag[i].childNodes[0].nodeValue;
　　　s_num = Number_Tag[i].childNodes[0].nodeValue;
　　　resultText = resultText + s_num + " : " + s_name + "<br>";
　　}
　　$("result").innerHTML = resultText;
　}else{
　　$("result").innerHTML = "<b>Loading...</b>";
　}
}
--></script>
　</head>
　<body>
　<p>XMLファイルを読み込む
　<form name="ajaxForm">
　<input type="button" onClick="getXMLFile('file.xml')"><br>
　</form>
　<div id="result"></div>
　</body>
　</html>

Point：　XMLのタグの使い方をおさえましょう。