In diesem Beitrag geht es um das Thema AJAX in QUIQQER.
Dieser Beitrag ist als Tutorial für Entwickler geschrieben.
Ajax = Asynchronous JavaScript And XML
Gerade für Anfänger oder Neulinge kann das ganze Thema etwas verwirrend sein.
Dann kommt noch ein Framework dazu und die Verwirrung ist groß. Damit das nicht passiert, erkläre ich einmal wie du dein ersten Ajax Request (Anfrage) in QUIQQER umsetzen kannst und wie die grundlegende Kommunikation funktioniert.
Kurz zu Ajax
AJAX wird dafür verwendet, Inhalte zu holen oder zu ändern, ohne dass der Benutzer die Seite neu laden muss.
Die Technik ist schwer verständlich wenn Server und Client dasselbe ist.
Damit du Ajax verstehen kannst oder auch Fehler besser erkennst, ist das eine ziemlich schlechte Kombination.
Um das Ganze zu vereinfachen, stell dir nun folgendes vor:
Wenn du http:\\localhost in deinem Browser aufrufst, liegt dein QUIQQER System eben nicht mehr auf deinem Rechner / Laptop, sondern irgendwo in einem Rechenzentrum in Hamburg auch wenn es gerade nicht der Fall ist.
Auch wenn dies nur ein Gedankenspiel ist und nicht deinem jetzigen Aufbau entspricht, dadurch ist das AJAX Handling um einiges einfacher nachvollziehbar.
QUIQQER nimmt dir nun einiges von der Kommunikation ab. Das wichtigste an der ganzen Sache ist: QUIQQER stellt eine AJAX Schnittstelle am Server (PHP) und im Browser/Client (JavaScript) bereit.
Einfacher ausgedrückt: QUIQQER stellt dir im Browser und auf dem Server jeweils eine AJAX Schnittstelle zur Verfügung. Wenn du diese verwendest, ist Ajax in QUIQQER kein Problem mehr. Das einzige was du tun musst ist, dem einen sagen was er senden soll und dem anderen sagen was ausgeführt werden darf.
Aus Sicherheitstechnischen Gründen ist per AJAX nicht alles erlaubt und daher ist eine gewisse Vorgehensweise vorgegeben. Damit dein PHP Code per AJAX auf dem Server ausgeführt werden kann musst du folgendes tun.
- Deine PHP Funktion beim PHP AJAX Handler registrieren
- Per JavaScript im Browser / Client die PHP Funktion aufrufen
- Deiner AJAX-Funktion Parameter zuweisen
-
Zusätzlich erlaubt dir QUIQQER:
Permissions für deine AJAX Funktion verwenden
(Diesen Teil werde ich gesondert beschreiben, da Permissions ein größeres Thema ist. Permissions erlauben es, Funktionen oder Funktionalität nur bestimmten Benutzern zugänglich zu machen.)
Gehen wir nun alle Schritte einmal nacheinander durch und erstellen unsere erste AJAX-Funktion.
Deine PHP-Funktion beim PHP AJAX Handler registrieren
Damit über JavaScript dein PHP Code ausgeführt werden kann, muss dieser in eine Funktion gepackt werden und bei dem AJAX Handler registriert werden. Wichtig ist: dein Funktionsname ist auch abhängig von der Ordnerstruktur und Dateinamen.
Es ist daher zu empfehlen, all deine AJAX-Funktionen in einen ajax Ordner zu legen.
Wenn du nun eine Datei helloworld.php anlegst, wäre dein AJAX Funktionsname package_NAME_DEINES_MODULS_ajax_helloworld. D.h. wenn dein Paket quiqqer/test heißen würde, wäre der obige Funktionsname package_quiqqer_test_ajax_helloworld.
Schau dir nun einmal die helloworld.php etwas näher an.
Wie du sehen kannst, existiert in QUIQQER eine QUI::getAjax() Methode. Über diese Methode erhältst du den globalen AJAX Handler, bei dem du deine Funktion registrierst. Ab jetzt kannst du über JavaScript diese Funktion aufrufen.
Damit du in JavaScript ein Ergebnis erhälst, muss die Funktion natürlich einen Wert zurückgeben.
Per JavaScript im Browser / Client die PHP Funktion aufrufen
Wenn du das erledigt hast, geht es an den Client Teil. Du rufst also per JavaScript (im Browser) deine PHP-Funktion (auf dem Server) auf. Wie oben schon geschrieben besitzt QUIQQER auch hier eine einfache API.
Kurz gesagt funktioniert das ganze so:
- Du holst per requirejs den AJAX JavaScript Client
- Und mit diesem machst du nun eine Anfrage an den Server.
Beispiel Konsolen Ausführung:
Wie du siehst, wird im AJAX Handler deine neue AJAX Funktion direkt aufgerufen und per callback Funktion erhältst du den Rückgabewert, welcher vorher in der PHP-Funktion festgelegt wurde.
So einfach der Code auch aussieht, so kompliziert ist die Technik. Der QUIQQER AJAX Client läuft nur asynchron, d.h. während die Anfrage an den Server gemacht wird, läuft das Rendering und die JavaScript Ausführung weiter.
Der Ablauf wäre also:
- Als erstes stellt der AJAX Client eine Anfrage im Hintergrund an den Server und wartet bis eine Antwort kommt.
- Wenn der Server eine Antwort zurückgibt, wird die definierte callback Funktion ausgeführt und das Ergebnis an diese weitergegeben.
Als ersten Schritt ist das Ganze schon recht nützlich, jedoch um einen richtigen Service schreiben zu können benötigt es natürlich noch einiges mehr. Im Moment besitzt deine AJAX-Funktion noch keine Parameter, d.h. Benutzereingaben oder Änderungen kannst du so noch nicht an PHP weitergeben.
Parameter einer AJAX Funktion zuweisen
Damit der PHP-Funktion auch Parameter über JavaScript übergeben werden können, müssen diese dem AJAX Handler mitgeteilt werden. Das Ganze ist recht einfach und schnell umgesetzt.
Dazu erweiterst du deine PHP-Funktion auf folgende Weise:
Der dritte Parameter der Registrierung im AJAX Handler gibt also genau an, welche Parameter es für deine AJAX Funktion gibt und wie genau diese heißen. Deine Funktion muss dann natürlich auch die Parameter besitzen.
In deinem JavaScript Aufruf kannst du deine gewünschten Parameter als JavaScript Objekt mitgeben.
Beachte bitte den ‘package’ Parameter. Dieser Parameter gibt an, in welchem QUIQQER Paket deine Ajax PHP Funktion zu finden ist. Um die Fehlersuche zu vereinfachen solltest du während deiner Entwicklung immer die error Logs im Auge behalten. Alle Logs findest du immer var/log Ordner von QUIQQER.
Wenn all das getan ist steht deine Kommunikation zwischen Client und Server und du kannst nun Daten senden und empfangen.
GET und POST
In QUIQQER nutzen wir GET und POST folgendermaßen:
GET Aufrufe holen Daten vom Server und POST Aufrufe senden oder ändern Daten auf dem Server. Ich bitte darum, dies ein wenig zu beachten, denn das macht das Debuggen und Finden von Fehlern um einiges schneller und einfacher.
Kommunikation im Überblick
Die AJAX Kommunikation hast du nun kennengelernt. Zum besseren Verständnis hier noch einmal die grundlegende AJAX Kommunikation von QUIQQER:
- Anfrage vom Browser (grün)
- Antwort vom Server (orange)
- Registrierung der Ajax Funktion PHP-seitig
Falls du noch Fragen hast oder Hilfe brauchst kannst du gerne einmal in unserer Community vorbeischauen. Wir freuen uns auf dich.