nah sekarang kita membuat jam versi ajax dan versi jquery saya pernah
memberikan jam.php menggunakan jquery pada post yang lalu.. nah sekarang
saya akan bandingkan. menurut saya si lebih nyaman menggunakan jquery
karna ngetiknya sedikit heheh .. tapi itu terserah anda aja dah.. ok
kita mulai aja AJAX VS JQUERY
sekarang kita buat tiga file. file pertama jam.php , jam_ajax.php dan jam_jquery. START...
file pertama jam.php
<?php
date_default_timezone_set("Asia/Jakarta");
$jam = date('H:i:s');
echo "$jam WIB";
?>
ok sekarang kita buat yang jam_ajax.php
<html>
<head>
<script language="javascript">
var XMLHttpRequestObject = false;
if(window.XMLHttpRequest){
XMLHttpRequestObject = new XMLHttpRequest();
} else if(window.ActiveXObject){
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getjam(sumberdata, divID){
if(XMLHttpRequestObject){
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET",sumberdata);
XMLHttpRequestObject.onreadystatechange = function() {
if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
obj.innerHTML = XMLHttpRequestObject.responseText;
setTimeout("getjam('jam.php','dijam')",1000);
}
}
XMLHttpRequestObject.send(null);
}
}
window.onload=function(){
setTimeout("getjam('jam.php','divjam')",1000);
}
</script>
</head>
<body>
<div id="divjam"></div>
</body>
</html>
ok sekarang kita buat dengan jquery, jam_jquery.php
<html>
<head>
<script src="jquery-1.4.js"></script>
<script>
$(document).ready(function(){
setInterval(function(){
$('#divjam').load('jam.php?acak='+ Math.random());
}, 1000); //refresh tiap 1 detik
});
</script>
</head>
<body>
<div id="divjam"></div>
</body>
</html>
nah gimana menurut anda klo saya pasti milih jquery lebih simple oh iya sampe lupa. kurang satu file lagi buat yang jquery nah di situ kan ada script yang seperti ini:
<script src="jquery-1.4.js"></script>
nah itu adalah file jquery bisa kita dapatkan di situs resminya gratis. tapi bakalan susah nyarinya di mbah google butuh waktu. nah saya sediain aja file nya tinggal di gabungin aja satu folder. ok.. file nya bisa di download di halaman blog ini di download file.
sekarang kita buat tiga file. file pertama jam.php , jam_ajax.php dan jam_jquery. START...
file pertama jam.php
<?php
date_default_timezone_set("Asia/Jakarta");
$jam = date('H:i:s');
echo "$jam WIB";
?>
ok sekarang kita buat yang jam_ajax.php
<html>
<head>
<script language="javascript">
var XMLHttpRequestObject = false;
if(window.XMLHttpRequest){
XMLHttpRequestObject = new XMLHttpRequest();
} else if(window.ActiveXObject){
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getjam(sumberdata, divID){
if(XMLHttpRequestObject){
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET",sumberdata);
XMLHttpRequestObject.onreadystatechange = function() {
if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
obj.innerHTML = XMLHttpRequestObject.responseText;
setTimeout("getjam('jam.php','dijam')",1000);
}
}
XMLHttpRequestObject.send(null);
}
}
window.onload=function(){
setTimeout("getjam('jam.php','divjam')",1000);
}
</script>
</head>
<body>
<div id="divjam"></div>
</body>
</html>
ok sekarang kita buat dengan jquery, jam_jquery.php
<html>
<head>
<script src="jquery-1.4.js"></script>
<script>
$(document).ready(function(){
setInterval(function(){
$('#divjam').load('jam.php?acak='+ Math.random());
}, 1000); //refresh tiap 1 detik
});
</script>
</head>
<body>
<div id="divjam"></div>
</body>
</html>
nah gimana menurut anda klo saya pasti milih jquery lebih simple oh iya sampe lupa. kurang satu file lagi buat yang jquery nah di situ kan ada script yang seperti ini:
<script src="jquery-1.4.js"></script>
nah itu adalah file jquery bisa kita dapatkan di situs resminya gratis. tapi bakalan susah nyarinya di mbah google butuh waktu. nah saya sediain aja file nya tinggal di gabungin aja satu folder. ok.. file nya bisa di download di halaman blog ini di download file.
Tidak ada komentar:
Posting Komentar
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.