فایل XML (AJAX XML File)
می خواهیم با AJAX از یک «فایل XML» اطلاعات بگیریم. AJAX یعنی ارتباط با سرور بدون رفرش صفحه. مثل وقتی جدول نمره ها همان جا پر می شود.
نمونه AJAX با فایل XML
با یک دکمه درخواست می فرستیم. سپس پاسخ XML را می خوانیم. بعد جدول HTML می سازیم.
<div id="txtCDInfo">
<button onclick="loadDoc('cd_catalog.xml');">Get CD info</button>
</div>
<div id="demo"></div>
کد کامل: درخواست و ساخت جدول
گام ها: 1) ساخت XMLHttpRequest. 2) صبر تا آماده شدن پاسخ. 3) خواندن گره های XML و پرکردن جدول.
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<tr><th>Title</th><th>Artist</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
فایل XML نمونه
در این مثال از فایل cd_catalog.xml استفاده می شود. گره های CD شامل TITLE و ARTIST هستند.
پیوندهای داخلی
برای نمایش پاسخ، صفحه پاسخ آژاکس را ببین. برای ارسال، ارسال درخواست آژاکس را مرور کن. سپس ادامه AJAX با AJAX و PHP را دنبال کن.
جمع بندی سریع
- AJAX می تواند XML را مستقیم بخواند.
- readyState و status موفقیت را نشان می دهند.
- responseXML یک DOM آماده می دهد.
- با getElementsByTagName داده ها را بگیر.
- نتیجه را در HTML جدول بریز.