تطبيقات XML

في هذا الفصل، سنعرض كيفية استخدام تطبيق HTML باستخدام XML، HTTP، DOM وJavaScript.

المستندات XML المستخدمة

في هذا الفصل، سنستخدم وثيقة XML تُدعى "music_list.xml"ملف XML.

عرض بيانات XML في جدول HTML

هذا المثال يقوم بتتبع كل عنصر <TRACK>، ثم يعرض قيم عناصر <ARTIST> و<TITLE>:

مثال

<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", "قائمةموسيقى.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");
  for (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("عرضعينة").innerHTML = table;
}
</script>
</body>
</html>

جرب بنفسك

للحصول على معلومات إضافية حول استخدام JavaScript و XML DOM، يرجى زيارة مقدمة إلى DOM。

عرض الأغنية الأولى في العنصر div HTML

في هذا المثال، يتم استخدام دالة لعرض الأغنية الأولى في العنصر HTML المحدد بـ id="عرضموسيقى":

مثال

عرضموسيقى(0);
function عرضموسيقى(i) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      دالةصغيرة(this, i);
    }
  };
  xmlhttp.open("GET", "قائمةموسيقى.xml", true);
  xmlhttp.send();
}
function دالةصغيرة(xml, i) {
  var xmlDoc = xml.responseXML; 
  x = xmlDoc.getElementsByTagName("مسار");
  document.getElementById("عرضموسيقى").innerHTML =
  "<ul>" + 
  "<li>أغنية: " +
  x[i].getElementsByTagName("عنوان")[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>";
}

جرب بنفسك

تنقل بين الأغاني

للتنقل بين الأغاني في المثال السابق، يرجى إضافة الدوال التالي() والسابق():

مثال

function التالي() {
  // عرض الأغنية التالية، ما لم تصل إلى الأغنية الأخيرة
   if (i < x.length-1) {
    i++;
    عرضموسيقى(i);
  }
}
function السابق() {
  // عرض الأغنية السابقة، ما لم تصل إلى الأغنية الأولى
   if (i > 0) {
  i--;
  عرضموسيقى(i);
  }
}

جرب بنفسك

عرض معلومات الألبوم عند النقر على الأغنية

في هذا المثال، يتم عرض كيفية عرض معلومات الألبوم عند النقر على أغنية معينة:

مثال

function عرضموسيقى(i) {
  document.getElementById("عرضموسيقى").innerHTML =
  "<ul>" + 
  "<li>أغنية: " +
  x[i].getElementsByTagName("عنوان")[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>";
}

جرب بنفسك