AjaxによるXMLファイルの読込サンプル

2021年11月24日

説明
1.XMLHttpRequest.open(method, url[, async[, user[, password]]])
XMLHttpRequest の open() メソッドは、新しく作成されたリクエストを初期化したり、既存のリクエストを再初期化したりします。
method:使用する HTTP リクエストメソッドです。 “GET", “POST", “PUT", “DELETE", など
url:リクエストを送信する URL を表す DOMString

2.var data = XMLHttpRequest.responseXML;
XMLHttpRequest.responseXML は読み取り専用のプロパティで、リクエストによって受け取った HTML または XML を含む Document、またはリクエストが成功しなかった場合、
まだ送信されていない場合、データが XML または HTML として解釈できない場合は null を返します。

使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>
<body>

<h1>XMLHttpRequestオブジェクトの取得</h1>
<button type="button">テスト</button>
<br><br>
<!--セレクタ名show -->
<table id="show"></table>
<script>
function loadXMLDoc() {
　//XMLHttpRequestオブジェクトの作成
  var xhttp = new XMLHttpRequest();
  //readyState 属性が変化するたびに呼び出されます
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      testFunc(this);
    }
  };
   //リクエストを送信する URL を表す cd_catalog.xml
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function testFunc(xml) {
  var i;
  //XMLHttpRequest を用いて受け取った XML 
  var xmlDoc = xml.responseXML;
  var table="<tr><th>作者</th><th>タイトル</th></tr>";
  //指定されたタグCDを持つ要素の HTMLCollection を返します
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
      /*id="show"にxmlデータを表示*/
  document.getElementById("show").innerHTML = table;
}
</script>

</body>
</html>

実行結果

「テスト」ボタンを押すと、「cd_catalog.xml」ファイルの項目が表示されます

作者 タイトル
Bob Dylan Empire Burlesque
Bonnie Tyler Hide your heart
Dolly Parton Greatest Hits
Gary Moore Still got the blues

Ajax

Posted by arkgame