Door
Leander ---
op 19-04-2011 22:06
gewijzigd op 19-04-2011 22:09
2.531 views
Hallo,
Ik heb even een vraag met betrekking tot het ophalen van gegevens van een php bestand door middel van AJAX. Die gegevens worden vervolgens (in de meeste gevallen) in een div gezet. Ik wil dat dus niet, maar wil het gebruiken in een Google Maps Javascript code. Helaas lukt het me niet om variabelen te setten (of returnen, op welke manier dan ook).
Het gaat om de volgende code:
<script>
function loadXML() {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function initialize() {
location = loadXML();
// Hier wil ik de variabele geo gebruiken.
}
</script>
Ik heb al enige idee waarom dit sowieso niet gaat lukken ivm met het volgende stukje code: xmlhttp.onreadystatechange=function() Hij returned dus eigenlijk de geo locatie naar die onreadystatechange die er toch niks mee kan doen. Weet misschien iemand een manier hoe ik die variabele in de functie initialize krijg?
xmlhttprequest werkt normaal gesproken asynchroon, onreadystatechange wordt pas aangeroepen wanneer loadXML al lang klaar is. Dus of je maakt het zo dat send() blokkeert totdat er een antwoord is (en onreadystatechange met readyState == 4 is aangeroepen) maar dan blokkeert je hele pagina totdat er een antwoord is. Niet erg prettig.
Of je maakt een callback, iets a la:
function loadXML(method, url, onsuccess)
{
var xmlhttp;
var xmlhttp = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
onsuccess(xmlhttp.responseText);
}
xmlhttp.open(method, url, true);
xmlhttp.send();
}
function initialize()
{
loadXML("GET", "http://example.com/app/test/ajax_php.php", function(location) {
// nu heb je hier de variabele location welke het antwoord bevat.
});
}
Aangezien ik nog een vraag heb mbt tot dit onderwerp, zet ik die ook maar even in dit topic.
Mijn AJAX/Javascript werkt namelijk op elk device (iPhone, Desktop etc) behalve op Android toestellen. Het gaat om het volgende:
function loadXML(method, url, onsuccess)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
alert("1");
if (xmlhttp.readyState == 2 && xmlhttp.status == 200) {
alert("laden 2");
}
if (xmlhttp.readyState == 3 && xmlhttp.status == 200) {
alert("laden 3");
}
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert("Laden 4");
onsuccess(xmlhttp.responseText);
}
}
xmlhttp.open(method, url, true);
xmlhttp.send(null);
}
function initialize() {
loadXML("GET", "http://example.com/ajax_php.php", function(location) {
var geolocation = location.split(",");
var latitude = Number(geolocation[0]);
var longitude = Number(geolocation[1]);
var latlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: 16,
center: latlng,
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Jouw locatie!"
});
});
Alert 1 wordt wel uitgevoerd terwijl 'Laden 2/3/4' niet worden uitgevoerd op mijn Android toestel. Dit is wel weer het geval bij desktop en iPhone. Weet iemand waar dit aan kan liggen?
Ik gebruik ook jQuery Mobile ;) Maar dit is AJAX icm Google Maps API (volgens mij schiet jQuery Mobile daar weinig mee op?).
Voor de rest heb ik de fout ook kunnen traceren door heel simpel de xmlhttp.readystate te alerten en te kijken op m'n Android device of dat werkte. Het werkte inderdaad want ik kreeg 2 alerts (met '1' en met '4'). Oftewel die xmlhttp.readystate werkte wel.
Door vervolgens de xmlhttp.status te alerten, kreeg ik '0' als alert. Dit is typerend, aangezien Firefox hier gewoon 200 terug geeft. Door het vervolgens te wijzigen naar (xmlhttp.readyState == 4) lukt het wel en krijg ik dus ipv een grijze achtergrond, nu ook werkelijk een kaart te zien. Natuurlijk is dit het probleem omzeilen op een 'dirty' manier.
Helaas werkt het nu nog niet naar behoren, aangezien nu de variabele location niet geset is. Volgens mij kan Android niet omgaan met een callback? (want nu neemt hij de locatie 0, 0. Wat resulteert midden in de oceaan).
