Home arrow JavaScript arrow Page 4 - JavaScript Remote Scripting: Reading Data From the Server
JAVASCRIPT

JavaScript Remote Scripting: Reading Data From the Server


Client-server interaction achieved without involving page reloads has become very popular for Web services. This can be handled in a variety of ways. This article covers several of them, starting with Asynchronous JavaScript and XML (AJAX).

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 39
September 21, 2005
TABLE OF CONTENTS:
  1. · JavaScript Remote Scripting: Reading Data From the Server
  2. · A non-standard approximation: reading server data with AJAX
  3. · Checking asynchronous http requests: taking a look at the "statusChecker()" function
  4. · Displaying file contents: defining the "createDataContainer()" and "displayData()" functions
  5. · Reusing the source code: listing the full script

print this article
SEARCH DEVARTICLES

JavaScript Remote Scripting: Reading Data From the Server - Displaying file contents: defining the "createDataContainer()" and "displayData()" functions
(Page 4 of 5 )

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.


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