آموزش XML > جاوا اسکریپت و XML > ساخت یک برنامه کاربردی
با XML
ساخت یک برنامه کاربردی با XML :
در این بخش قصد داریم تا با ارایه یک مثال عملی ، نحوه استفاده از XML در عمل و ساخت
یک برنامه کاربردی را نشان دهیم .
در این مثال ، یک فایل XML داریم که اطلاعات مربوط به چند آهنگ را در خود نگهداری می
کند . اسکریپتی نوشته شده که به وسیله دو دکمه فرمان بعدی و قبلی ، بین آهنگ ها حرکت
کرده و با هر بار زدن یک دکمه فرمان ، اطلاعات آهنگ قبلی یا بعدی نشان داده می شود
.
این مثال را به صورت گام به گام نمایش داده و تشریح می کنیم .
1 . محتویات فایل XML :
فایل XML به کار رفته در این مثال ، شامل اطلاعات زیر است :
2 . کد اسکریپت و برنامه :
جدول زیر ، کد فایل 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>
|
|
خروجی
|
مشاهده خروجی مثال
|
3 . نکات کد فایل HTML :
- در تگ body تابع ( ) displayCD فراخوانی شده ، تا در هنگام
لود صفحه اطلاعات اولین آهنگ فایل XML به صورت پیش فرض نمایش داده شود .
- تگ div ، اطلاعات آهنگ انتخاب شده در هر لحظه را نمایش می دهد .
- دو دکمه فرمان برای انجام عملیات حرکت بین آهنگ ها به کار می روند .
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان بگذارید :