Tujuan Pembelajaran
- Menerapkan HTTPRequest dengan memanfaatkan file "books.xml".
- Menampilkan data buku-buku dari file XML ke dalam table HTML.
Rencana Pembelajaran
Menerapkan HTTPRequest dengan melibatkan:
- Satu file HTML (listbooks.html) + JavaScript (listbooks.js).
- Satu file XML (books.xml).
- Menggunakan "Code Editor - Compiler & IDE by Rhythm Software" selanjutnya akan disebut Code Editor saja.
Langkah
- Buka Code Editor.
- Dengan demikian file "books.xml" harus disiapkan terlebih dahulu ke folder yang sama atau yang dapat diakses dengan mudah oleh program Ajax. Ketik source code di bawah ini :
<?xml version="1.0" encoding="ISO-8859-1"?>
<bookstore>
<book category="PROGRAMMING">
<title lang="en">
Basis Data
</title>
<author>Andi Sunyoto</author>
<year>2008</year>
<price>30.000</price>
</book>
<book category="MANAJEMEN">
<title lang="en">Strategic Management</title>
<author>Raymond Mc.Leod</author>
<year>2010</year>
<price>290.999</price>
</book>
<book category="WEB">
<title lang="en">Pemrograman Internet </title>
<author>Andi Sunyoto, Andri Kurniawan, Prasetyo Adi, James Linn, Ginanjar Kusumo</author>
<year>2009</year>
<price>100.000</price>
</book>
<book category="WEB">
<title lang="en">Belajar XML</title>
<author>Patria Adi</author>
<year>2010</year>
<price>40.950</price>
</book>
</bookstore>
- Simpan dengan nama path dan file (ajax/books.xml). Tap icon button File di kanan atas lalu Tap Save As.
- Contoh penggunaan tampilan daftar data dari file XML dengan XMLHttpRequest menggunakan Javascript.
|
Basis Data
| Andi Sunyoto |
| Strategic Management | Raymond Mc.Leod |
| Pemrograman Internet | Andi Sunyoto, Andri Kurniawan, Prasetyo Adi, James Linn, Ginanjar Kusumo |
| Belajar XML | Patria Adi |
- Ketik source code di bawah ini dan simpan dengan nama path dan file (ajax/listbooks.js). var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp= null;
//Mozilla, etc
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
//IE
else if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null) {
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
} else {
alert("Browser tidak support XMLHTTP");
}
}
function checkreadystate(obj) {
if(obj.readyState == 4) {
if(obj.status == 200) {
return true;
} else {
alert("Problem retrieving XML Data."); }
}
}
function onResponse() {
if (checkreadystate(xmlhttp)) {
var response = xmlhttp.responseXML.documentElement;
txt = "<table border='1'>";
x = response.getElementsByTagName("book");
for (i=0;i<x.length;i++) {
txt = txt +"<tr>";
xx = x[i].getElementsByTagName("title"); {
try {
txt = txt + "<td>" + xx[0].firstChild.data + "</td>";
} catch(er) {
txt = txt + "<td></td>";
}
}
xx = x[i].getElementsByTagName("author"); try {
txt = txt + "<td>" + xx[0].firstChild.data + "</td>";
} catch (er) {
txt = txt + "<td></td>";
}
txt = txt + "</tr>";
}
txt = txt + "</table>";
document.getElementById('copy').innerHTML = txt;
}
} - Ketik source code di bawah ini dan simpan dengan nama path dan file (ajax/listbooks.html).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>List Books</title>
<script type="text/javascript" src="listbooks.js"></script>
</head>
<body onload="loadXMLDoc('books.xml');">>
<div id="copy"></div>
</body>
</html> - Buka browser, lalu tampilkan output ke dalam browser.
Catatan
Tidak ada komentar:
Posting Komentar