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

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.