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" onclick="loadXMLDoc()">テスト</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 |