Home arrow JavaScript arrow Page 2 - 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 - A non-standard approximation: reading server data with AJAX
(Page 2 of 5 )

As I said in the introduction of the article, the first client-based remote scripting method that I'll explain, in order to retrieve data from the server, is AJAX. The starting point to illustrate the functionality of this approach for making http requests will be developing an extensible JavaScript application, which fetches data from a text file and builds a simple news rotator.

Since the script is flexible enough, at the end of the example you'll be able to modify the source code to extend its functionality for working directly with database tables.

Before I start writing down the relevant functions that integrate the application, I'd like to go over a few basic requirements of which you should be aware. Since the script will implement XMLHttpRequest objects, I'll use exceptions to handle the pertinent browser incompatibilities and instantiate cross-browser objects, thus a basic knowledge of "try-catch" block combinations will be required.

Having said that, the first function to be written, tasked with sending http requests for a given file, is "sendRequest()" and looks like this:

function sendRequest(doc){
    // check for existing requests
    if(xmlobj!=null&&xmlobj.readyState!=0&&xmlobj.readyState!=4){
        xmlobj.abort();
    }
    try{
        // instantiate object for Firefox, Nestcape, etc.
        xmlobj=new XMLHttpRequest();
    }
    catch(e){
        try{
            // instantiate object for Internet Explorer
            xmlobj=new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e){
            // Ajax is not supported by the browser
            xmlobj=null;
            return false;
        }
    }
    // assign state handler
    xmlobj.onreadystatechange=stateChecker;
    // open socket connection
    xmlobj.open('GET',doc,true);
    // send request
    xmlobj.send(null);
}

Now that the above function has been defined, let's spend a few minutes discussing its corresponding logic.

Stripped down to its bare bones, the "sendRequest()" function performs two clearly delineated tasks. The first one consists of instantiating an XMLHttpRequest object, by wrapping the lines responsible for object creation into a couple of "try" blocks. As I said previously, cross-browser object instantiation is handled by native JavaScript exceptions, so the "try-catch" block combination takes care of creating the appropriate objects in all the possible cases.

On top of the function's code I included a checking line to verify whether there are existing connections. As a result, whenever the function is called, any existing requests will be cancelled by using the abort() method. This might seem like a trivial task, but checking code is required to handle the limitations imposed by JavaScript http requests, since they allow you to work with only one object at a time.

By returning to the tasks performed by the function, once the appropriate object has been created, the "stateChecker()" function is assigned to the "onreadystatechange" event handler. Then, a socket connection is opened for performing a GET request, in order to retrieve the contents of the file passed in as an argument to the function. Finally, the request is sent out by using the send() method.

Now that you know how the "sendRequest()" function does its thing, first by creating cross-browser XMLHttpRequest objects, and second by making GET requests to retrieve the contents of a given file, it's time to have a look at the next function, "statusChecker()", which is tasked with verifying the status of the current request.


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