AJAX کاربردها (AJAX Applications)
اینجا نمونه های واقعی «AJAX کاربردها» را می بینیم. «AJAX» یعنی درخواستِ پس زمینه بدون رفرش. «XML» فرمت متنیِ داده هاست. «DOM» نمای درختیِ عناصر صفحه است. با هم داده آلبوم ها را نشان می دهیم.
نمایش داده XML در جدول HTML
ابتدا XML را می گیریم. سپس هنرمند و عنوان هر آلبوم را جدول می کنیم.
function loadXMLDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = xhttp.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd);
};
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
}
function myFunction(cd) {
let table = "<tr><th>Artist</th><th>Title</th></tr>";
for (let i = 0; i < cd.length; i++) {
table += "<tr><td>" +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
نمایش اولین CD در یک div
این بار فقط اولین آیتم را نشان می دهیم. همه چیز ساده و مرحله ای است.
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = xhttp.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd, 0);
};
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
function myFunction(cd, i) {
document.getElementById("showCD").innerHTML =
"Artist: " +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
جابجایی بین آلبوم ها
با دو تابع «بعدی» و «قبلی»، بین آلبوم ها حرکت کن. حواست به مرزها باشد.
function next() {
if (i < len - 1) {
i++;
displayCD(i);
}
}
function previous() {
if (i > 0) {
i--;
displayCD(i);
}
}
نمایش اطلاعات با کلیک روی CD
با کلیک کاربر، جزئیات همان آلبوم را در بخش نمایش بروزرسانی کن.
function displayCD(i) {
document.getElementById("showCD").innerHTML =
"Artist: " +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
لینک های مفید و ادامه مسیر
برای کار با پایگاه داده، سراغ AJAX پایگاه داده برو. همچنین صفحه AJAX کاربردها مسیر کلی را نشان می دهد. برای کار با XML فایل، ببین AJAX فایل XML.
جمع بندی سریع
- AJAX بدون رفرش، داده تازه می آورد.
- XML با DOM راحت پیمایش می شود.
- نتیجه را در DOM رندر کن.
- مرزهای جابجایی را بررسی کن.
- رویداد کلیک، جزئیات را نشان می دهد.