JavaScript Remote Scripting: Fetching Server Data with the DOM

So far, I’ve defined the functions responsible for fetching files from the server, together with a basic XML parser. Since all the XML nodes now reside in JavaScript arrays, it’s extremely easy to write a couple of functions that process and display the data. Bearing this concept in mind, I’ll code a simple function that creates a <div> containing element, handy for using as a headline wrapper. Given that, here’s the code for the “createDataContainer()” function:

function createDataContainer(){
    var div=document.getElementById('container');
    if(div){return};
    var div=document.createElement('div');
    div.setAttribute('id','container');
    document.getElementsByTagName('body')[0].appendChild(div);
}

If you’ve read my previous article belonging to this tutorial series, the above function should be pretty familiar to you. Essentially it performs the same operation, by creating a <div> element and appending it to the document tree. This set of tags will behave as a simple wrapping structure for displaying the headlines.

Now that you’ve seen how a data container is inserted within the document structure, the next thing to do is define another function, focused primarily on displaying the headlines in question. Below is the list of the “displayData()” function, tasked with showing the parsed XML nodes:

function displayData(){
    // reset data container
    document.getElementById('container').innerHTML='';
    var ul=document.createElement('ul');
    document.getElementById('container').appendChild(ul);
    for(var i=0;i<URL.length;i++){
        // create links
        var li=document.createElement('li');
        var a=document.createElement('a');
        // assign 'href' attribute
        a.setAttribute('href',URL[i]);
        // add link labels
        a.appendChild(document.createTextNode(TITLE[i]));
        li.appendChild(a);
        ul.appendChild(li);
    }
    // remove <script> node
    var js=document.getElementsByTagName('script')[0];
    js.parentNode.removeChild(js);
    // reset array values
    URL=null;
    TITLE=null;
    // update headlines each 1 hour
    setTimeout("sendRequest('news.xml')",3600*1000);
}

Studying the function depicted above, there are some points worth mentioning. First, headlines are displayed within an (X)HTML list of links, where each of them points to the corresponding URL. Since the values of <title> and <url> nodes were stored in their respective arrays, the following lines:

a.setAttribute('href',URL[i]);
a.appendChild(document.createTextNode(TITLE[i]));

build the appropriate links, by assigning the values of the URL array to the "href" property, as well as generating the labels with the elements of the TITLE array. After creating the links, they’re appended to the document, like this:

li.appendChild(a);
ul.appendChild(li);

The rest of the function code is quite straightforward. Since I want the headlines to be updated at a specific time interval, I simply remove the <script> node previously created and reset both the URL and TITLE arrays. Finally, in order to implement a way for automatically updating the headlines, the “sendRequest()” function is wrapped up into a “setTimeout()” method:

setTimeout("sendRequest('news.xml')",3600*1000);

Of course, this last addition can be easily modified in case you don’t want to have a JavaScript timer running silently within your application.

Having demonstrated how XML files are parsed and displayed by using only standard DOM methods, the next step consists of listing the complete source code for the script, so you can study it and introduce your own modifications.