very easy first AJAX web application

Let me explain why i selected such title. When writing AJAX scripts there is a part of code that always have to be included, it is pretty much like DOCTYPE in html, you do not have to understand it, just copy and paste, more over our code will be a function which takes no parameters and only returns one as XMLHttpRequest. If you do not know what this object is suggest you reading my introduction to AJAX web development.

Creating AJAX Object

Like i said you do not need to know what this function will do but anyway i will explain it shortly. This function is needed because Microsof Internet Explorer has it’s own idea of how AJAX in browsers should be initialized, in fact other browsers do not require to initialize AJAX XMLHttpRequest class at all, while IE want it to be initialized as ActiveX object. Fortunately this is the only difference between AJAX scripts for Internet Explorer and any other web browser which supports JavaScript.

Here is function you need to copy and paste:

function getHTTPObject()
{
    var xhr = false;
    if (window.XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try
        {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                xhr = false;
            }
        }
    }
    return xhr;
}

First AJAX script

Ok, so we have the most important function, now we can write our first AJAX script. We will need two new functions for that, first which will dynamically get content from other file, and another one which will be catching external file download status:

var request;
 
function getContent()
{
    request = getHTTPObject();
    request.onreadystatechange = sendData;
    request.open("POST", "load.html", true);
    request.send(null);
}
 
function sendData()
{
    var dC = document.getElementById("dCo");
    if(request.readyState == 4)
    {
        dC.innerHTML = request.responseText;
    }
    else if(request.readyState == 1)
    {
        dC.innerHTML = "<img src="loading.gif" alt="" /> Requesting content..."
    }
}

Let’s start with getContent ( ) and examine this code line by line. First we create new XMLHttpRequest, then assign sendData function to onreadystatechange property, so whenever reqest object state (request.readyState) will change this function will be executed. Next we open file load.html and send NO variables to it.

First line of sendData function var dC = document.getElementById (”d C o”); is a reference to html file from which these script was started, you need to create new .html file and add this code in the body section:

blank

Now when request.readyState is equal 4, it means that whole file was succesfuly loaded, and can be now displayed so we send request.responseText it to dC object, which means that whole response text will be placed between and , of course you won’t see this if you view source code.

However, if load.html is still loading then request.readyState is equal 1, we do not know how long can it take to load file so while it is loading we will display in information about this, with nice rotating gif next to text.

Putting it all together

We are almost done, but remember to include JavaScript we wrote at the beginning of this article in to section of html file, and the last part of code we need to add before tag is:

<script type="text/javascript">getContent()</script>

Of course we need it to execute AJAX script, and we start it at the end of html file, because we want to have all html tags loaded first so we can make references to them via document.getElementById. If we run scripts first then load html then scripts will not work properly in some web browsers.