Home arrow JavaScript arrow Page 3 - 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 - Checking asynchronous http requests: taking a look at the "statusChecker()" function
(Page 3 of 5 )

One of the best things that AJAX offers is the ease in controlling the status of a specific request through the "onreadystatechange" event handler, which, when used in conjunction with the "readyState" and "status" object properties, allows you to track easily the progress of a request.

Based on this functionality, it's possible to define a function that checks for the progress of an active petition, in order to move program control to specific functions, once the request has been completed.

That's where the "statusChecker()" function comes in. Since the script's logic is built around this function, after the request is successfully performed and file contents have been read, it will invoke a couple of additional functions that will be reviewed briefly. Now, let's take a look at the "statusChecker()" function, which is listed below:

function stateChecker(){
    // if request is completed
    if(xmlobj.readyState==4){
        // if status == 200 display text file
        if(xmlobj.status==200){
            // create data container
            createDataContainer();
            // display data into data container
            data=xmlobj.responseText.split('|');
            displayData();
        }
        else{
            alert('Failed to get response :'+ xmlobj.statusText);
        }
    }
}

As you can see, the function above checks to see whether the request has been successfully completed, by verifying the values of "readyState" and "status" properties. After checking for a successful request, the function calls in turn to "createDataContainer()" and "displayData()" functions, which, as you'll see in a moment, create a simple <div> containing element and implement the news rotator, based on the contents read from the data file.

Of course, you'll be wondering how the contents are processed to be displayed in sequence. Notice the following line:

data=xmlobj.responseText.split('|');

In my first attempt to display file contents, I create a data file where headlines are separated from each other by a pipeline character (|). Given that, the above line stores each headline as a separated array element, by splitting the value of the "responseText" property.

Considering the file format expected by the script, a sample news file would look like this:

headline 1|headline 2|headline 3|...headline N

It's worthy noting that a news file might be easily defined as an XML file rather than troubling it with pipeline delimiters. Don't worry about this for the moment; remember that I'm providing this example as an introductory process to using more robust data containers, including XML files and database tables.

At this point, the script is able to request a given data file, and then process the data back in the client. Thus, the next thing to be done is to define the remaining functions for building a <div> container and displaying the headline rotator.


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