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
			thisInstance.httpRequest.open('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();
}

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.";
	}
}
This entry was posted in Javascript and tagged , , , , , , . Bookmark the permalink.