Programmatic GET Requests with JavaScript: Simple Way to Hack Your Site

Essentially, the logic of the program is divided in two main functions. The first function that I’ll show in a moment, makes asynchronous GET requests to an specific URL, while the second display the object’s status after the request has been successfully completed. Also, a third function is used to create instances of the XMLHttpRequest object.

Here is the first function, called “getXMLHTTPObject()”, which is defined as follows:

// function getXMLHTTPObject
function getXMLHTTPObject(){
    //instantiate new XMLHTTP object
    var objhttp=(window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
    if(!objhttp){return};
    // assign event handler
    objhttp.onreadystatechange=displayStatus;
    return objhttp;
}

As you can see, this function simple returns a new XMLHttpRequest object each time it’s called, and assigns to the “onreadtstatechange” event handler, the other relevant function “displayStatus()”. Notice that in case of working with “Firefox”, or “Nestcape”, the object is instantiated as a new XMLHttpRequest(), while for Internet Explorer, the object is created via an ActiveX Control.

As I mentioned previously, here is the core function “sendRequest()”, for making requests to the server:

function sendRequest(url,data,method,header){
    // get XMLHTTP object
    objhttp=getXMLHTTPObject();
    // set default values
    if(!url){url='default_url.htm'};
    if(!data){data='defaultdata=defaultvalue'};
    if(!method){method='get'};
    if(!header){header='Content-Type:text/html; charset=iso-8859-1'};
    // open socket connection in asynchronous mode
    objhttp.open(method,url,true);
    // send header
    objhttp.setRequestHeader(header.split(':')[0],header.split(':')[1]);
    // send data
    objhttp.send(data);
    // return xmlhttp object
    return objhttp;
}

In simple terms, the above function sends a GET request to the URL passed as an argument, along with the additional data that might be included into the request, as well as the http header. If no values are specified, default values are assigned for each parameter.

Once a XMLHttpRequest object is instantiated, the function opens a connection to the given URL in asynchronous mode, which means that the script won’t wait for the server response and build the http header in the form name/value pair, to be passed to the “setRequestHeader()” method.

Finally, the “send()” method is called, in this way completing the http request.

Now, it’s time define the other core function “displayStatus()”, that looks like this:

// function displayStatus
function displayStatus(){
    if(objhttp.readyState==4){
        // create paragraph elements
        var parStat=document.createElement('p');
        var parText=document.createElement('p');
        var parResp=document.createElement('p');
        // assign ID attributes
        parStat.id='status';
        parText.id='text';
        parResp.id='response';
        // append text nodes
        parStat.appendChild(document.createTextNode('Status : '+objhttp.status));
        parText.appendChild(document.createTextNode('Status text : '+objhttp.statusText));
        parResp.appendChild(document.createTextNode('Document code : '+objhttp.responseText));
        // insert <p> elements into document tree
        document.body.appendChild(parStat);
        document.body.appendChild(parText);
        document.body.appendChild(parResp);
    }
}

What this functions does basically is to verify the status of the object. If the request has been successfully completed (readyState==4), then three <p> elements are dynamically created and appended to the document tree. Notice that each paragraph will display the values corresponding to each XMLHttpRequest object’s property, useful for tracking the overall request process.

With all the three functions already defined, I can move on for writing a functional example, so keep on reading.