lion 2 ارسال شده در تیر 19، 1393 گزارش اشتراک گذاری ارسال شده در تیر 19، 1393 ایجاد یک برنامه با 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 ، اطلاعات آهنگ انتخاب شده در هر لحظه را نمایش می دهد . دو دکمه فرمان برای انجام عملیات حرکت بین آهنگ ها به کار می روند . لینک به دیدگاه به اشتراک گذاری در سایت های دیگر More sharing options...
پست های پیشنهاد شده