Page 1 of 1

Sharing my cheesy ajax example

Posted: Fri Feb 24, 2006 12:09 pm
by jftuga
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

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>
random.php

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;
}
?>

Posted: Fri Feb 24, 2006 1:16 pm
by d3ad1ysp0rk
What's the purpose of the $_GET['action']? I mean, Rasmus' 30 second Ajax tutorial included it, but that's because he assumed the programmer would extend upon that for different circumstances (note the . . . under the case, it shows that there would be something more in a real life example).

Anywho, I use this for my browser detection (check out this article for a good start on graceful degradation and other useful things):

Code: Select all

req = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) {
        try {
            req = new XMLHttpRequest();
        } catch(e) {
            req = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                req = false;
            }
        }
    }