مثال AJAX XML

يمكن استخدام AJAX للتفاعل مع ملف XML.

مثال AJAX XML

يظهر المثال أدناه كيف يمكن للصفحة قراءة المعلومات من ملف XML باستخدام AJAX:

مثال

تجربة شخصية

شرح المثال

عند الضغط على زر "الحصول على معلومات CD"، يتم تنفيذ دالة loadDoc().

يخلق دالة loadDoc() جسم XMLHttpRequest، ويضيف دالة تنفيذ عند استجابة الخادم تكون جاهزة، ويقوم بإرسال طلب إلى الخادم.

عندما تكون استجابة الخادم جاهزة، يتم بناء جدول HTML، استخراج العناصر (العناصر) من ملف XML، ثم تحديث عنصر "demo" باستخدام جدول HTML مليء ببيانات XML:

LoadXMLDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
     }
  };
  xhttp.open("GET", "music_list.xml", true);
  xhttp.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("demo").innerHTML = table;
}

ملف XML

في المثال السابق، يتم استخدام ملف XML كما يلي: "music_list.xml"."