Jump to content

Calling PHP from Javascript with AJAX.

Recommended Posts

So I have been studying this code and I have read a bit about the callback function:

	xmlHttp.onreadystatechange = function()	{		if(xmlHttp.readyState == 4)		{			HandleResponse(xmlHttp.responseText);		}	}

is asynchronous although I'm not fully sure exactly what that means to me at this point. Essentially I am starting with a page bars.php:

<!DOCTYPE html><html><head><title>Daily Sports Guide Bars</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"><style>#map { width: 80%; height: 500px; border: 1px solid #000; margin-left: 10%; }</style><script type="text/javascript" src="js/ajax.js"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script>(function() {		window.onload = function() {			var responseText = MakeRequest();		alert(responseText);				// Creating a reference to the mapDiv		var mapDiv = document.getElementById('map'); 		// Creating a latLng for the center of the map		var latlng = new google.maps.LatLng(37.09, -95.71); 		// Creating an object literal containing the properties		// we want to pass to the map  		var options = {		center: latlng,		zoom: 4,		mapTypeId: google.maps.MapTypeId.ROADMAP		}; 		// Creating the map		var map = new google.maps.Map(mapDiv, options);	}})();</script></head><body><div id="wrapper"><?php require('includes/i_header.php'); ?><div style='margin: 0px; padding: 0px; text-align: center;'><img height="100" width="413" src="image/underconstruction.gif"></div><div id="map"></div><?php require('includes/i_footer.php'); ?></div></body></html>

So I guess the first thing would be to also list the contents of my ajax.js:

function getXMLHttp(){  var xmlHttp   try  {	//Firefox, Opera 8.0+, Safari	xmlHttp = new XMLHttpRequest();  }  catch(e)  {	//Internet Explorer	try	{	  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");	}	catch(e)	{	  try	  {		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");	  }	  catch(e)	  {		alert("Your browser does not support AJAX!")		return false;	  }	}  }  return xmlHttp;} function MakeRequest(){	var xmlHttp = getXMLHttp();		xmlHttp.onreadystatechange = function()	{		if(xmlHttp.readyState == 4)		{			HandleResponse(xmlHttp.responseText);		}	} 	xmlHttp.open("GET", "ajax.php", true);	xmlHttp.send(null);		return xmlHttp.responseText;} function HandleResponse(response){  alert(response);}

I am not sure at all of my design here but my intent would be (in bars.php that is):

var responseText = MakeRequest();alert(responseText);

in this case to get MakeRequest to return into 'responseText' the value in ajax.php which is:

<?phpecho "This is a php response to your request!!!!!!";?>

So maybe it just is not the right design or maybe I just can't make this work because I don't really understand the internals of it all yet. I do get the first alert from HandleResponse however what I can't figure out is how to get that data back into my mapping area. How should this be done? Thanks so much. As always any help from the forums is most welcome. :Pleased:

Edited by sepoto
Link to post
Share on other sites

If you want your MakeRequest() function to return the response text from ajax, the ajax request would need to be synchronous.That is, ajax's send() method would pause javascript execution until the ajax request is completed, and then it could return the response text.But pausing javascript's execution isn't ideal, it's much better to use an asynchronous request. You're currently using an asynchronous request (3rd argument to open() is true), but the responseText property in this code will not have been set yet:

return xmlHttp.responseText

It's common to send a function to the function which creates the ajax request, and when the ajax request is complete it simply calls the function sent to it.eg.

MakeRequest(function(xmlHttp) {  alert(xmlHttp.responseText);});


function MakeRequest(callback) {var xmlHttp = getXMLHttp(); xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState == 4){callback(xmlHttp);}} xmlHttp.open("GET", "ajax.php", true);xmlHttp.send(null);}

  • Like 1
Link to post
Share on other sites

I really like this one also. The jQuery library needs to be added:

 $.ajax({ url: 'ajax.php',data: { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng(), radius: radius },type: 'post',success: function(output) { alert(output); }});

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...