JavaScript Remote Scripting: Reading Data From the Server

As I said in the introduction of the article, the first client-based remote scripting method that I'll explain, in order to retrieve data from the server, is AJAX. The starting point to illustrate the functionality of this approach for making http requests will be developing an extensible JavaScript application, which fetches data from a text file and builds a simple news rotator.

Since the script is flexible enough, at the end of the example you'll be able to modify the source code to extend its functionality for working directly with database tables.

Before I start writing down the relevant functions that integrate the application, I'd like to go over a few basic requirements of which you should be aware. Since the script will implement XMLHttpRequest objects, I'll use exceptions to handle the pertinent browser incompatibilities and instantiate cross-browser objects, thus a basic knowledge of "try-catch" block combinations will be required.

Having said that, the first function to be written, tasked with sending http requests for a given file, is "sendRequest()" and looks like this:

function sendRequest(doc){
    // check for existing requests
    if(xmlobj!=null&&xmlobj.readyState!=0&&xmlobj.readyState!=4){
        xmlobj.abort();
    }
    try{
        // instantiate object for Firefox, Nestcape, etc.
        xmlobj=new XMLHttpRequest();
    }
    catch(e){
        try{
            // instantiate object for Internet Explorer
            xmlobj=new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e){
            // Ajax is not supported by the browser
            xmlobj=null;
            return false;
        }
    }
    // assign state handler
    xmlobj.onreadystatechange=stateChecker;
    // open socket connection
    xmlobj.open('GET',doc,true);
    // send request
    xmlobj.send(null);
}

Now that the above function has been defined, let's spend a few minutes discussing its corresponding logic.

Stripped down to its bare bones, the "sendRequest()" function performs two clearly delineated tasks. The first one consists of instantiating an XMLHttpRequest object, by wrapping the lines responsible for object creation into a couple of "try" blocks. As I said previously, cross-browser object instantiation is handled by native JavaScript exceptions, so the "try-catch" block combination takes care of creating the appropriate objects in all the possible cases.

On top of the function's code I included a checking line to verify whether there are existing connections. As a result, whenever the function is called, any existing requests will be cancelled by using the abort() method. This might seem like a trivial task, but checking code is required to handle the limitations imposed by JavaScript http requests, since they allow you to work with only one object at a time.

By returning to the tasks performed by the function, once the appropriate object has been created, the "stateChecker()" function is assigned to the "onreadystatechange" event handler. Then, a socket connection is opened for performing a GET request, in order to retrieve the contents of the file passed in as an argument to the function. Finally, the request is sent out by using the send() method.

Now that you know how the "sendRequest()" function does its thing, first by creating cross-browser XMLHttpRequest objects, and second by making GET requests to retrieve the contents of a given file, it's time to have a look at the next function, "statusChecker()", which is tasked with verifying the status of the current request.