Sharing my cheesy ajax example
Posted: Fri Feb 24, 2006 12:09 pm
This is my cheesy example of an AJAX script. It is simple enough that anyone should be able to follow it. Also, it only seem to work in Firefox and will not work in IE.
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
random.php
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;
}
?>