Learning AJAX From the Ground Up

new Object({ ben:"is cool", molly:"is sexy", arnold:"is the man!" });

this.OnLoad(
	eval( responseText )
	);

// This is the base class for the ajax HttpConnection object.
function HttpConnectionClass( strUrl ){
	// The url for the connection.
	this.Url = strUrl;

	// The parameters to send (the data).
	this.Parameters = new Object();

	// The connection object.
	this.Connection = this.CreateConnectionObject();

	// This handles the data load (completion) function.
	this.OnLoad = null;

	// Return This pointer.
	return( this );
}


// This builds the connection object.
HttpConnectionClass.prototype.CreateConnectionObject = function(){

	// Try to create the generic connection.
	try {

		this.Connection = new XMLHttpRequest();

	} catch ( errTryMicrosoft ){

		// Try the MS xml object.
		try {

			this.Connection = new ActiveXObject( "Msxml2.XMLHTTP" );

		} catch ( errTryOtherMicrosoft ){

			// Try secondary Microsoft method.
			try {

				this.Connection = new ActiveXObject( "Microsoft.XMLHTTP" );

			} catch ( errFailed ){

				// None of the connection objects were created. Be sure
				// to se the connection object back to null for later
				// reference.
				this.Connection = null;

			}
		}
	}


	// Check to see if the object is null. If so, alert the user that
	// it will not work.
	if (!this.Connection){
		alert( "Your browser cannot create XmlHttpRequests.\nPlease use a browser that was developed in the 21st century." );
	}

	// Return the connection object.
	return( this.Connection );
}


// This handles changes in the state of communication. Javascript is an
// interpreted language and therefore can be created and evaluated on
// the fly. Here, you can pass in a flag to tell the load handler to try
// and return an evaluation of the result or to just return the raw data.
// This system default to evaluation, however if the evaluation ever
// fails, the raw data is returned.
HttpConnectionClass.prototype.ReadyStateChangeHandler = function( blnEvaluateResponse ){
	var strResponseText = null;

	// Check to see if we are finished.
	if (this.Connection.readyState == 4){

		// Trim the response text.
		strResponseText = this.Connection.responseText.replace( new RegExp( "^[\\s]+|[\\s]+$", "g"), "" );

		// Check to see if we need to evaluate the response. If not,
		// then just send the the raw data.
		if ( blnEvaluateResponse ){

			// We are going to try and evaluate the returned data since
			// we are expecting some sort of javascript object. No matter
			// what happens, we will be sending the connection object as
			// a second argument so that the handler can check status
			// and raw data.
			try {

				// We are going to try to evaluate the returned data to see if
				// it is a javascript data object.
				this.OnLoad(
					eval( strResponseText ),
					this.Connection
					);

			} catch ( errBadDataEvaluation ){

				// The data was not meant to be evaluated, so try to
				// return the raw string.
				this.OnLoad(
					strResponseText,
					this.Connection
					);

			}

		} else {

			// The data was not meant to be evaluated, so return the
			// raw string.
			this.OnLoad(
				strResponseText,
				this.Connection
				);

		}

	}

	// Return out.
	return;
}


// Send the data through the connection. When you send the data, you
// have the option to tell the load handler to try and evaluate the
// return data. By default the load handler will try to evaluate the
// result. You can also send a flag as to whether you want to clear
// the parameters after the data send. By default the parameters will
// be cleared post-send.
HttpConnectionClass.prototype.Send = function( blnEvaluateResponse, blnClearParameters ){
	var objSelf = this;
	var strData = "";
	var strKey = null;
	var blnEvaluateResponse = (blnEvaluateResponse == null) ? true : false ;
	var blnClearParameters = (blnClearParameters == null) ? true : false ;

	// NOTE: objSelf
	// We set of a seemingly add variable (objSelf) here to point to
	// (this). We do this for variable-binding. We are going to create
	// a function that will be called after this function is called.
	// In that function, we will need to refer to variables in the THIS
	// scope. However, "this" is a scope that will mean something
	// completely different in the function to be called at a later date.
	// To get around this, we create the variable objSelf, which we can
	// then use to create local variable bindings to this function even
	// when the variables are referenced in the future function.

	// Check to make sure we have a connection.
	if (this.Connection){

		// Open the connection.
		this.Connection.open(
			"POST",      // Method of data delivery.
			this.Url,      // The Url we are posting to.
			true      // Perform this async.
			);

		// Set the ready state handler only if we have a connection
		// and Load Handler. If we do not have a load handler, then
		// no need to check the ready state.
		if (this.OnLoad){
			this.Connection.onreadystatechange = function(){ objSelf.ReadyStateChangeHandler( blnEvaluateResponse ); };
		}

		// Set the content type to be a form post. This is needed since
		// we are sending the data via a form post.
		this.Connection.setRequestHeader(
			"content-type",
			"application/x-www-form-urlencoded"
			);

		// Create the data string. Loop over all the value parameters
		// that were set.
		for (strKey in this.Parameters){

			// Add the name/value pair. Escape values.
			strData = (strData + strKey + "=" + escape( this.Parameters[ strKey ] ) + "&");

		}

		// Strip any extra "&" that were appended to the string and
		// send the data.
		this.Connection.send(
			strData.replace( new RegExp( "&$", "g" ), "" )
			);

	}

	// Check to see if we should clear the parameters post-send.
	if ( blnClearParameters ){
		this.Parameters = new Object();
	}

	// Return out.
	return;
}


// Sets the url that the data is sent to.
HttpConnectionClass.prototype.SetUrl = function( strUrl ){
	this.Url = strUrl;

	// Return out.
	return;
}


// This sets a data in key-value pairs.
HttpConnectionClass.prototype.SetValue = function( strName, strValue ){
	this.Parameters[ strName ] = strValue;

	// Return out.
	return;
}

// Create the connection object.
var objRequest = new HttpConnectionClass( "ajax.cfm" );

// Set a variable.
objRequest.SetValue( "ben_nadel", "is wicked cool" );

// Set the data handler.
objRequest.OnLoad = fnDataHandler;

// Send the data.
objRequest.Send();