AJAX variabele setten
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");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
geo = xmlhttp.responseText;
return geo;
}
}
xmlhttp.open("GET","http://xxxx.nl/app/test/ajax_php.php", true);
xmlhttp.send();
}
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?
Alvast bedankt!
Gewijzigd op 19/04/2011 22:09:57 door Leander ---
Of je maakt een callback, iets a la:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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.
});
}
{
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.
});
}
Gewijzigd op 20/04/2011 00:20:19 door Jelmer -
Bedankt, het werkt!
Mijn AJAX/Javascript werkt namelijk op elk device (iPhone, Desktop etc) behalve op Android toestellen. Het gaat om het volgende:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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!"
});
});
{
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?
Als je meerdere browsers/devices wilt, kun je wellicht beter overstappen naar jQuery Mobile.
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).
Gewijzigd op 22/04/2011 15:05:38 door Leander ---
Dat Android (en nu ook iPhone) xmlhttp.status als 0 terug geeft ipv 200?
Zelfs als ik het volgende doe:
Code (php)
1
2
3
4
2
3
4
f (xmlhttp.readyState == 4 /* && xmlhttp.status == 200 */) {
alert("a");
onsuccess(xmlhttp.responseText);
}
alert("a");
onsuccess(xmlhttp.responseText);
}
laat hij wel alle elementen zien, maar zijn de latitude/longitude 0.
Gewijzigd op 26/04/2011 11:52:21 door Leander ---
Gewijzigd op 26/04/2011 11:56:11 door Jelmer -
Niks.. In Firefox heeft ie wel een waarde, maar op Android en iPhone niet.