Home arrow JavaScript arrow Page 2 - JavaScript Remote Scripting: Building an AJAX-based Random Code Generator
JAVASCRIPT

JavaScript Remote Scripting: Building an AJAX-based Random Code Generator


This article explains how to build a random code generator, specifically applied to a voting system. This will help you to avoid system hacks involving automated submissions.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
October 19, 2005
TABLE OF CONTENTS:
  1. · JavaScript Remote Scripting: Building an AJAX-based Random Code Generator
  2. · Protecting against automated data submission: the basics of a random data generator
  3. · Implementing the core logic of the script: defining the “statusChecker()” function
  4. · Avoiding simultaneous data submission: coding the “removeActiveNodes()” function

print this article
SEARCH DEVARTICLES

JavaScript Remote Scripting: Building an AJAX-based Random Code Generator - Protecting against automated data submission: the basics of a random data generator
(Page 2 of 4 )

Among common mechanisms used to avoid (at least partially) automated data submission within applications, random codes play a relevant role, due mainly to their inherent ease of implementation as a separate application that can be easily integrated with other Web-based programs.

In order to develop a JavaScript application capable of displaying random codes to be entered by users before they proceed to vote, first allow me to explain the driving logic of this program. Essentially, users will be confronted with a list of articles (of course this can be easily changed according to your specific needs), and each of them will display a link for giving a visitor the possibility to rate the pertinent article.

For illustrating this concept through a screenshot, the list of articles along with the corresponding links would look similar to this:

If the user clicks on the rating link, instead of being presented with a typical rating scale, a small input box will be displayed, along with a four-digit random code on top of the box. This code will be entered by the user and then submitted to the server. This in turn will compare the remitted code with the value originally calculated on the server and will perform a basic validation. As you can see, the above discussed method is quite easy to grasp, and certainly is currently implemented by many websites to make sure that at least most of the input data has been submitted by real users.

As said before, the overall voting mechanism is best understood by using a representative image. This is what it would like, when a user has decided to rate the first article:

As you can see, an input box will be built on the fly, and the appropriate four-digit random code will be displayed to the user. Notice that this random code will be actually generated on the server and then sent back to the client. Once the visitor has submitted the provided code, it will be authenticated by the system and the corresponding course of action will be determined by the logic of the server application.

By this point, I think you have a pretty clear idea of how the system will use random codes, so having explained the core logic of the program, let’s move forward and begin defining the first function “sendRequest()”, which is nearly identical to the version that you saw in my previous article belonging to this series. It looks like this:

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);
}

At first glance, the above function is very similar to previous incarnations, listed in prior examples. However, there are a few details worth noting. The first thing to point out is that the function takes two arguments instead of only one. Since each time the user clicks on a link when attempting to submit a vote, a GET http request is sent to the server, the function needs to know what file to fetch, together with the element that originated the event. In this case, the “elem” parameter represents the element within the document tree, where the user has clicked.

Now that you know how the JavaScript program makes GET requests for retrieving a random code generated on the server, you can turn your attention to the next function “stateChecker()”, which is responsible for handling the status of requests. Thus, click on the link to the next page and keep reading.


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