AjaxによるXMLファイルの読込サンプル
説明
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 |