Ketika seorang user mengklik tombol yang membuat dokumen meminta layanan ke server, kebanyakan dari user tersebut tidak tahu proses apa yang dilakukan terhadap dokumen sampai ia menjumpai hasilnya di layar.
Dalam kenyataannya, informasi yang di dapatkan tersebut bisa saja diperoleh tidak seketika, tetapi beberapa saat kemudian. Untuk memberikan kepastian bahwa pemakai sebenarnya telah mengklik tombol, akan lebih baik kalau dokumen memberitahukannya, misalnya dengan memberi pesan seperti :
Loading...
Tunggu sebentar...
Please wait...
Wait for a moment...
Saya menggunakan 2 buah File :
1.File Loading.html
2.File Time.php
File.Loading.html
<html>
<head>
<script type="text/javascript">
var xmlHttp = buatObjekXmlHttp();
function buatObjekXmlHttp()
{
var obj=null;
if(window.ActiveXObject)
obj = new ActiveXObject("Microsoft.XMLHTTP");
else
if(window.XMLHttpRequest)
obj = new XMLHttpRequest();
//Cek isi xmlHttp
if(obj == null)
document.write("Browser tidak mendukung XMLHttpRequest");
return obj;
}
function ambilData(sumber_data, id_elemen)
{
if(xmlHttp!=null)
{
var obj = document.getElementById(id_elemen);
xmlHttp.open("GET", sumber_data);
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
obj.innerHTML = xmlHttp.responseText;
}
}
else
obj.innerHTML = "Tunggu....";
}
xmlHttp.send(null);
}
}
</script>
<title>Tanda Loading</title>
</head>
<body>
<input type="button" value="Klik Saya" onclick="ambilData('waktu.php', 'id_info');"/>
<div id="id_info">Kalau anda mengklik tombol di atas suatu info muncul di sini</div>
</body>
</html>
Sebagian penjelasan pada kode ini hampir sama dengan contoh program pada http://firmansyahyunus.blogspot.com/2011/06/pengenalan-ajax-2.html , jadi tidak perlu saya tulis ulang karena saya menjelaskannya baris-perbaris.
Untuk baris ini, "Else" menjelaskan bagian yang akan dijalankan kalau readystate tidak bernilai 4. Jadi kalau belum bernilai 4 yang berarti menunggu sampai nilai 4 didapatkan maka tulisan "Tunggu..." diberikan ke elemen yang digunakan untuk menyajikan hasil.
Untuk baris ini, "Else" menjelaskan bagian yang akan dijalankan kalau readystate tidak bernilai 4. Jadi kalau belum bernilai 4 yang berarti menunggu sampai nilai 4 didapatkan maka tulisan "Tunggu..." diberikan ke elemen yang digunakan untuk menyajikan hasil.
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
obj.innerHTML = xmlHttp.responseText;
}
}
else
obj.innerHTML = "Tunggu....";
File Time.php
<?php
header("Cache-Control: no-cache, must-revalidates");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
//Tunda
sleep(10);
$waktu = date("H:i:s");
print("Anda mendapatkan info ini dari server pada jam $waktu");
?>
Pada skrip diataskan diberikan kode sleep(10), sengaja diberikan dengan tujuan agar skrip tersebut tidak segera memberikan hasil, sehingga tulisan Tunggu... pada dokumen.loading.html akan terlihat cukup lama sekitar 10 detik.
Program ketika pertama dijalankan :
Program ketika di klik dan proses tunggu di mulai :
Program ketika proses tunggu selesai dan mengambil waktu dari server :
Supaya lebih menarik, anda dapat mengganti tulisan Tunggu... dengan gambar *.gif.
Sekian tulisan ini saya buat semoga dapat bermanfaat bagi teman-teman.
Tidak ada komentar:
Posting Komentar