Sharing my cheesy ajax example

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
jftuga
Forum Newbie
Posts: 9
Joined: Tue Feb 14, 2006 1:13 pm
Location: Athens, GA

Sharing my cheesy ajax example

Post 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;
}
?>
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Post 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;
            }
        }
    }
Post Reply