AJAX XML
AJAX boleh digunakan untuk berkomunikasi secara interaktif dengan fail XML.
Contoh XML AJAX
Contoh berikut akan menunjukkan cara halaman web menggunakan AJAX untuk membaca maklumat daripada fail XML:
Contoh
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
</div>
</body>
</html>Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Contoh analisis - fungsi loadXMLDoc()
Apabila pengguna mengklik butang "Dapatkan Maklumat CD" di atas, fungsi loadXMLDoc() akan dilaksanakan.
Fungsi loadXMLDoc() mencipta objek XMLHttpRequest, menambah fungsi yang dilaksanakan apabila respons pelayan sedia dan menghantar permintaan kepada pelayan.
Apabila respons pelayan sedia, jadual HTML dibina, nod (elemen) diekstrak daripada fail XML, dan akhirnya pemegang tempat txtCDInfo dikemas kini dengan jadual HTML yang telah diisi dengan data XML:
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// kod untuk IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
lain
{// kod untuk IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP ");
}
xmlhttp.onreadystatechange=function()
{
jika (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt=" <table border='1'><tr><th>Tajuk</th><th>Artis</th></tr>";
x=xmlhttp.responseXML.documentElement. getElementsByTagName("CD");
untuk (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i ].getElementsByTagName("TITLE");
{
cuba
{
txt=txt + "<td>" + xx [0] .firstchild.nodeValue + "& lt;/td & gt;";
}
tangkapan (er)
{
}
}
xx=x[i].getElementsByTagName("ARTIS");
{
cuba txt=txt + "< td>" + xx [0] .firstchild.nodeValue + "& lt;/td & gt;";
}
tangkapan (er)
{
}
}
txt=txt + "</tr>";
}
txt=txt + "<> dokumen>. getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
Halaman Pelayan AJAX
Halaman pelayan yang digunakan dalam contoh di atas sebenarnya adalah fail yang dipanggil "cd_catalog . xml" fail XML.
