Dapat dikatakan, kata kunci dari Ajax adalah pemrosesan tanpa reload (refresh). Artinya, pemrosesan yang lazimnya melibatkan reloading dapat dilakukan tanpa perlu me-reload halama web. Konsep pemrosesan tanpa reload inilah yang merupakan salah satu fitur menarik untuk diimplementasikan.
Sekedar ilustrasi, bagian ini akan menjelaskan pengambilan data dari file kemudian menampilkannya ke browser dengan tanpa reloading. Berikut ini kode Javascript yang kita beri nama test.js
var xmlHttp = createXmlHttpRequest();
var obj = '';
function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActivateXObject) {
xmlHttp = new ActivateXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp) {
alert("Gagal Menciptakan objek");
}
return xmlHttp;
}
function getData(source, divID) {
if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
obj = divID;
xmlHttp.open("GET", source);
xmlHttp.onreadystatechange = handleRespon;
xmlHttp.send(null);
} else {
setTimeout('getData(source, divID)', 1000);
}
}
function handleRespon() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById(obj).innerHTML = xmlHttp.responseText;
} else {
alert("Error: " + xmlHttp.statusText);
}
}
}
var obj = '';
function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActivateXObject) {
xmlHttp = new ActivateXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp) {
alert("Gagal Menciptakan objek");
}
return xmlHttp;
}
function getData(source, divID) {
if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
obj = divID;
xmlHttp.open("GET", source);
xmlHttp.onreadystatechange = handleRespon;
xmlHttp.send(null);
} else {
setTimeout('getData(source, divID)', 1000);
}
}
function handleRespon() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById(obj).innerHTML = xmlHttp.responseText;
} else {
alert("Error: " + xmlHttp.statusText);
}
}
}
Langkah selanjutnya adalah mengimplementasikan kode di atas pada dokumen HTML
<html>
<head>
<script type='text/javascript' src='test.js'></script>
</head>
<body>
<form>
<input type='button' value='Get Data' onclick="getData('test.txt', 'target')">
</form>
<!-- untuk menampilkan hasil -->
<div id='target'>
<p>Data Akan ditampilkan disini</p>
</div>
</body>
<head>
<script type='text/javascript' src='test.js'></script>
</head>
<body>
<form>
<input type='button' value='Get Data' onclick="getData('test.txt', 'target')">
</form>
<!-- untuk menampilkan hasil -->
<div id='target'>
<p>Data Akan ditampilkan disini</p>
</div>
</body>
Perlu sekali diperhatikan, keberadaan elemen <div> dengan atribut id bernilai target memiliki arti penting guna mendukung keberhasilan aplikasi, Singkatnya, di elemen inilah nantinya hasil request atau respon dari server akan kita letakkan. Sebagai tambahan, sebelum anda menguji kode di atas, pastikan anda sudah menyiapkan file bernama test.txt di direktori yang sama
Untuk file lengkap atau source code nya berikut design dari tampilannya bisa anda download Disini
Terima kasih telah berkunjung ke blog Dewa Coding 21 . Jangan lupa ber komentar :)
Tutorial / Cara mengambil data tanpa reload dengan Ajax
4/
5
Oleh
Unknown
