TomRed.net

Note: In this tutorial I am simply covering the front-end processing of the request and the response.  This tutorial is simply treating the server as black box and so not covering what is happening to generate the response on the serverside.

open()

So you have created the response now we must populate the request object and send this request.  We will firstly initialise the object using open().  The first step is to define our target. then pass it into the open function. Below we will set the request type to GET so we can pass the parameters in the URL. In the second parameter we enter the target URL we defined which is the URL where the response will come from. In third parameter is to define whether the request is asynchronous or synchronous. asynchronous is true and synchronous is false. Asynchronous is preferred as this hides the time required for the process to complete, synchronous requests would suspend all other processing while waiting for the response(which is not ideal).  The last line of code defines what to do on a state change.  In this case we tell it to call the processRequest().

var target = "http://www.tomred.net/index.php?option=com_rd_rss&id=3";
ajaxObj.open("GET", target, true);
ajaxObj.onreadystatechange = function() {ajaxObj.processRequest();}

send()

After the request object has been defined we can then send the object (if using the GET request type).  To do this you simply call the following:

ajaxObj.send(null);

In the case of using the POST request type to send form elements for example you have a little more to do.  We must set the request header then set the form as the request body.  Once you have accomplished this you pass the request body to the send() method.

ajaxObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var myform = document.forms[0];
var reqBody = getRequestBody(myform);
ajaxObj.send(reqBody);

The Response

We now return to the state information we covered in Step 1.  Since we are using an asynchronous request we will use the state to decide when to process the response.  Below I show how to check for the state, we are looking for state 4.  This state means that the response has been received.  This does not mean that it was received with out error but it does mean that it is finished.  In the code below we also check to make sure that there was no error before we begin processing the response.

ajaxObj.processRequest = function() {
	if (this.readyState == 4) {
		if (this.status != 200) {
			/*
			useful for debugging but not advisable in live application 
			possibly a retry may be better here which would restart the process.
			*/
			alert('Error : Status '+this.status+' returned.');
		} else {
			// do something with the response
		}
	}
} 

Put it all together

function createAjaxObj(){
	if(typeof XMLHttpRequest != 'undefined'){
		return new XMLHttpRequest();

	}else if(typeof(window.ActiveXObject) != 'undefined'){
		var versions = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"];
		for (var i = verions.length -1; i >= 0; i--) {
			try{
				actXObj = new ActiveXObject(versions[i]);
				return actXObj;
			}catch(e){
				//incorrect XmlHttp type
			}
		}

	}else{
		try{
			typeof(window.createRequest() != 'undefined')
			return window.createRequest()
		}catch(E){
			throw new Error('AJAX is not supported');
		}
	}
}

//create the object
var ajaxObj = createAjaxObj();

var target = "http://www.tomred.net/index.php?option=com_rd_rss&id=3";
ajaxObj.open("GET", target, true);
ajaxObj.onreadystatechange = function() {ajaxObj.processRequest();}

ajaxObj.send(null);
ajaxObj.processRequest = function() {
	if (this.readyState == 4) {
		if (this.status != 200) {
			/*
			useful for debugging but not advisable in live application 
			possibly a retry may be better here which would restart the process.
			*/
			alert('Error : Status '+this.status+' returned.');
		} else {
			// do something with the response
		}
	}
}

It this article I have outlined how to create the request object, initialise it, send the request and to retrieve the response or deal with the error.  If there is anything that you think I have omitted or you think should be clearer leave a comment and I try to sort it out.