ساخت یک برنامه کاربردی با XML

در این بخش قصد داریم تا با ارایه یک مثال عملی ، نحوه استفاده از XML در عمل و ساخت یک برنامه کاربردی را نشان دهیم .
در این مثال ، یک فایل XML داریم که اطلاعات مربوط به چند آهنگ را در خود نگهداری می کند . اسکریپتی نوشته شده که به وسیله دو دکمه فرمان بعدی و قبلی ، بین آهنگ ها حرکت کرده و با هر بار زدن یک دکمه فرمان ، اطلاعات آهنگ قبلی یا بعدی نشان داده می شود .
این مثال را به صورت گام به گام نمایش داده و تشریح می کنیم .

کد اسکریپت و برنامه :

جدول زیر ، کد فایل HTML و اسکریپت طراحی شده در آن را نمایش می دهد . همچنین خروجی واقعی مثال نیز ، نشان داده شده است . کد مثال را مرور نموده و به آن دقت نمایید . سپس در پایان مثال به تشریح نکات مهم آن می پردازیم :

<!DOCTYPE html>
<html>
<head>

<script>
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari // برای تبادل اطلاعات ajax ساخت یک شی
xmlhttp = new XMLHttpRequest();
}

xmlhttp.open("GET", "cd_catalog.xml", false); // و خواندن اطلاعات آت XML باز کردن فایل
xmlhttp.send(); // ارسال درخواست به سرور
xmlDoc = xmlhttp.responseXML; // ذخیره پاسخ سرور در یک متغیر دلخواه

x = xmlDoc.getElementsByTagName("CD"); // و ذخیره آن CD خواندن اطلاعات المنت
i = 0; // تعیین شمارشگر برنامه

function displayCD() { // انتخاب شده و نمایش آن CD تابع خواندن اطلاعات
artist = (x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); // نمایش اطلاعات خواننده آهنگ
title = (x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); // نمایش عنوان آهنگ
year = (x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue); // نمایش سال انتشار
txt = "Artist: " + artist + "<br>Title: " + title + "<br>Year: " + year; // ریختن تمام اطلاعات آهنگ در یک متغیر
document.getElementById("showCD").innerHTML = txt; // صفحه جهت نمایشdiv ریختن اطلاعات متغیر بالا در عنصر
}

function next( ) { // تابع رفتن به آهنگ بعدی
if (i < x.length - 1) {
i++;
displayCD( );
}
}

function previous( ) { // تابع رفتن به آهنگ قبلی
if (i > 0) {
i--;
displayCD( );
}
}
</script>
</head>
<body onload="displayCD( )">

<div id='showCD'></div><br>
<input type="button" onclick="previous( )" value="<<" />
<input type="button" onclick="next( )" value=">>" />

</body>
</html>

نکات کد فایل HTML :

در تگ body تابع ( ) displayCD فراخوانی شده ، تا در هنگام لود صفحه اطلاعات اولین آهنگ فایل XML به صورت پیش فرض نمایش داده شود .
تگ div ، اطلاعات آهنگ انتخاب شده در هر لحظه را نمایش می دهد .
دو دکمه فرمان برای انجام عملیات حرکت بین آهنگ ها به کار می روند .

 

ratingValue4.8 worstRating 1 bestRating 5 reviewCount 5142