Ajax Library

[Mordent 0]

While I've only really recently started dabbling in AJAX as a way of generally making my site more "friendly", I was originally put off of it quite a bit by having to go through the tedious process of using the same pieces of code again and again to perform the same tasks (namely creating an XMLHttpRequest/ActiveXObject object and going through the request code), so I sat down and made myself a pair of functions that have proved pretty useful in my first few attempts at getting AJAX used in a meaningful way. As I'm currently undertaking a new project I dug up the functions again and wondered if anyone else would be able to make use of them. Feel free to use them as you see fit, none of this copyright malarky is necessary.

function ajaxConnect ()  {	  var ajaxRequest;	  try	  {		  /* Opera 8.0+, Firefox, Safari */		  ajaxRequest = new XMLHttpRequest ();	  }	  catch ( e )	  {		  /* IE */		  try		  {			  ajaxRequest = new ActiveXObject ( "Msxml2.XMLHTTP" );		  }		  catch ( e )		  {			  try			  {				  ajaxRequest = new ActiveXObject ( "Microsoft.XMLHTTP" );			  }			  catch ( e )			  {				  /* AJAX not supported */				  ajaxRequest = false;			  }		  }	  }	  return ajaxRequest;  }    function ajaxPost ( ajaxRequest, url, varName, varVal, stateChangeFunc )  {	  var postSuccess = false;	  /* check varName and varVal are arrays */	  if ( isArray ( varName ) == true && isArray ( varVal ) == true )	  {		  /* check length of varName and varVal are the same */		  if ( varName.length == varVal.length )		  {			  /* check stateChangeFunc is a function */			  if ( typeof stateChangeFunc == "function" )			  {				  /* build varString from arrays varName and varVal */				  var varString = "";				  var varLength = varName.length;				  var i = 0;				  for ( i = 0; i < varLength; i++ )				  {					  if ( i > 0 )					  {						  varString += "&"					  }					  varString += varName[i] + "=" + varVal[i];				  }				  ajaxRequest.open ( "POST", url, true );				  ajaxRequest.setRequestHeader ( "content-type", "application/x-www-form-urlencoded" );				  ajaxRequest.setRequestHeader ( "content-length", varString.length );				  ajaxRequest.onreadystatechange = stateChangeFunc;				  ajaxRequest.send ( varString );				  postSuccess = true;			  }		  }	  }	  return postSuccess;  }

I'll confess that they lack the initial comment to explain what they do, particularly ajaxPost, but I'll leave going through them as an exercise for anyone caring to learn a bit about AJAX. Any comments/questions on the code are welcome, particularly if you've any suggestions as to how to improve it.
Edited July 20, 2009 by Mordent (see edit history)

[sonesay 7]

I remember trying to learn Ajax in the beginning and came across the manual method of creating a new XMLHttpRequest and all the following required steps to complete the request but I found this task tedious and sometimes limited when I wanted to make more complicated requests. I have gone off to just using libraries such as JQuery and Ext since they provide objects that handle most common Ajax calls. It seems to reduce a lot of code you write when using these library calls not to mention you have access to other functions in the library. I am curious what the code would look like when put in use. i.e a working example of the use of function. Maybe that will help other users visualize the functions in practice.

[Mordent 0]

I am curious what the code would look like when put in use. i.e a working example of the use of function. Maybe that will help other users visualize the functions in practice.

Essentially the functions simply save you typing out the same thing over and over. An example would be as below:

function displayText ( textBlock ) {	 var ajaxRequest = ajaxConnect ();	 function getText ()	 {		 if ( ajaxRequest.readyState == 4 )		 {			 document.getElementById("textDiv").innerHTML   = ajaxRequest.responseText;		 }	 }	 ajaxPost ( ajaxRequest, "updateText.php", ["textBlock"], [textBlock], getText ) }

Which could, for instance, be used as a simplistic means of altering the text inside of a div element based on the variable "textBlock" passed to it. Note that the variable name and value need to within an array, which also allows for limitless variables to be passed by simply adding them to the end of the array. Edited October 24, 2009 by Mordent (see edit history)