Home arrow JavaScript arrow Page 4 - JavaScript Remote Scripting: Fetching Server Data with the DOM
JAVASCRIPT

JavaScript Remote Scripting: Fetching Server Data with the DOM


This article provides you with a handy method for making JavaScript-based requests to the server and serving XML documents, all without the need to use AJAX technology. If you’re inclined to work very close to W3C standards, this is an approach worth considering, since it allows the implementation of Web services through a cross-domain integration.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 11
October 12, 2005
TABLE OF CONTENTS:
  1. · JavaScript Remote Scripting: Fetching Server Data with the DOM
  2. · One step toward standardization: making http requests with the DOM
  3. · Setting up the server response: parsing XML in the server
  4. · Displaying XML data: defining the “createDataContainer()” and “displayData()” functions
  5. · Putting the pieces together: showing the complete script

print this article
SEARCH DEVARTICLES

JavaScript Remote Scripting: Fetching Server Data with the DOM - Displaying XML data: defining the “createDataContainer()” and “displayData()” functions
(Page 4 of 5 )

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials