Home arrow JavaScript arrow Page 2 - JavaScript Remote Scripting: An AJAX-based Random Code Generator in Action
JAVASCRIPT

JavaScript Remote Scripting: An AJAX-based Random Code Generator in Action


In this article, Alejandro Gervasio finishes his discussion of creating a random code generator. Going beyond the core functions, he defines the remaining JavaScript functions needed to turn the random code generator into a functional program.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
October 26, 2005
TABLE OF CONTENTS:
  1. · JavaScript Remote Scripting: An AJAX-based Random Code Generator in Action
  2. · Looking at existing functions: the “sendRequest()” and “stateChecker()” functions at a glance
  3. · Displaying random codes: defining the “createDataContainer()” function
  4. · Dynamic link generation: taking a look at the “createLinks()” function
  5. · Server-side processing: generating four-digit random codes with PHP
  6. · Putting the pieces together: showing the application’s complete code

print this article
SEARCH DEVARTICLES

JavaScript Remote Scripting: An AJAX-based Random Code Generator in Action - Looking at existing functions: the “sendRequest()” and “stateChecker()” functions at a glance
(Page 2 of 6 )

A natural place to continue building the code generating application is listing the relevant functions that were previously defined and explained. Keeping this idea in mind, here is the list of the first two functions, “sendRequest()” and “statusChecker()”, as I wrote them originally:

// send http request
function sendRequest(elem,file){
    // check for existing requests
    if(xmlobj!=null&&xmlobj.readyState!=0&&xmlobj.readyState!=4){
        xmlobj.abort();
    }
    try{
        // instantiate object for Mozilla, 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=function(){
        stateChecker(elem);
    }
    // open socket connection
    xmlobj.open('GET',file,true);
    // send request
    xmlobj.send(null);
}

// check request status
function stateChecker(elem){
    // if request is completed
    if(xmlobj.readyState==4){
        // if status == 200 display text file
        if(xmlobj.status==200){
            // remove active nodes
            removeActiveNodes();
            // create data container & display challenge value
            createDataContainer(elem,xmlobj.responseText);
        }
        else{
            alert('Failed to get response :'+ xmlobj.statusText);
        }
    }
}

Since the functions above were covered in detail in the previous part of the series, it’s pointless to explain the logic of each one here. For the sake of completeness, allow me to say that the first one takes care of sending GET requests in asynchronous mode, while the task of the second one consists of checking the status of each request.

Of course, by placing the functions in the context of the article-rating example that you saw in the previous part, what I’ve done is code a function that will fetch a file on the server, each time a user clicks on a link for rating a given article.  On its side, the server will generate a four-digit random code that will be sent back to the client and displayed to the user. Finally, the visitor should enter this random code, in order to access the page where he/she can actually rate the pertinent article.

As I explained before, each time a visitor tries to rate an article, an input box is created on the fly and displayed right at the bottom of the article heading section, so the four-digit random code sent by the server can be typed by the user. The entire process for creating dynamic input boxes and showing random codes is performed by the “createDataContainer()” function, which will be reviewed over the next few lines.


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