Parser XML: Code dan Cara Membuatnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 20, 2020

Semua browser utama memiliki pengurai XML bawaan untuk mengakses dan memanipulasi XML.

Section Artikel

1 XML Parser
2 Mengurai String Teks
3 Versi lama Internet Explorer
4 Objek XMLHttpRequest

XML Parser

XML DOM (Document Object Model) mendefinisikan properti dan metode untuk mengakses dan mengedit XML.

Namun, sebelum dokumen XML dapat diakses dokumen itu harus dimuat ke dalam objek XML DOM.

Semua browser modern memiliki pengurai XML bawaan yang dapat mengubah teks menjadi objek XML DOM.

Mengurai String Teks

Contoh ini mengurai string teks menjadi objek XML DOM, dan mengekstrak info darinya dengan JavaScript:

Contoh :

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var parser, xmlDoc;
var text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");

document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

Penjelasan Kode

Sebuah string teks didefinisikan:

text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

Pengurai XML DOM dibuat:

parser = new DOMParser();

Parser membuat objek XML DOM baru menggunakan string teks:

xmlDoc = parser.parseFromString(text,"text/xml");

Versi lama Internet Explorer

Versi lama Internet Explorer (IE5, IE6, IE7, IE8) tidak mendukung objek DOMParser.

Untuk menangani versi Internet Explorer yang lebih lama, periksa apakah browser mendukung objek DOMParser atau buatlah ActiveXObject:

Contoh :

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var parser, xmlDoc;
var text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

if (window.DOMParser) {
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(text,"text/xml");
} else {
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.loadXML(text); 
} 

document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

Objek XMLHttpRequest

Objek XMLHttpRequest memiliki XML Parser bawaan.

Properti responseText mengembalikan respons sebagai string.

Properti responseXML mengembalikan respons sebagai objek XML DOM.

Jika kita ingin menggunakan respons sebagai objek XML DOM, kita bisa menggunakan properti responseXML.

Contoh
Minta file cd_catalog.xml dan gunakan respons sebagai objek XML DOM:

<!DOCTYPE html>
<html>
<body>
<h2>My CD Collection:</h2>

<button type="button" onclick="loadXMLDoc()">
Get my CD collection</button>

<p id="demo"></p>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true);
  xmlhttp.send();
}

function myFunction(xml) {
  var x, i, xmlDoc, txt;
  xmlDoc = xml.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName("ARTIST");
  for (i = 0; i< x.length; i++) {
    txt += x[i].childNodes[0].nodeValue + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>