JavaScript Remote Scripting: Reading Data From the Server

Considering that the JavaScript program now is able to make http requests and retrieve some headlines from a text file, the processes for appending a <div> containing element and displaying data are performed by the appropriate "createDataContainer()" and "displayData()" functions. They're listed below:

function createDataContainer(){
    var div=document.createElement('div');
    div.setAttribute('id','container');
    if(div.style){
        div.style.width='500px';
        div.style.height='45px';
        div.style.padding='5px';
        div.style.border='1px solid #00f';
        div.style.font='bold 11px Tahoma,Arial';
        div.style.backgroundColor='#eee';
        document.getElementsByTagName('body')[0].appendChild
(div);
    }
}

function displayData(){
    if(i==data.length){i=0};
    document.getElementById('container').innerHTML=data[i];
    i++;
    setTimeout('displayData()',20*1000);
}

Now that you know how the functions above look, allow me to explain what they do. Following the list order, the first function creates a <div> element, then sets up some attributes, such as ID and style, and finally appends the element to the document tree.

The second function simply implements a JavaScript timer for displaying headlines at a given time interval (in this case I've specified an interval of 20 seconds). Due to the extreme easiness of the program code, let's get rid of the boring details and get the script to work, by first defining a sample file for displaying headlines and then running the whole program when the page is loaded.

In order to show some headlines, here is how the sample "technews.txt" file looks:

The async parameter specifies whether the request should be performed asynchronously or not. True means that script continues to run after the send() method, without waiting for a response from the server.|False means that the script waits for a response before continuing program execution. By setting this parameter to False, there is the risk of having the program hang if there is a network or server problem.|Or if the request is too long a user may think that the browser is not responding. In most cases, it is safer to make request asynchronously and design the logic of the script based on the onreadystatechange event.

As you can see, I've used a pipeline delimiter for splitting headlines, so they will be displayed in sequence. Now, having defined the source file, the script will be called after the page has finished loading, passing in the name of the file as argument, like this:

window.onload=function(){
    // check if browser is DOM compatible
    if(document.getElementById &&
       document.getElementsByTagName &&
       document.createElement){
        // load data file
        sendRequest('technews.txt');
    }
}

By using this technique, it's possible to build more complex applications that pull out server data, either from database tables or from flat files, all without having to reload the page. Of course, the script may be improved in many different ways, such as reading data directly from XML files or even wrapping up the "sendRequest()" function into a timer for automated requests. Once you understand how to work with remote scripting, there is plenty of room for developing numerous applications.

Over the next section of the article, I'll provide you with all the program code written above, so you can copy and paste the whole script for quick inclusion within your own applications.