Hallo,
ich beschäftige mich gerade mit Ajax und habe so meine Anfangsschwierigkeiten.
<html>
<head>
<script type="text/javascript">
function starteAjax(url) {
req = new XMLHttpRequest();
req.open( "GET", url, true );
req.onreadystatechange = meineCallbackFkt;
req.send( null );
}
function meineCallbackFkt() {
if( 4 == req.readyState ) {
if( 200 != req.status ) {alert( "Fehler " + req.status + ": " + req.statusText );
}else {
// ergebnis verarbeiten
// alert( req.responseText );
document.getElementById('output').innerHTML += '<h3>'+req.responseText+' </h3>';
}
}
}
</script>
</head>
<body>
<h2>Ajax-Test</h2>
<button onclick="starteAjax('test.php?q=2.Versuch');starteAjax('test.php?q=2b.Versuch');">Starte Ajax jetzt</button>
<p id="output"></p>
</body>
</html>
Ich rufe eine PHP-Seite auf, die mir die GET-Variable zurückliefert. Soweit so gut, das funktioniert.
Nun möchte ich aber, dass ein Onclick-Event das Ganze mehrmals auslöst, doch das geht anscheinend nicht so einfach. Ich vermute mal, weil der erste Aufruf noch nicht abgearbeitet wurde, bevor der 2. Aufruf erfolgt, denn als Resultat bekomme ich immer nur den letzten Aufruf, außer ich gebe durch einen alert() dem Script etwas Zeit.
Beispiel 1
<button onclick="starteAjax('test.php?q=2.Versuch');">Starte Ajax jetzt</button>
Ausgabe = 2.Versuch
// Ausgabe wie gewünscht
Beispiel 2
<button onclick="starteAjax('test.php?q=2.Versuch');starteAjax('test.php?q=2b.Versuch');">Starte Ajax jetzt</button>
Ausgabe = 2b.Versuch
// Ausgabe nicht wie gewünscht
Beispiel 3
<button onclick="starteAjax('test.php?q=2.Versuch');alert('wait');starteAjax('test.php?q=2b.Versuch');">Starte Ajax jetzt</button>
Ausgabe = 2.Versuch 2b.Versuch
// Ausgabe wie gewünscht aber leider nur durch alertpause
Was muss ich tun um Beipiel 2 ohne alert() aufzurufen aber Ausgabe Beispiel 3 zu bekommen?
Gruss
Mike