We Know Web

Web people have surrounded AJAX with a lot of hype, so much so that learning it might seem like a daunting task.

You need two components for AJAX programming, client-side (Javascript) and server-side (PHP) scripts. If you are already familiar with these two, then you’re only just a few steps, (or key punches) away from your first AJAX script.

Step 1:

Create a “Request Object”. Imagine we have an intercom system. Phone A is Javascript and Phone B is PHP. Now, “Request Object” would be the wires that would connect the two, to be able to communicate.

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();

Step 2:

Create our Javascript function which we will call by clicking on a button or a link from our HTML page. “rpc.php” would contain our server-side logic, taking GET parameters and spitting out results via stdout.

function sndReq(action) {
    http.open('get', 'rpc.php?action='+action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

Step 3:

Create a Javascript function to handle the result after we execute Step 2. This is the handler that will present whatever result the server-side script produced.

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();

        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}

For more information where this material came from, check out Rasmus’ 30 second AJAX Tutorial