AJAX XML
AJAX を使用して、XML ファイルと対話的に通信できます。
AJAX XML の例
次の例は、Web ページが AJAX を使用して XML ファイルから情報を読み取る方法を示しています。オンラインの例を見る
分析例 -loadXMLDoc()関数
ユーザーが上の「CD情報を取得」ボタンをクリックすると、loadXMLDoc()関数が実行されます。
loadXMLDoc() 関数は、XMLHttpRequest オブジェクトを作成し、サーバー応答の準備ができたときに実行する関数を追加し、リクエストをサーバーに送信します。
サーバー応答の準備ができたら、HTML テーブルが構築され、XML ファイルからノード (要素) が抽出され、最後に、すでに XML データが設定されている HTML テーブルで txtCDInfo プレースホルダーが更新されます。
function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// IE7+、Firefox、Chrome、Opera、Safari 用のコード
xmlhttp=new XMLHttpRequest ();
}
else
{// IE6、IE5 のコード
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4) && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>タイトル</th><th>アーティスト</th></tr> ;";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i
txt=txt + "<tr>";
xx =x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
"<td> </td>";
}
}
xx=x[i].getElementsByTagName("アーティスト");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
"<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open( "GET",url,true);
xmlhttp.send();
}
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// IE7+、Firefox、Chrome、Opera、Safari 用のコード
xmlhttp=new XMLHttpRequest ();
}
else
{// IE6、IE5 のコード
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4) && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>タイトル</th><th>アーティスト</th></tr> ;";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i
txt=txt + "<tr>";
xx =x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
"<td> </td>";
}
}
xx=x[i].getElementsByTagName("アーティスト");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
"<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open( "GET",url,true);
xmlhttp.send();
}
AJAX サーバー ページ
上記の例で使用されているサーバー ページは、実際には「cd_catalog.xml」という名前の XML ファイルです。
