Moderne Webseiten werden häufig als „Onepager“ beschrieben.

Ich selbst bin kein großer Fan sogenannter Onepager. Gründe? Da gibt es viele, allerdings ist für mich der Hauptgrund = Programmieraufwand.

Mit folgendem Befehl können AJAX Anfragen an ein beliebiges Backend gesendet werden:

$.ajax({
         type: "POST",
         dataType: "json",
         url: 'https://backend.de/ajax',
         data: {
            "csrf_token" : csrf_token,
            "function"  : "add_employee_to_role"
         },
         error: function(){
            alert("Backend nicht erreichbar, bitte Seite neu laden.");
         },
         success: function(response) {
            alert("Antwort: " + response);
         }
});
return false;

Erklärung der einzelnen Zeilen:

Zeile 2: Hier kann POST oder GET verwendet werden. Der grundsätzliche Unterschied zwischen GET und POST werden wir in einem anderen Artikel diskutieren.

Zeile 3: Wir verwenden standardmäßig das JSON Format. Weitere sinnvolle Formate können sein: XML, HTML, JSONP oder Text (es gibt allerdings noch weitere die wir selten verwenden)
Achtung: Wird der DataType JSON gewählt, wird die Antwort – also der Response – in JSON erwartet. Ansonsten wird der Error-Part des JQuery Snippets ausgeführt.

Zeile 4: Die Url gibt an, wo der AJAX Befehl hin gesandt wird.

Zeile 5: Im Data Paket können nun zusätzliche Paramether an das Backend übergeben werden. Bei Übermittlung via POST können diese im Backend wie normale POST Parameter verwendet werden, in PHP beispielsweise $_POST[‚FOO‘]

Zeile 9: Der Error-Handler. Es gibt verschiedene Gründe warum dieser ausgeführt wird. Als Beispiel soll unbedingt noch genannt sein:
– Die Übermittlung findet nicht im korrekten Datenformat statt. Beispielsweise ist JSON definiert, aber es wird ein HTML Teil zurück gegeben
– Das Backend ist nicht erreichbar
– Das Backend liefert Werte, die vom AJAX Befehl nicht verstanden werden

Zeile 12: Der Success-Handler. Wenn der AJAX Befehl korrekt übermittelt wurde, wird dieser Teil ausgeführt. Dies sollte der Standardfall ihres AJAX Requests sein ,-)

Zeile 17: Um zu verhindern, dass eine Art Bubbling ausgeführt wird, beenden wir das Script  mit return false;

Ihr habt Fragen oder Verbesserungen zu diesem Artikel? Lasst es uns bitte über die Kommentare wissen.

VERWANDTE ARTIKELMEHR VOM AUTOR