برنامههای XML
- صفحه قبلی دادههای بانک AJAX
- صفحه بعدی مثال AJAX
این فصل یک برنامه HTML از استفاده XML، HTTP، DOM و JavaScript را نمایش میدهد.
XML مدلی که استفاده میشود
در این فصل، ما از یک فایل به نام "music_list.xml" XML فایل.
نمایش دادههای XML در جدول HTML
این مثال هر علامت <TRACK> را مرور میکند و سپس مقادیر عناصر <ARTIST> و <TITLE> را در جدول HTML نمایش میدهد:
مثال
<html> <body> <table id="demo"></table> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xmlhttp.open("GET", "music_list.xml", true); xmlhttp.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>艺术家</th><th>曲目</th></tr>"; var x = xmlDoc.getElementsByTagName("TRACK"); برای (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; } </script> </body> </html>
برای اطلاعات بیشتری در مورد استفاده از JavaScript و XML DOM، لطفاً به مقدمه به DOM。
نمایش اولین ترانه در عنصر div HTML
در این مثال از یک تابع برای نمایش اولین ترانه در عنصر HTML با id="displayMUSIC" استفاده میشود:
مثال
displayMUSIC(0); function displayMUSIC(i) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this, i); } }; xmlhttp.open("GET", "music_list.xml", true); xmlhttp.send(); } function myFunction(xml, i) { var xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("TRACK"); document.getElementById("showMUSIC").innerHTML = "<ul>" + "<li>ترانه: " + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" + "<li>هنرمند: " + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" + "<li>آلبوم: " + x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" + "<li>کشور: " + x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" + "<li>شرکت: " + x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" + "<li>سال: " + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + "</ul>"; }
پیمایش بین ترانهها
برای جابجایی بین ترانههای مثال بالا، به فایلهای next() و previous() اضافه کنید:
مثال
function next() { // نمایش ترانه بعدی، مگر اینکه به آخرین ترانه برسیم if (i < x.length-1) { i++; displayMUSIC(i); } } function previous() { // نمایش ترانه قبلی، مگر اینکه به اولین ترانه برسیم if (i > 0) { i--; displayMUSIC(i); } }
نمایش اطلاعات آلبوم در هنگام کلیک بر روی ترانه
در این مثال، نحوه نمایش اطلاعات آلبوم هنگام کلیک بر روی یک ترانه را نشان میدهد:
مثال
function displayMUSIC(i) { document.getElementById("showMUSIC").innerHTML = "<ul>" + "<li>ترانه: " + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" + "<li>هنرمند: " + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" + "<li>آلبوم: " + x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" + "<li>کشور: " + x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" + "<li>شرکت: " + x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" + "<li>سال: " + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + "</ul>"; }
- صفحه قبلی دادههای بانک AJAX
- صفحه بعدی مثال AJAX