Javascript & HTML: Async Communication Prototype

In this article I go over an asynchronous communication prototype I had made in straight Javascript that you use to POST to a server script and pass along the response to a Javascript function specified by the initial call to the prototype. The main benefit here is that you don’t need a full page refresh, which is great for implementing web interfaces that have an application feel to them. It doesn’t use any bulky libraries and should work on all browsers. An ideal use case for this would be websites hosted in an internal network that you wanted to act like an application. Though, with extensive modification you could add security features or just run it through https with proper verification code in the PHP script.

The example code is located on GitHub.

In my example I have four files:
example.html = the html page that gives the user two buttons that fire off asynchronous calls to a server side script.
AsyncManager.js = The prototype (aka. class) that handles communication and response. It also updates a div element with status information.
asyncreceiver.php = The server side script written in PHP that handles two example requests from our AsyncManager.js. In this case it sends back a timestamp or random number in a requested range.
example.js = The client page script that starts the request and handles the final response from the two example requests.

Here is the AsyncManager.js:

function AsyncManager(htmlStatusElement, onCompleteFunction, serverPostScript, sendDataPairs) { this.htmlStatusElement = htmlStatusElement; this.onCompleteFunction = onCompleteFunction || function () { }; var thisInstance = this; //save a reference to this instance for callback this.serverPostScript = serverPostScript; this.sendDataPairs = sendDataPairs; /* this handles updating the status element */ this.statusIndicator = function(statusText) { //make sure an element reference was returned before trying to set properties if(this.htmlStatusElement != null && this.htmlStatusElement != "") { document.getElementById(this.htmlStatusElement).innerHTML = statusText; } } /* creates an instance of XMLHttpRequest independent of the browser type */ this.returnNewXMLhttpRequestObject = function() { var xhrObject = null; //see what type of browser is being used if(window.XMLHttpRequest) { //non MS browsers xhrObject = new XMLHttpRequest(); try { xhrObject.overrideMimeType('text/xml'); } catch (error) { } } else if(window.ActiveXObject) { try { //some versions of IE need special access //first attempt to use the newer object xhrObject = new ActiveXObject('Msxml2.XMLHTTP'); } catch (error) { //newer version isn't available, try older try { //if the newer object doesn't exist, use the older one xhrObject = new ActiveXObject('Microsoft.XMLHTTP'); } catch (error) { //this IE browser is too old to work, notify the user thisInstance.statusIndicator('Your version of IE is too old.'); } } } return xhrObject; } /* send data to a server using the attached xml http request object */ this.sendData = function() { var constructedPostString = ''; var sendDataLength = this.sendDataPairs.length; thisInstance.httpRequest = this.returnNewXMLhttpRequestObject(); //make sure an instance was returned before doing anything else if(thisInstance.httpRequest != null) { //assign the event handler so we can know how return data should be processed //if the caller wants to use a custom event handler, let them thisInstance.httpRequest.onreadystatechange = function() { //the response from the server is complete, continue processing if(thisInstance.httpRequest.readyState == 4) { //everything is good, the response is received if (thisInstance.httpRequest.status == 200) { //call the function the instance creater defined and pass the resulting xml thisInstance.onCompleteFunction(thisInstance.httpRequest.responseXML.documentElement); thisInstance.statusIndicator(''); //the object is no longer needed, so allow it to be destroyed thisInstance.httpRequest = null; } else { //there was a problem with the request, //for example the response may be a 404 (Not Found) //or 500 (Internal Server Error) response codes thisInstance.statusIndicator('There is an issue connecting to the server...'); } } else { //still not ready, indicate that to the user thisInstance.statusIndicator('Loading...'); } } } else { this.statusIndicator('There was an issue connecting to the server...'); } //make sure the connection instance exists before trying to send data if(thisInstance.httpRequest != null) { //open the connection so we can stream post data to a page'POST', serverPostScript, true); thisInstance.httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //make sure the array holds enough values to process it if(sendDataLength > 1) { //loop through the array by two (name of post variable + related post data, ...) for(var i = 0; i < sendDataLength - 2; i += 2) { constructedPostString += this.sendDataPairs[i] + '=' + escape(this.sendDataPairs[i + 1]) + '&'; } constructedPostString += this.sendDataPairs[sendDataLength - 2] + '=' + escape(this.sendDataPairs[sendDataLength - 1]); } //send the data to the script page for processing thisInstance.httpRequest.send(constructedPostString); } } //now that the instance is initialized, perform the send/receieve function this.sendData(); }
Code language: JavaScript (javascript)

Here are a pair of functions from example.js that call and receive from AsyncManager:

//a function to test async capability of our AsyncManager prototype function getAsyncTimestamp() { //define our request to the server script var postDataArray = new Array(2); postDataArray[0] = 'action'; postDataArray[1] = 'get-timestamp'; //get the needed information new AsyncManager('statusdiv', getAsyncTimestamp_callback, 'asyncreceiver.php', postDataArray); } function getAsyncTimestamp_callback(xmlDataReturned) { //called once getAsyncTimestamp() gets a response back from the script //extract the expected response tag if(xmlDataReturned != null) { var returnedValue = xmlDataReturned.getElementsByTagName('responsedata')[0].childNodes[0].nodeValue; if(returnedValue != null) { document.getElementById('divtimestampresult').innerHTML = returnedValue; } } else { document.getElementById('statusdiv').innerHTML = "There was an issue with the response."; } }
Code language: JavaScript (javascript)