Auto Refresh Web Page With AJAX Technique

15 01 2011

Sudah lama blog ini terbengkalai, ngga terurus lagi. Waktu login tadi agak terkejut melihat dahboard blog ini penuh dengan sarang laba-laba, kotor banget….. jadi harus di sapu dulu sebelum nulis artikel ini…… hehehe. Pada kesempatan ini saya mencoba akan menyajikan tutorial sederhana mengenai aplikasi pemrograman website dengan judul “Auto Refresh Web Page With AJAX Technique” kurang lebih artinya adalah refresh otomatis halaman website dengan Teknik AjAX. Apa sih AJAX itu ? hhmm… untuk pengertian tentang AJAX dapat anda lihat disini atau disini.

Pada tulisan kali ini kita akan membuat sebuah halaman web sederhana dengan menampilkan data atau nilai acak yang terus berubah secara kontinu tanpa harus kita refresh (load) pada halaman web tersebut. Fungsi yang menampilkan nilai acak tersebut menggunakan fungsi pada PHP yaitu rand() —> get random value.

Berikut Potongan Source Code -nya :

<html>
<head>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function()
{
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 1000);
});
</script>
</head>
<body>
<center><br /><br /><br />
<table border="1" bgcolor="yellow"><tr><td>
<div id="responsecontainer"></div>
</td></tr></table>
</center>
</body>
</html>

Download Full Source Code

Download Link URL : http://www.4shared.com/file/dAsN8Woi/auto-refresh.html

Source code tersebut hanya menampilkan nilai acak dari rand function, tidak terhubung sama sekali ke basis data atau database. Mungkin lain kali akan saya tuliskan artikel menampilkan data realtime dari query database yang telah saya modifikasi dari source code tersebut. Sekian tulisan sederhana ini, bila ada kesalahan mohon koreksi dari kawan-kawan.

Thanks

 

Regards


Actions

Information

14 responses

28 06 2011
ghaane

good, friend

28 06 2011
heru widakdo

Thanks You……

31 10 2011
bons

Maksih banget bro..😀

31 10 2011
heru widakdo

Sama2 gan, thanks sudah berkunjung di blog ane….

8 02 2012
oche

kalo kodenya di tambahkan online bisa g’ gan

9 02 2012
heru widakdo

@oche : ditambahkan online gmana gan maksudnya ?
Thanks sudah mampir di blog ane gan….

9 02 2012
kgmsjq

mantap.. thanks kang🙂

9 02 2012
heru widakdo

sama2 gan…

27 02 2012
jaran

suanga cuk………….

3 01 2013
siGendut

mana tutorialnya yang pakai database?

18 01 2013
28 05 2013
alamsyah

gan, link nya mati nih…

26 07 2013
nazliramadani

trimakasih .. sudah share…

11 11 2014
ZIDNA ILMAN NAFI

terima kasih gan . . .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: