Demo Tutorial Contoh Script Ajax Loader Load Content/Page
Kali ini saya akan memberikan contoh script untuk menampilkan image atau gambar loader (gambar proses loading) yang dapat digunakan pada saat kita menjalankanAjax
saat menunggu hasil atau response dari request ajax yang dijalankan.Langsung aja script nya:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Demo Tutorial Contoh Script Ajax Loader Load Content/Page @ catment.blogspt.com </title>
</head>
<body>
<style>
#loading
{
display:none;
position:fixed;
top:0%;
left:50%;
width:65px;
height:auto;
}
</style>
<!--****loading+popup_div****-->
<div id="loading">
<font color="#CC00FF" size="4"><b>Loading...</b></font><img src="loading.gif" alt='..Loading..' />
</div>
<!--********-->
<div id="content">
Teks awal sebelum file teks.php di load
</div>
<input type="button" value="Load File" onclick="load_page();" />
<script type="text/javascript" language="javascript">
<!--
var xmlhttp;
/*load_page*/
function load_page()
{
var url="teks.html?rand="+Math.random();
var post="";
ajax(url,post,'go_page');
}
/*--------*/
/*ajax*/
function ajax(url,post,response)
{
xmlhttp=GetXmlHttpObject();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState!==4)
{document.getElementById("loading").style.display="block";}
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
// setTimeout("document.getElementById('loading').style.display='none'",500); //jika ingin menggunakan delay
document.getElementById("content").innerHTML=xmlhttp.responseText;
document.getElementById("loading").style.display="none";
}
else{ajax_fail();}
}
}
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(post);
}
/*--------*/
/*ajax_fail*/
function ajax_fail()
{
document.getElementById("loading").style.display="none";
alert("Maaf ada gangguan penerimaan data, silahkan coba lagi atau refresh browser anda.");
return false;
}
/*--------*/
/*pilih xmlhttp berdasarkan browser*/
function GetXmlHttpObject()
{
if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{alert("Maaf browser anda tidak mendukung ajax.");}
return false;
}
/*--------*/
//-->
</script>
</body>
</html>
Pada contoh script diatas ajax merequest halaman teks.html sebagai contoh halaman teks.html:
Ini adalah isi dari file teks.txt yang di load menggunakan ajax.
<br />
<img src="baner.png" alt="banner" />
Hasil dari tutorial ini dapat anda coba di http://catment.co.cc/demo/ajax_loading dan download script disini.
Terima kasih, semoga tutorial ini bermanfaat.
