Pada tutorial kali ini saya akan membuat jam interaktif dengan Ajax.
Pertama buatlah file dengan nama main.css
body{
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color:#fff;
color:#333;
font-size:16px;
padding-left:10px;
padding-bottom:30px;
line-height: 150%;
}
input, select, textarea{
border:1px solid #CCCCCC;
padding: 5px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
}
input.blur {
color: #999;
}
.demo{
border:solid 1px #ccc;
background-color:#def;
padding:10px
}
form div {
padding: 4px 4px 4px 4px;
}
label {
float: left;
width: 100px;
}
Kedua buatlah file dengan nama jam_ajax.php
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<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','divjam')",1000);
}
}
XMLHttpRequestObject.send(null);
}
}
window.onload=function(){
setTimeout("getJam('jam.php','divjam')",1000);
}
</script>
</head>
<body>
<div class="demo" style="width: 250px;" align="center">
<div id="divjam"> </div>
</div>
</body>
</html>
mantap artikelnya bos, www.pasarkode.com
BalasHapusmau tnya dong mas, kalo bikin penjumlhan dgn ajax gmn ya? beda ajax sam jquery apa ya?
BalasHapusmasih bingung ey