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.
Next: Implementing the core logic of the script: defining the “statusChecker()” function >>
More JavaScript Articles
More By Alejandro Gervasio
/ 14 
