Kursus Membuat Web

iklan

XML File Ajax

AJAX dapat digunakan untuk komunikasi interaktif dengan file XML. Contoh berikut akan menunjukkan bagaimana sebuah halaman web dapat mengambil informasi dari file XML dengan AJAX :

Script HTML : ajax_xml.html
<!DOCTYPE html>
<html>
	<head>
		<title>Contoh Ajax</title>
		<meta  charset="UTF-8">
			<script>
			function loadXMLDoc(url){
			var xmlhttp;
			var txt,x,xx,i;
			if (window.XMLHttpRequest)
			{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
			}
			else
			{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function()
			{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
			txt="<table border='1'><tr><th>Title</th><th>Artist</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('txtCDInfo').innerHTML=txt;
			}
			}
			xmlhttp.open("GET",url,true);
			xmlhttp.send();
			}
			</script>
</head>
<body>
	<div id="txtCDInfo">
	<button onClick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
	</div>
</body>
</html>
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>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
</CATALOG>
Lihat ...

Penjelasan Fungsi stateChange()

Ketika pengguna mengklik pada tombol "Get CD Info" di atas, fungsi loadXMLDoc() dijalankan. fungsi loadXMLDoc() menciptakan objek XMLHttpRequest, menambahkan fungsi untuk dieksekusi ketika respon server sudah siap, dan mengirimkan permintaan ke server. Ketika respon server sudah siap, sebuah tabel HTML dibangun, nodes (elemen) yang diekstrak dari file XML, dan akhirnya update placeholder txtCDInfo dengan tabel HTML diisi dengan data XML :

Sebelumnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015