Simple AJAX Tutorial

Today i was faced with the need to use AJAX in a programming project that i am currently working on. Since this was my first "real" use of AJAX, it took me some time to find a good, easy, and most importantly fast reference to get things rolling. So i decided to add my newfound knowledge, in a form that would hopefully benefit others.

PS: it is assumed in this tutorial that you already possess the knowledge for web programming.

In your web page, you need to add the following JavaScript:

/*This function creates the request object, we check if activeX is available, because Internet Explorer deals with the request object differently than other browsers */
function createRequestObject() {
    if(window.XMLHttpRequest) { // If Safari, Mozilla, Netscape, ...
        request = new XMLHttpRequest();
    } else if(window.ActiveXObject) { // If IE
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return request;
}

var request = createRequestObject();

/*This function sends the request, and defines the response handler. Notice that when we define the response handler, we mention the function name, we do not add paranthesis after it, nor do we pass it a parameter list. We simply define it, not call it. The open method opens a connection to the specified URL, to send the request to. */
function sendRequest(url) {
    request.onreadystatechange = responseHandler;
    request.open("GET", url);
    request.send(null);
}

/*This function is called when the request state changes. If request is complete and OK, then we process the result. */
function responseHandler(request) {
    if(request.readyState == 4) { //If request complete
        if(request.status == 200) { //If request OK
            var string = request.responseText;
            //Process response
        }
    }
}

All the previous code would be run and executed on the client machine. You just need to connect the sendRequest function with an event in your page, such as onClick button, or onChange select.
On the server side, you simply need to create a page which request.open connects to, read the parameters in your GET request, do some processing, and echo the results.

Of course, AJAX has so much more to it than this rather simple example. But this is meant as a starting point, to get things rolling fast. AJAX contains so much more, from using POST to send the request, to accepting XML as a response. The only limit is your imagination!!

--
Links i used to gain this knowledge:
1- Rasmus' 30 second AJAX tutorial
2- Mozilla Developer Center