Membaca File XML dengan Javascript

Berikut cara membaca file XML dengan menggunakan javascript :

HTML :

<button type="button" onclick="loadXMLText()">Get XML Text</button></code><br /><code class="language-html"><p id="demo1"></p></code><br /><code class="language-html"><button type="button" onclick="loadXMLAttr()">Get XML Attribute</button></code><br /><code class="language-html"><p id="demo2"></p>

Javascript :

function loadXMLText() {</code><br /><code class="language-js">  var xmlhttp = new XMLHttpRequest();</code><br /><code class="language-js">  xmlhttp.onreadystatechange = function() {</code><br /><code class="language-js">    if (this.readyState == 4 && this.status == 200) {</code><br /><code class="language-js">      myFunction(this);</code><br /><code class="language-js">    }</code><br /><code class="language-js">  }</code><br /><code class="language-js">  xmlhttp.open("GET", "../assets/source/SC_1_A/tilemapresource.xml", true);</code><br /><code class="language-js">  xmlhttp.send();</code><br /><code class="language-js">}</code><br /><code class="language-js"></code><br /><code class="language-js">function myFunction(xml) {</code><br /><code class="language-js">  var x, i, xmlDoc, txt;</code><br /><code class="language-js">  xmlDoc = xml.responseXML;</code><br /><code class="language-js">  txt = "";</code><br /><code class="language-js">  x = xmlDoc.getElementsByTagName("SRS");</code><br /><code class="language-js">  for (i = 0; i< x.length; i++) {</code><br /><code class="language-js">    txt += x[i].childNodes[0].nodeValue + "<br>";</code><br /><code class="language-js">  }</code><br /><code class="language-js">  document.getElementById("demo1").innerHTML = txt;</code><br /><code class="language-js">}</code><br /><code class="language-js"></code><br /><code class="language-js">function loadXMLAttr() {</code><br /><code class="language-js">  var xmlhttp = new XMLHttpRequest();</code><br /><code class="language-js">  xmlhttp.onreadystatechange = function() {</code><br /><code class="language-js">    if (this.readyState == 4 && this.status == 200) {</code><br /><code class="language-js">      myFunction2(this);</code><br /><code class="language-js">    }</code><br /><code class="language-js">  };</code><br /><code class="language-js">  xmlhttp.open("GET", "../assets/source/SC_1_A/tilemapresource.xml", true);</code><br /><code class="language-js">  xmlhttp.send();</code><br /><code class="language-js">}</code><br /><code class="language-js"></code><br /><code class="language-js">function myFunction2(xml) {</code><br /><code class="language-js">  var x, i, xmlDoc, txt;</code><br /><code class="language-js">  xmlDoc = xml.responseXML;</code><br /><code class="language-js">  txt = "";</code><br /><code class="language-js">  x = xmlDoc.getElementsByTagName("Origin");</code><br /><code class="language-js">  for (i = 0; i < x.length; i++) {</code><br /><code class="language-js">      txt += "x = " + x[i].getAttribute('x') + " and y = " + x[i].getAttribute('y');</code><br /><code class="language-js">  }</code><br /><code class="language-js"></code><br /><code class="language-js">  document.getElementById("demo2").innerHTML = txt;</code><br /><code class="language-js"></code><br /><code class="language-js">}</code><code class="language-js">

Terima kasih. Selamat Mencoba

Kenapa Membaca File XML di JavaScript?

XML (eXtensible Markup Language) masih banyak digunakan untuk pertukaran data antar sistem, terutama dalam integrasi aplikasi enterprise, konfigurasi sistem, dan API lama. Kemampuan membaca dan mem-parsing file XML di JavaScript sangat penting untuk pengembangan web yang berinteraksi dengan layanan berbasis XML.

Menggunakan DOMParser

Cara paling umum untuk membaca file XML di JavaScript adalah dengan menggunakan DOMParser. Berikut contoh lengkapnya:

// Membuat instance DOMParser
const parser = new DOMParser();

// String XML yang akan diparse
const xmlString = `<?xml version="1.0"?>
<data>
  <item>
    <name>Produk A</name>
    <price>50000</price>
  </item>
  <item>
    <name>Produk B</name>
    <price>75000</price>
  </item>
</data>`;

// Parse string menjadi DOM document
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

// Mengakses elemen
const items = xmlDoc.getElementsByTagName("item");
for (let i = 0; i < items.length; i++) {
  const name = items[i].getElementsByTagName("name")[0].textContent;
  const price = items[i].getElementsByTagName("price")[0].textContent;
  console.log(`${name}: Rp ${price}`);
}

Membaca File XML dari Server

Untuk membaca file XML dari server, kamu bisa menggunakan fetch API atau XMLHttpRequest:

// Menggunakan Fetch API
fetch('data.xml')
  .then(response => response.text())
  .then(xmlString => {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlString, "text/xml");
    // Proses data XML di sini
    console.log(xmlDoc.documentElement.nodeName);
  })
  .catch(error => console.error('Error:', error));

Menangani Error Parsing

Saat mem-parse XML, selalu tangani kemungkinan error:

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

// Cek apakah ada error parsing
const parseError = xmlDoc.getElementsByTagName("parsererror");
if (parseError.length > 0) {
  console.error("XML parsing error:", parseError[0].textContent);
} else {
  // Lanjutkan proses data
}

Tips dan Best Practices

Gunakan DOMParser - Hindari menggunakan eval() atau innerHTML untuk memproses XML karena alasan keamanan
Validasi XML - Selalu periksa apakah XML berhasil di-parse sebelum mengakses elemennya
Gunakan XPath - Untuk query kompleks, gunakan XPath untuk navigasi elemen XML yang lebih efisien
Pertimbangkan JSON - Jika memungkinkan, konversi XML ke JSON untuk memudahkan manipulasi data di JavaScript

Kesimpulan

Membaca file XML di JavaScript dapat dilakukan dengan mudah menggunakan DOMParser. Dengan pemahaman yang baik tentang struktur XML dan API yang tersedia, kamu dapat mengintegrasikan data XML ke dalam aplikasi web dengan efisien dan aman.