Kamis, 13 November 2014

Membaca File XML Dengan AJAX

Asynchronous Javascript and XML atau disebut juga AJAX memiliki segudang fitur yang begitu menarik, salah satunya adalah membaca struktur file XML.

Berikut adalah contoh kode untuk membaca file XML:

Kode untuk file xmldoc.htm:
<!doctype html>
<html>
 <head>
  <title>XMLDoc - Ibrahim Arriyan</title>
 </head>
 <style type="text/css">
  body {font-family:segoe ui, tahoma; font-size:14px;}
  .table {margin-left:50px;}
  .table-data td {background-color:#CCFFCC; padding-left:5px;}
  .table-header td {background-color:#CCCCFF; font-weight:bold; padding:10px; text-align:center; width:120px;}
 </style>
 <body>
  <h3>Data Buku</h3>
  <table class="table"></tbody>
   <tr class="table-header">
    <td>Judul Buku</td>
    <td>Pengarang</td>
    <td>Penerbit</td>
   </tr>
   <script type="text/javascript">//<![CDATA[
    var $xmlhttp;

    if(window.XMLHttpRequest) {
     $xmlhttp = new window.XMLHttpRequest();
    }else{
     try{
      $xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }catch($e){
      alert("Your browser does not support XMLHttpRequest.");
     }
    }

    if($xmlhttp) {
     $xmlhttp.open("GET", "./xmldoc.xml", false); /* 3rd param:Asynchronous must be false */
     $xmlhttp.send();
     var $xmldoc = $xmlhttp.responseXML;
    }

    if($xmldoc) {
     $buku = $xmldoc.getElementsByTagName($xmldoc.childNodes[0].childNodes[1].nodeName);
     for(var $n = 0; $n < $buku.length; $n++) {
      document.write("<tr class=\"table-data\">");
      document.write("<td>" + $xmldoc.getElementsByTagName("judul")[$n].childNodes[0].textContent + "</td>");
      document.write("<td>" + $xmldoc.getElementsByTagName("pengarang")[$n].childNodes[0].textContent + "</td>");
      document.write("<td>" + $xmldoc.getElementsByTagName("penerbit")[$n].childNodes[0].textContent + "</td>");
      document.write("</tr>");
     }
    }
    //]]>
   </script>
  </tbody></table>
 </body>
</html>

Kode untuk xmldoc.xml:
<?xml version="1.0" encoding="utf-8" ?>
<database>
 <buku>
  <judul>
   Persaudaran Di atas Manhaj
  </judul>
  <pengarang>
   Al-Faroz
  </pengarang>
  <penerbit>
   Al-Huda Media
  </penerbit>
 </buku>
 <buku>
  <judul>
   Pemrograman Win32 Dengan C
  </judul>
  <pengarang>
   RizonBarns
  </pengarang>
  <penerbit>
   Alfathrom Technologies
  </penerbit>
 </buku>
</database>


Cara menggunakannya tidak bisa hanya dengan klik 2x dengan browser, melainkan menggunakan server HTTP seperti Apache atau IIS. Sehingga mengaksesnya seperti http://localhost/xmldoc/xmldoc.htm.

Alhamdulillah. Semoga bermanfaat! :)

/* EOF */

Tidak ada komentar :

Posting Komentar