Ajaxでホームページをつくろう

Ajaxでホームページをつくろう














■XMLファイルを操作します





XMLとはアプリケーション間でデータのやりとりが容易にできるなど、今後もっとも流行するであろう

文書やデータの意味や構造を記述するためのマークアップ言語の一つです。

以下がXMLファイルの一例になります。タグ名称を自分で指定できるのが大きな特徴です。

<?xml version="1.0" encoding="UTF-8" ?>
<userlist>
<user>
<Number>1111</Number>
<Syain>Lucy Angel</Syain>
</user>
<user>
<Number>2222</Number>
<Syain>Jack Nicoleson</Syain>
</user>
<user>
<Number>3333</Number>
<Syain>Daniel Part</Syain>
</user>
</userlist>





それでは上のXMLファイルをサーバーから取得してみましょう。その際、ページ全体を読みこまずに済む

事を意識してください。これがまさにAjaxの醍醐味です。

サンプルはこちらから実行できます。

<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(FileName)
{
   httpObj = createXMLHttpRequest(readComplete);
  if (httpObj)
  {
      httpObj.open("GET",FileName,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>





       
mail:info @ a-jax.net