sepoto Posted August 18, 2012 Share Posted August 18, 2012 (edited) 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. Edited August 18, 2012 by sepoto Link to comment Share on other sites More sharing options...
JamesB Posted August 18, 2012 Share Posted August 18, 2012 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);}); and function MakeRequest(callback) {var xmlHttp = getXMLHttp(); xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState == 4){callback(xmlHttp);}} xmlHttp.open("GET", "ajax.php", true);xmlHttp.send(null);} 1 Link to comment Share on other sites More sharing options...
sepoto Posted August 19, 2012 Author Share Posted August 19, 2012 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now