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
- Untuk mempelajari dan men download source code program secara utuh, klik https://github.com/programmerbiasa/BlogPostRollbeldnlat147blogspot/tree/main/learnWebDevs/bangunWebAjax/ajax
- Anda dapat menggunakan editor yang lain, tinggal menyesuaikan dengan kebutuhan Anda.
- Jika menggunakan editor lain, Anda mungkin perlu menyesuaikan langkah tutorial di atas.
