رفتن به مطلب

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


lion

پست های پیشنهاد شده

ایجاد یک برنامه با xml:

 

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

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

این مثال را به صورت گام به گام نمایش داده و تشریح می کنیم .

 

1 . محتویات فایل XML :

 

فایل XML به کار رفته در این مثال ، شامل اطلاعات زیر است :

 

 

<CATALOG><CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR></CD><CD><TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY><PRICE>9.90</PRICE><YEAR>1988</YEAR></CD><CD><TITLE>Greatest Hits</TITLE><ARTIST>Dolly Parton</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>RCA</COMPANY><PRICE>9.90</PRICE><YEAR>1982</YEAR></CD><CD><TITLE>Still got the blues</TITLE><ARTIST>Gary Moore</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>Virgin records</COMPANY><PRICE>10.20</PRICE><YEAR>1990</YEAR></CD></CATALOG>

 

 

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 ، اطلاعات آهنگ انتخاب شده در هر لحظه را نمایش می دهد .

دو دکمه فرمان برای انجام عملیات حرکت بین آهنگ ها به کار می روند .

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...