JavaScript Ajax läuft grundsätzlich erst beim 2. Aufruf

[CitroenDsVier]

Hallo zusammen,

ich habe folgendes Codefragment, um Werte von einem Server abzufragen:

var getGPIO = function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if(this.readyState == 4 && this.status == 200) {
            values = this.responseText;
        }
    };
    xmlhttp.open("GET", "get.php", true);
    xmlhttp.send();
    $("#output").html("values: " + values);
}

$(document).ready(getGPIO);

Doch beim Laden der Seite (= erster Aufruf) meckert er immer, values sei nicht definiert (Zeile 10). Erst beim zweiten Aufruf der Methode läuft das Ganze wie es soll.

Woran kann das liegen?

MfG

 

[pmkrefeld]

Das könnte daran liegen dass sie nicht gesetzt wurden

'onreadystatechange' ist eine callback funktion, wenn der state aber nicht auf ready gesetzt wird bevor Zeile 10 ausgeführt wird sind die values halt nicht gesetzt.

 

[umask007]

Der HTTP Aufruf läuft asynchron. Die Antwort kommt erst später zurück, deshalb läuft es beim ersten Mal nicht.

if(this.readyState == 4 && this.status == 200) {
            values = this.responseText;
            $("#output").html("values: " + values);
        }

So sollte es gehen.

 

[blablub1212]

Viele Funktionen in JavaScript laufen asynchron. Für dein Vorhaben solltest du dich mit Promises etc. beschäftigen. Das ist nie verkehrt ... oder gleich auf async und await gehen: https://scotch.io/tutorials/asynchronous-javascript-using-async-await

 

[Defender1st]

Wo das Problem liegt wurde ja schon gesagt - Frage aber meinerseits:

Wenn du schon jquery nutzt, warum dann den AJAX Aufruf nicht auch mit jquery machen?

 

[CitroenDsVier]

Vielen Dank @All, auf die Lösung von @umask007 hätte ich selbst kommen können...

Danke auch für die restlichen Hinweise, die werd ich mir mal anschauen. Genauso wie ich Ajax mit jQuery abfrage, interessante Frage, weshalb ich das nicht mache. Habe es immer so gemacht und daher nie angezweifelt...