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.