There are 2 files:
ajax.php, which is what you would call up from your browser
random.php, the back end.
Have fun!
-John
ajax.php
Code: Select all
<html>
<head><title>AJAX test page</title></head>
<script language="Javascript">
// adpoted from Rasmus Lerdorf...
// http://marc.theaimsgroup.com/?l=php-gen ... 625636&w=2
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
var loop = 0;
function sndReq() {
http.open('get', 'random.php?action=update');
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
var $h = 0;
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
document.getElementById(update[2]).innerHTML = update[3];
document.getElementById(update[4]).innerHTML = update[5];
document.getElementById(update[6]).innerHTML = update[7];
$h = update[1] + "px";
document.getElementById("bar1").style.height = $h;
$h = update[3] + "px";
document.getElementById("bar2").style.height = $h;
$h = update[5] + "px";
document.getElementById("bar3").style.height = $h;
$h = update[7] + "px";
document.getElementById("bar4").style.height = $h;
}
}
}
function main() {
loop = setInterval('sndReq()', 667);
}
</script>
<style type="text/css">
div#bar1 {float: left; width: 100px; height: 70px; text-align: center; background: #AAA; color: black; border: solid black 1px; border-width: 0 1px 1px 0; pa
dding: 0 1px 1px 0; margin: -1px 1px 10px -1px;}
div#bar2 {float: left; width: 100px; height: 140px; text-align: center; background: #BDE; color: black; border: solid black 1px; border-width: 0 1px 1px 0; p
adding: 0 1px 1px 0; margin: -1px 1px 10px -1px;}
div#bar3 {float: left; width: 100px; height: 35px; text-align: center; background: #E0E; color: black; border: solid black 1px; border-width: 0 1px 1px 0; pa
dding: 0 1px 1px 0; margin: -1px 1px 10px -1px;}
div#bar4 {float: left; width: 100px; height: 105px; text-align: center; background: #CFA; color: black; border: solid black 1px; border-width: 0 1px 1px 0; p
adding: 0 1px 1px 0; margin: -1px 1px 10px -1px;}
</style>
<body>
<h1>AJAX test page</h1>
<a href="javascript:main()">[click to start]</a>
<br>
<a href="javascript:clearInterval(loop)">[click to stop]</a>
<br>
<br><br>
<div id="bar1">70</div>
<div id="bar2">140</div>
<div id="bar3">105</div>
<div id="bar4">35</div>
</body>
</html>Code: Select all
<?
$min=1;
$max=200;
switch($_REQUEST['action']) {
case 'update':
$r1 = rand($min,$max);
$r2 = rand($min,$max);
$r3 = rand($min,$max);
$r4 = rand($min,$max);
echo "bar1|" . $r1 . "|bar2|" . $r2 . "|bar3|" . $r3 . "|bar4|" . $r4;
break;
}
?>