AJAX فایل XML (AJAX XML File)
اینجا یاد می گیری چطور «فایل XML با AJAX» را بخوانی. «XML (اِکس اِم اِل)» یک فرمت متنیِ ساخت یافته است. «AJAX» یعنی درخواستِ پس زمینه، بدون رفرش کامل صفحه. سپس، داده ها را به جدول تبدیل می کنیم.
نمونه ساده: خواندن فایل XML با AJAX
دکمه کلیک می شود، سپس تابع loadDoc() اجرا می شود. یک شی XMLHttpRequest ساخته می شود. بعد، فایل XML دریافت می شود و به تابع پردازش فرستاده می شود.
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
myFunction(this);
};
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
}
function myFunction(xml) {
const xmlDoc = xml.responseXML;
const rows = xmlDoc.getElementsByTagName("CD");
let table = "<tr><th>Artist</th><th>Title</th></tr>";
for (let i = 0; i < rows.length; i++) {
const artist = rows[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
const title = rows[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
table += "<tr><td>" + artist + "</td><td>" + title + "</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
گام های عملی خواندن «فایل XML با AJAX»
- یک شی XMLHttpRequest بساز.
- رویداد onload را تعریف کن.
- با open('GET', 'cd_catalog.xml') آماده شو.
- با send() درخواست را بفرست.
- در پاسخ، گره های XML را استخراج کن.
- HTML جدول را بساز و در DOM بگذار.
نکته: اگر پاسخ خالی بود، مسیر فایل یا دسترسی را بررسی کن. همچنین، حروف فارسی داخل XML باید با UTF-8 ذخیره شود.
لینک های مرتبط و بعدی
پیش از این، درباره پاسخ ها بخوان: پاسخ AJAX. برای شروع مفهوم، این را ببین: AJAX معرفی.
جمع بندی سریع
- AJAX صفحه را رفرش نمی کند.
- XML داده ساخت یافته متنی است.
- با DOM از XML مقدار بگیر.
- جدول بساز و در innerHTML بگذار.