JQuery – Einfach AJAX Befehle an das Backend senden

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.