AJAX: display nilai dari tabel automatically

BY IN AJAX Comments Off on AJAX: display nilai dari tabel automatically

Terkadang kita membutuhkan melihat sebuah nilai yang ada di database lalu ditampilkan di website, tanpa trigger dari user. Artinya kita memanggil fungsi AJAX secara terus menerus, untuk dapat memantau sebuah nilai yang tersimpan dalam database kita.

Pertama2 kita buat fungsi AJAXnya dulu:

<html>

<head>

<script language=”Javascript”>

function postRequest(strURL) {

var xmlHttp;

if (window.XMLHttpRequest) { // Mozilla, Safari, …
var xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}

xmlHttp.open(‘POST’, strURL, true);

xmlHttp.setRequestHeader(‘Content-Type’,
‘application/x-www-form-urlencoded’);

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

updatepage(xmlHttp.responseText);

}

}

xmlHttp.send(strURL);

}

function updatepage(str){
document.getElementById(“result”).innerHTML =
“<font color=’red’ size=’5′>” + str + “</font>”;;
}

function showCurrentStatus(){
var rnd = Math.random();

var url=”retrieve.php?id=”+rnd;
postRequest(url);
timedRefresh(5000);
}

function timedRefresh(timeoutPeriod) {
setTimeout(“showCurrentStatus();”,timeoutPeriod);
}

</script>

</head>

<body onLoad=’JavaScript:showCurrentStatus()’>

<div id=result>
</div>

</body>

</html>

Penjelasan dr script singkat diatas, pada saat halaman diload, fungsi showCurrentStatus akan dipanggil, dimana fungsi ini nantinya akan mengeksekusi fungsi AJAX untuk menjalankan file PHP yang digunakan untuk mengambil nilai dari tabel. Setelah itu, fungsi ini akan memanggil dirinya sendiri selang beberapa detik yang bisa kita set, sehingga kita akan dapatkan fungsi rekursif.

Berikut contoh file retrieve.php yang dipanggil AJAX

<?php

//baca dari tabel
@mysql_connect( $dbHost,$dbUser,$dbPasswd ) or error( mysql_error() );
mysql_select_db( ‘pabrik’ );

$sql=’SELECT * FROM lampu’
$result=mysql_query($sql);

while($data=mysql_fetch_array($result))
{
echo $data[statusA];
echo $data[statusB];
echo $data[statusC];

}

?>




Comments are closed.