Menampilkan data terbaru dengan AJAX
Posted by dillah2008 on May 29, 2008
Setelah sekian lama berusaha mencari source code bagaimana caranya biar data di web (yang dalam bentuk table HTML) dapat terbarukan tanpa di refresh terlebih dahulu akhirnya dapat pencerahan juga. Sebelumnya ketika mencari di om google gw mendapatkan satu halaman yang memberikan ulasan tentang ini, namun sang pengulas tidak memberikan sourcenya secara cuma2… 
Akhirnya ketemu juga di page w3schools ..uhhh padahal page ini merupakan referensi gw pertama kalau mengalami kesulitan, tapi kok bisa lolos yah..dasar ga teliti.
Source nya cukup simple, dan kalau untuk di modifikasi sepertinya enak…bagi anda yang membutuhkan silahkan menikmati 
file : cd_catalog.xml
<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<!– Edited by XMLSpy® –>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits 56</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
</CATALOG>
file : muka.html
<html>
<head>
<script type=”text/javascript”>
var xmlhttp;
function loadXMLDoc()
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open(“GET”,”cd_catalog.xml”,true);
xmlhttp.send(null);
}
else
{
alert(“Your browser does not support XMLHTTP.”);
}
setTimeout( “loadXMLDoc()”, 100 );
}
function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert(“Problem retrieving XML data”);
return;
}
txt=”<table border=’1′>”;
txt= txt + “<tr><th>Judul Lagu</th><th>Nama Penyanyi</th></tr>”;
x=xmlhttp.responseXML.documentElement.getElementsByTagName(“CD”);
for (i=0;i<x.length;i++)
{
txt=txt + “<tr>”;
xx=x[i].getElementsByTagName(“TITLE”);
{
try
{
txt=txt + “<td>” + xx[0].firstChild.nodeValue + “</td>”;
}
catch (er)
{
txt=txt + “<td> </td>”;
}
}
xx=x[i].getElementsByTagName(“ARTIST”);
{
try
{
txt=txt + “<td>” + xx[0].firstChild.nodeValue + “</td>”;
}
catch (er)
{
txt=txt + “<td> </td>”;
}
}
txt=txt + “</tr>”;
}
txt=txt + “</table>”;
document.getElementById(‘copy’).innerHTML=txt;
}
</script>
</head>
<body onload=”loadXMLDoc(‘cd_catalog.xml’)”>
<!–<button >Get CD info</button>–> dadadadad<br>
<div id=”copy”></div>
</body>
</html>
Contoh diatas adalah untuk membaca data dari XML, sedangkan yang dibawah ini membaca data dari bentuk biasa…Mungkin implementasinya data2 tersebut bisa diambil dari DB
cd_catalog.php
<?
echo “<table width=\”100%\” border=\”1\” cellspacing=\”0\” cellpadding=\”2\”>
<tr>
<th scope=\”col\”>satu1</th>
<th scope=\”col\”>dua</th>
<th scope=\”col\”>tiga</th>
<th scope=\”col\”>empat</th>
</tr>
<tr>
<td>satu satu</td>
<td>dua dua</td>
<td>tiga tiga</td>
<td>empat empat</td>
</tr>
<tr>
<td>lima lima23</td>
<td>enam enam</td>
<td>tujuh tujuh</td>
<td>lapan lapan</td>
</tr>
</table>”;
?>
muka.html
<html>
<head>
<script type=”text/javascript”>
var xmlhttp;
function loadXMLDoc()
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open(“GET”,”cd_catalog.php”,true);
xmlhttp.send(null);
}
else
{
alert(“Your browser does not support XMLHTTP.”);
}
setTimeout( “loadXMLDoc()”, 1000 );
}
function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert(“Problem retrieving XML data”);
return;
}
document.getElementById(‘copy’).innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body onload=”loadXMLDoc()”>
<!–<button >Get CD info</button>–> dadadadad<br>
<div id=”copy”></div>
</body>
</html>
