Javascript Ajax: Simple Copy & Paste Ajax Post Get Implementation For Beginners

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

OBJECTIVE: given the many times we see a wrong ajax implemented by beginners, provide a simple but working ajax implementation.  
Yet it is assumed it is known what ajax * is at least.

function ajaxFunction(url, myfunction, post){//1.0.1
var anAjaxRequest=null;
	var workaround='x'+'m'+'l';/*for copy & paste purposes: some servers are wary of x m l strings*/
try{anAjaxRequest=new window[workaround.toUpperCase()+'HttpRequest']();}catch(e){
	try{anAjaxRequest=new ActiveXObject("Ms"+workaround+"2."+workaround.toUpperCase()+"HTTP");}catch(e){
		try{anAjaxRequest=new ActiveXObject("Microsoft."+workaround.toUpperCase()+"HTTP");}catch(e){
		alert("Ajax not supported");
		return null;
		}
	}
}
anAjaxRequest.onreadystatechange=function(){
if( (anAjaxRequest.readyState==4 || anAjaxRequest.readyState=='complete') && (anAjaxRequest.status==200 || anAjaxRequest.status==100)){
return (myfunction)?myfunction(anAjaxRequest.responseText):anAjaxRequest.responseText;
}
}
anAjaxRequest.open((post)?"POST":"GET", url, true);
anAjaxRequest.setRequestHeader('Content-Type', (post)?'application/x-www-form-urlencoded':'text/'+workaround);
/*allow encodeURIComponent*/
	if(post && typeof post=='string'){
		if(post.indexOf('&')!==false && post.indexOf('=')!==false){/*allow encodeURIComponent*/
		post=post.split('&');
			for(var p=0; p<post.length; p++){
			post[p]=post[p].substring(0, post[p].indexOf('='))+'='+encodeURIComponent( post[p].substring(post[p].indexOf('=')+1) );
			}
		post=post.join('&');
		}
		else if(post.indexOf('=')!==false){post=post.substring(0, post.indexOf('='))+'='+encodeURIComponent( post.substring(post[p].indexOf('=')+1) );};
	};
/*allowed encodeURIComponent*/
anAjaxRequest.send(post||null);
return false;
/*keep this comment to reuse freely
http://www.fullposter.com/?1*/}

Remove colors  
INPUTS: first a string representing the address of the php that you want to address.  
 
Then the javascript function of your own making meant to handle the ajax response (that is, the response is the echo of the queried php: for your php must provide an eventual echo), and it must be passed without arguments or parenthesis: namely only the function name (and not as a string namely not in between apexes of any sort); if you have no such function (which anyway would make your ajax basically pointless) you may bypass this using the keyword null.  
 
Last argument an optional string: if passed it is assumed the request method is POST and in such case it must be a string already arranged in pairs of keys and values connected by the sign =, each pair separated by the other by an ampersand sign &  
Provided this argument format, the function takes care of applying encodeURIComponent by itself.  
 
RETURNS: boolean false or null if ajax appears not supported by the client browser. Its onreadystatechange returns what your response handler function returns, or if no such function is provided it returns a string representing the php echo.  
 
Caveats: the script uses a minor workaround for picky servers that may prevent using the string 'x m l' too liberally.  
In case of passed last parameter the method is mandatory: post and not get. This is a mere implementation choice being post slightly more secure than get.  
 
The ampersand sign (&) should be present in the string to post only as separator of the key/values tuples. In case your values already contain ampersands not in the role of separators, you should rebuild the last argument to pass to the function taking care of applying yourself encodeURIComponent to its values - and eventually, in such case, you must remove from this function the part that applies encodeURIComponent, currently easily identified by comments sorrounding it beginning and end.  
This fundamentally means that even as simple a function as the following one could work, unless you stumble into the nefarious encodeURIComponent issues which sooner or later is likely if not even bound to happen (thence, I am posting this shorter version only to prove how easy it can be to have a working ajax, though far from bullet proof):

function ajaxFunction(url, myfunction, post){//1.0.1shorter
var anAjaxRequest=null; var workaround='x'+'m'+'l';/*for copy & paste purposes: some servers are wary of x m l strings*/
try{anAjaxRequest=new window[workaround.toUpperCase()+'HttpRequest']();}catch(e){
	try{anAjaxRequest=new ActiveXObject("Ms"+workaround+"2."+workaround.toUpperCase()+"HTTP");}catch(e){
		try{anAjaxRequest=new ActiveXObject("Microsoft."+workaround.toUpperCase()+"HTTP");}catch(e){
		alert("Ajax not supported");
		return null;
		}
	}
}
anAjaxRequest.onreadystatechange=function(){
if( (anAjaxRequest.readyState==4 || anAjaxRequest.readyState=='complete') && (anAjaxRequest.status==200 || anAjaxRequest.status==100)){
return (myfunction)?myfunction(anAjaxRequest.responseText):anAjaxRequest.responseText;
}
}
anAjaxRequest.open((post)?"POST":"GET", url, true);
anAjaxRequest.setRequestHeader('Content-Type', (post)?'application/x-www-form-urlencoded':'text/'+workaround);
anAjaxRequest.send(post||null);
return false;
/*keep this comment to reuse freely
http://www.fullposter.com/?1*/}

Remove colors  
 
Your php must be as follows:

<?php
print $_POST['boh2'];
?>

Remove colors  
 
Provided your php stays in the same directory you call ajax from, and its name is foo.php, this is an example of use:  

<script>
//include your ajax function here, then:

function myCustomFunction(phpEcho){
alert(phpEcho);/*or anything else handling phpEcho*/
}

ajaxFunction("foo.php", myCustomFunction, 'boh=hallo&boh2=hαλλo2');
</script>

Remove colors

Visitors: 11,351
Overall visits to all the topics: 4,980,618
Daily average (Calculated from the website subscription day): 2,064.93 Optional sorting commands:
Normal order: click here
Order by amount of visits: click here
Order by category: Programming Ajax
Current order: by category: Methematics 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: