nicht angemeldet
XMLHttpREQUEST mehrmals durch onklick
JürgenBHallo,
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
-
Hallo Mike,
function starteAjax(url) {
req = new XMLHttpRequest();
req ist eine globale Variable,die bei jeden Aufruf überschrieben wird. Setz da mal ein "var" vor, dann ist es eine lokale Variable in "starteAjax".
Gruß, Jürgen
-
Hallo Jürgen,
req ist eine globale Variable,die bei jeden Aufruf überschrieben wird. Setz da mal ein "var" vor, dann ist es eine lokale Variable in "starteAjax".
danke für die schnelle Antwort, aber wenn ich die Variable lokal nutze tut sich gar nichts mehr, = keine Ausgabe.
-
-
Hallo!
function starteAjax(url) {
req = new XMLHttpRequest();
Da verwendest hier eine globale Variable (wie JürgenB sagt). Du überschreibst sie beim zweiten Request. Dadurch greift dein readystatechange-Handler nicht auf das korrekte XMLHttpRequest-Objekt zu (er greift zweimal auf dasselbe zu).
Das liegt an der Asychronität. Erst wird starteAjax zweimal aufgerufen, dann nach einiger Zeit meineCallbackFkt zweimal.
Zwei Möglichkeiten:
1. Funktionen verschachteln, sodass die innere Funktion eine Closure ist, die die Variablen der äußeren Funktion konserviert:
var starteAjax = function(url) { // Lokale Variable (Funktionsvariable) var req = new XMLHttpRequest(); req.onreadystatechange = function() { // Zugriff auf req // req.readyState usw. // req ist hier immer das korrekte Objekt }; req.send(); };2. Du kannst im Handler alternativ über »this« auf das XMLHttpRequest-Objekt zugreifen:
var starteAjax = function(url) { var req = new XMLHttpRequest(); req.onreadystatechange = meineCallbackFkt; }; var meineCallbackFkt = function() { // Zugriff auf this // this.readyState usw. };Mathias
-
Hallo,
- Du kannst im Handler alternativ über »this« auf das XMLHttpRequest-Objekt zugreifen:
perfekt, danke.
function meineCallbackFkt() { if( 4 == this.readyState ) { if( 200 != this.status ) {alert( "Fehler " + this.status + ": " + this.statusText ); }else { // ergebnis verarbeiten // alert( req.responseText ); document.getElementById('output').innerHTML += '<h3>'+this.responseText'</h3>'; }
-