Simple AJAX

AJAX is not a language. It is simply giving a name to something that has existed for years. Using the DOM of the web browser you are allowed to pass XML between the server and the client without having to reload the page. You don't necessarily have to pass XML; in this example we will be passing simple text.

What this example will allow you to do is replace the contents of a DIV tag with the contents of any file on your server. Why would you want to do this? You can't reload the web page hundreds of times, that gets annoying. If you would like to update parts of your web page with dynamic content from your server on the fly, AJ is for you.

First is the Javascript file, aptly named ajax.js:

function browser_check() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        document.write("Your browser sucks.");
    }
}

var ajax = browser_check();

function getPage(pageName) {
    var link = pageName + '?rand=' + Math.random();
    if (ajax.readyState == 4 || ajax.readyState == 0) {
        ajax.open("GET", link, true);
        ajax.onreadystatechange = handleGetPage;
        ajax.send(null);
    }
}

function handleGetPage() {
    if (ajax.readyState == 4) {
        drawPage();
    }
}

function drawPage() {
    page = ajax.responseText;
    document.getElementById('content').innerHTML = page;
}

Code breakdown:

browser_check() returns the XML HTTP instance. Because Firefox and IE do things differently, we use this one function to return either of the two methods which both act the same anyways.

var ajax = browser_check(); this just sets our variable ajax to be the XML HTTP function.

getPage(pageName) This is the function we run when one of our AJAX links is clicked. The var link line takes the filename that is passed to it and adds a random number to the end. The url will then be called with the random number attached. If you didn't do this, IE would cache the one page and you would never see any new data.

The other two function just make sure the XML HTTP object is ready to work again. If you clicked the same link a million times and content is still being transfered, it would prolly bitch at you.

This file has three main parts (when your using this in a real world example it would also have all of your layout code). The line <script> loads the ajax file. The <a> line runs our getPage() command when clicked. The The line <div> creates our content div which is replaced with the new content when the links are clicked.

The contents of the third and fourth files, test.htm and test2.htm can contain whatever dynamic (or static) content you would like.

This is a very boring example, isn't it? In order to get much use out of this you would want to pass GET data through the url. You might also want an automatic refresher to execute the getPage over and over.

Thomas has contributed to dozens of enterprise Node.js services and has worked for a company dedicated to securing Node.js. He has spoken at several conferences on Node.js and JavaScript and is an O'Reilly published author.