✔ Ajax Funktion Rückgabewert

[Jan-Frederik Stieler]

Hi,
ich versuche eine Funktion zu schreiben welche ich für verschieden Links nutzen kann um deren Ziel per Ajax zu laden.
Nun möchte ich aber die Rückgabe der Funktion erst nach dem Aisführen dieser verarbeiten. Nun dachte ich ich schreibe ein return in den onreadystatechange. Aber irgendwie geht das nicht.
Wie kann ich den das Ergebnis des Funktion als Rückgabewert bekommen?
Oder muss ich die asynchrone Abfrage in eine synchrone Abfrage umwandeln damit das geht?

function ajaxLoad(data, container, callbackID) {
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState < 4) {
            container.innerHTML = '<div class="alert alert-info">' + loadingString + '</div>';
        }
        else {
            if (this.status === 200) {
                var xhttpCallback = JSON.parse(xhttp.response);
                console.log(xhttpCallback);

                return xhttpCallback;
            } else {
                console.error('ajaxLoad hat n Problem: ' + this.statusText);
            }
        }
    };

   xhttp.open('POST', data);
   xhttp.send();
}

 

[Sempervivum]

Dies ist ein relativ häufiges Problem und die Erklärung ist, dass das return auf die anonyme Funktion wirkt, die beim onreadystatechange notiert wurde und nicht auf die äußere, hier ajaxLoad. In den meisten Fällen dürfte es praktikabel sein, eine Callbackfunktion an ajaxLoad zu übergeben und auszuführen, wenn die Antwort vom Server da ist:

function ajaxLoad(data, container, callbackFunction) {
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState < 4) {
            container.innerHTML = '<div class="alert alert-info">' + loadingString + '</div>';
        }
        else {
            if (this.status === 200) {
                var xhttpResponse = JSON.parse(xhttp.response);
                console.log(xhttpResponse);
                callbackFunction(xhttpResponse);
            } else {
                console.error('ajaxLoad hat n Problem: ' + this.statusText);
            }
        }
    };

   xhttp.open('POST', data);
   xhttp.send();
}
ajaxLoad(theData, theContainer, function(response) {
    // hier alle Aktionen, die die Daten vom Server benutzen.
})

 

[Jan-Frederik Stieler]

Hallo,
Vielen Dank für Deine super Erklärung!
Hat funktioniert.

Viele Grüße