Ajax Class Script: Javascript Closures For Totally Encapsulated Multi Ajax Class

»»» shrink text ««« ««« enlarge text »»»

OBJECTIVE: create an Ajax class that would not rely on any external dependency, namely entirely encapsulated in itself without meddling with any outer scope or with the javascript prototype and with no additional subroutines to help build the Ajax instance, and not even echo handlers as additional globally defined functions.  
This documentation, meant to be a core, presumes you already know what Ajax * is and you are cognizant of the existence of Javascript Closures (also dubbed "currying") as a Javascript coding technique, although somewhat exotic or just not too widely used.  
Be sure to read the caveats section on bottom before copying or using the code.  

function Ajax(echoFunction, responseType){//version 1.1.0
this.request=null;
this.response=null;
this.callingMethod='';
this.responseType=(typeof(responseType)=='string' && responseType.toLowerCase()=='responsexml ')?
	'responseXML':'responseText';
this.echoFunction=echoFunction||null;

/********* M E T H O D *********/
this.initialize=function(){
this.response=null;
this.callingMethod='';
if(!this.request){
	if(window['(...)ttpRequest']){/*IE7, Mozillas*/ try{this.request=new (...)ttpRequest();}catch(e){this.request=null;}; }
	else if(window['ActiveXObject']){/*IE<IE7*/
	var ajaxMSversions=[
		/*'Ms(...).DOMDocument.5.0', 'Ms(...).DOMDocument.4.0', 'Ms(...).DOMDocument.3.0', 'MS(...).DOMDocument',*/ 'Ms(...).(...)TTP', 'Microsoft.(...)TTP'
	];
		for(var v=0; v<ajaxMSversions.length; v++){
			try{this.request=new ActiveXObject(ajaxMSversions[v]); return this.request;}catch(e){this.request=null;};
		}
	}
	else if(window['createRequest']){ try{this.request=window.createRequest();}catch(e){this.request=null;}; }
	else{alert(X M L not enabled. Impossible to proceed.');}
};
return this.request;
}

/********* M E T H O D *********/
this.get=this.send=function(address, query, echoFunction, responseType){
if(!address || !this.initialize()){return false;};
this.callingMethod='GET';
this.responseType=responseType||this.responseType;
query=query||'';
query=query.replace(/\?/, '');
this.request.open('GET', (address+'?'+query), true);
this.request.setRequestHeader('Content-Type', 'text/xml');
if(typeof(echoFunction)!="function"){this.request.onreadystatechange=this.echo(this);/*currying*/}
else{this.request.onreadystatechange=echoFunction;};
this.request.send(null);
}

/********* M E T H O D *********/
this.post=function(address, send, echoFunction, responseType){
if(!address || !this.initialize()){return false;};
this.callingMethod='POST';
this.responseType=responseType||this.responseType;
send=send||'';
this.request.open('POST', address, true);
this.request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
if(typeof(echoFunction)!="function"){this.request.onreadystatechange=this.echo(this);/*currying*/}
else{this.request.onreadystatechange=echoFunction;};
this.request.send(send);
}

/********* M E T H O D *********/
this.head=function(address, send, echoFunction){
if(!address || !this.initialize()){return false;};
this.callingMethod='HEAD';
send=send||'';
this.request.open('HEAD', address, true);
this.request.setRequestHeader('Content-Type', 'text/xml');
if(typeof(echoFunction)!="function"){this.request.onreadystatechange=this.echo(this);/*currying*/}
else{this.request.onreadystatechange=echoFunction;};
this.request.send((send||null));
}

/********* M E T H O D *********/
this.error=function(statusError){
if(statusError){
this.response=(this.request && this.request.status)? 'Ajax Error: '+this.request.status+': '+this.request.statusText: 'Ajax Error: Requested document may be temporarily unavailable';
alert(this.response);
return this.response;
}
else{return false;};
}

/********* M E T H O D *********/
this.echo=function(ajaxInstance){
return function(){//currying
	if(ajaxInstance.request.readyState==4 || ajaxInstance.request.readyState=='complete'){
		if(ajaxInstance.request.status==200 || ajaxInstance.request.status==100){
		ajaxInstance.response=
		(ajaxInstance.callingMethod=='GET' || ajaxInstance.callingMethod=='POST')?ajaxInstance.request[ajaxInstance.responseType]:
		(ajaxInstance.callingMethod=='HEAD')?ajaxInstance.request.getAllResponseHeaders():false;
			if(typeof(ajaxInstance.echoFunction)=="function"){
			return ajaxInstance.echoFunction(ajaxInstance.response);
			};/*no function passed as parameter: a default behaviour:*/
		return ajaxInstance.response;/*response is STORED in the instance.response property, ready for further manipulation*/
		}
		else{return ajaxInstance.error(1);};
	}
	else{return ajaxInstance.error(0);};
}//currying over
}
/*class ends - Keep this comment to reuse freely: http://www.fullposter.com/?1/ */}

Remove colors  
INPUTS: there are various options, because all the input issues mainly revolve around passing the response handler: Ajax queries a remote Database via Javascript and returns a response: such response carries the data Ajax retrieved from the remote Database, and therefore it is necessary to have also a Javascript handler for this returned data that manipulates, entirely accordingly to your specific needs, such returned data. You may think of Ajax like a Database query in between two javascripts.  
With this class there is more than one way to pass the javascript response handler:  

//passing as parameter your echo handling function:
var myajax=new Ajax( function(response){alert(response);} );
//now run ajax for instance with post (placeholder values passed):
myajax.post('myphp.php', 'id=1&foo=2&bar=3');

//or you could also do:
var myajax=new Ajax();
myayax.echoFunction=function(response){alert(response);}
//now run ajax for instance with post (placeholder values passed:
myajax.post('myphp.php', 'id=1&foo=2&bar=3');
/*echoFunction is a class property, and is case sensitive: it can host a function defined by you*/ 

Remove colors  
 
METHODS: presuming you have initialized some Ajax class like var myajax=new Ajax(); and regardless, for simplicity of explanation, of how you specified the response handler:

• myajax.get:  
  It takes arguments as follows:  
  String: the address of the server file to contact.  
  String: the appended query to the address above, without the ? mark  
  Function: an optional on the fly definition of a response handler of your own, which may take in one argument that the class shall take care to pass to it: the server response. This is just another, additional possible way to pass a response handler to this class.  
  String: optional; the behaviour defaults to get as a response a string, if you want to grab XML data (I personally would not recommend this) pass this as: 'responseXML'.
• myajax.post:  
  See arguments as for the method get. You'd mostly use post rather than get, also for several security concerns that we can't elaborate here like, for instance, also (Cross Site Scripting * ) attacks that would be greatly favoured by using Ajax get methods (and yet not defused by merely recurring to the use of post).
• myajax.head:  
  See arguments as for the method get, but it accepts only the first 2 arguments described there.

CAVEATS: In the code: it is apparent that security concerns on Full Poster may strip X M L text from inputs, so where (or in case) in the codes you see (...)ttpRequest replace with X MLHttpRequest making sure the X is close to the M, and where you see (...).DOMDocument replace with Msx ml2.DOMDocument making sure the X is close to the M, and where you see Ms(...).(...)TTP replace with Msx ml2.X MLHTTP making sure the X is close to the M, and where you see Microsoft.(...)TTP replace with Microsoft.X MLHTTP making sure the X is close to the M.  
I hope I reported these occurrences correctly and completely.  
 
Aside from this, apparently no caveat of relevance.  
Note that the code has a line that goes:

ajaxInstance.request.status==200 || ajaxInstance.request.status==100

Remove colorsNormally only the request status 200 is considered in Ajax applications, yet taking into account at least also an Http "error" 100 code accomodates nicely some Macintosh specific browsers that at times may not detect correctly what is actually a 200 code. As a matter of fact an http response code 200 flags success (so called OK), but also a response 100 does: Error 100 says The request was successful. The process can now continue so why at least this is not considered into standard Ajax applications is not clear to me (for more Http error codes: Http Error codes). I was even tempted to use: ajaxInstance.request.status<400.  
 
An additonal scarcely documented and yet very severe issue with Ajax is that, since you may use Ajax to write data onto a database and not just to read it (because writing onto a database with Ajax entails the same security issues that writing onto a database via any other avenue imports, neither less nor more), when the input data to be written via Ajax include chars such as & + % if not even question marks, these chars are treated like url components. The most dreaded consequence of this, fit to jeopardize your whole ajax application, is that any & is misunderstood like one more query item separator.  
As per the plus sign, it is misunderstood as a whitespace flag, and as for the % sign, it is misunderstood as an encoded url entity * .  
 
Textual data sent to Ajax should be encoded by you, manually, with the Javascript function encodeURIComponent: if the your database is already set to UTF-8 (recommended), no further action is required; otherwise the server side script, if PHP, has to decode the encoded part with utf8_decode, and it cannot be excluded that before printing again to the client, if this is the case, you may also have to use utf8_encode.  
 
Alternatively a workaround for this, not recommended neither elegant yet effective if you're not concerned with other chars than ASCII (say latin chars), could be to nest, into your Ajax post methods, some code that replaces all such chars instances with given replacers - with the additional issue that such replacers should be reasonably unique enough not to recur as other legitimate input text; possible example:  
 
send=send.replace(/\&/g, '#38#');  
send=send.replace(/%/g, '#37#');  
send=send.replace(/\+/g, '#43#');  
 
Then, once such data is delivered to server side scripts such as Php, the server side engine must perform the conversion of the posted values to get again & + % from all the Ajax replacements.  
However the right solution for this is using encodeURIComponent on the text sent to ajax. Unfortunately this caveat was not always well documented in the first ajax tutorials we saw online years ago.

Visitors: 13,415
Overall visits to all the topics: 4,974,899
Daily average (Calculated from the website subscription day): 2,064.27 Optional sorting commands:
Normal order: click here
Order by amount of visits: click here
Order by category: Programming Ajax
Current order: by category: Philosophy Reviews Other categories available for this author (Limited data report: 100):
Advice: Martial Arts and Self Defense(4), Books(236), Critical Reviews and Essays(4), Dictionaries(1), Emergency Care(4), Epistles Letters and Advice(5), Fantasy Epics and Fables(1), History and Documents(5), Humor and Jokes(2), Methematics(2), Music and Lyrics(6), News Digests and Press Reviews(1), Novels Poetry and Stories(3), Philosophy Reviews(7), Poetry(1), Programming(4), Programming Ajax(2), Programming Javascript(82), Programming Php(52), Psychology(1), Quotes(1), Religion Esoterica and Spirituality(12), Scientifical Reviews(4), Self Improvement(1), Sport Activities and Apparels(2), Tarots(1) Showing topics: 1, 10
Available total: 448 View only a list of the snippets by this author: click here.
Other topics available for this author: click on any title below to view the complete item: