AJAX XML 实例

AJAX dapat digunakan untuk berkomunikasi interaktif dengan berkas XML.

AJAX XML 实例

Contoh di bawah ini menunjukkan bagaimana halaman web dapat membaca informasi dari berkas XML melalui AJAX:

Contoh

Coba Sendiri

Pengertian Contoh

Ketika pengguna mengklik tombol 'Dapatkan Informasi CD', jalankan fungsi loadDoc().

Fungsi loadDoc() menciptakan objek XMLHttpRequest, menambahkan fungsi yang akan dijalankan saat server siap berjumpa, dan mengirim permintaan ke server.

Apabila pula server siap berjumpa, buat tabel HTML, tangkap node (faktor) dari berkas XML, akhirnya update elemen 'demo' dengan tabel HTML yang diisi dengan data 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"。