Ajax Request

modified: 2020-02-19T06:05:47+01:00

Mit der Jybrid-2020 Version kamen viele Features dazu, die das Programmiererleben leichter machen. Leider muss ich auch dazu sagen, dass Ajax-Requests mit Jybrid sehr unterschiedlich konfiguriert werden können. Jede Konfiguration hat Vor- und Nachteile.

Damit du den Einstieg leicht findest, fangen wir am besten mit den einfachen Bauweisen an. Einen Link(a href="/somewhere" ) mit Ajax senden.

Ajax hijax onclick

<a onclick="jybrid.Button(event);" href="?page=1">Ajax Page 1</a>

Kurz erklärt:

Du fügst in ein a-Tag ein "onclick" ein. Weist jybrid an, den Link mittels Ajax-Request an den Server zu senden. Während ich das Beispiel schreibe, fällt mir auf wie lange es her ist, als diese Bauweise state of the art war. Ob "onclick" oder ähnliche attribute verwendet werden sollen, ist fraglich. Was ich weiß, "onclick" funktioniert nach wie vor!

Jybrid Ajax hijax onclick

Mit dem handgeschriebenen "onclick" sind unsere Möglichkeiten begrenzt. Kommen in das "onclick" noch weitere Parameter hinzu, wird es schwierig diese weiteren Parameter von Hand zu escapen und zu quoten. In Jybrid sollen sämtliche Buttons über die Button-Class in die Html-Tags gegeben werden. Anders als der Ausdruck "Jybrid::getButton()" vermuten lässt, wir hier kein Button ausgegeben sondern ausschließlich die Jybrid-Ajax Kommandos und Ausdrücke.

?>
<!-- direct -->
<a onclick="<?php echo Jybrid::getButton() ?>" href="?page=2">Page 2</a>

<!-- or with initialization variable -->
<?php $tmpButton = Jybrid::getButton() ?>
<a onclick="<?php echo $tmpButton ?>" href="?page=2">Page 2</a>

<!-- or with full rendered onclick statement -->
<a <?php echo $tmpButton->renderOn() ?> href="?page=2">Page 2</a>

<!-- or with full rendered on"SomeEvent" statement -->
<a <?php echo $tmpButton->renderOn('anOtherEvent') ?> href="?page=2">Page 2</a>

<!-- both will become this html -->
<a onclick="jybrid.Button(event,null);" href="?page=2">Page 2</a>

Kurz erklärt:

Ajax Klick-Buttons mit Jybrid können unterschiedlich erstellt oder verwendet werden. Welche dieser Bauweisen du verwendest, bleibt dir überlassen. Ich empfehle ausdrücklich diese Button-Bauweise. Ändert sich im Laufe der Zeit der Javascript-Ausdruck "jybrid.Button(event,null);" werden die "Jybrid::getButton()" automatisch das richtige Javascript-Kommando ausgeben. Stichpunkt Backward Compatibility!

Jybrid überträgt "hijax" automatisch als GET.

Das war der erste Ausflug in Jybrid anhand eines konkreten Beispieles "hijax". Sobald ich eine freie Minute finde, werde ich zum Thema Ajax und Google einen Beitrag verfassen. Sinngemäß laut Google: „Du kannst Weblinks mit Ajax abrufen. Achte unbedingt darauf, dass die Ergebnisseite mit Ajax(hijax) denselben Content anzeigt wie eine normal abgerufene Seite.“

pro: without request-registration, request-uri will be grabbed from the href attribute cons: potentially xss affine tags:hijax,seo,google-ajax, ajax-content seo example: /docs/ajax-examples#hijax

Add Ajax Parameters

Wir bleiben am besten noch bei der hijax-Bauweise und passen den Ajax-Request ein wenig an. Konkret möchten wir ein paar Parameter dem Ajax-Request hinzufügen. Dafür verwenden wir aus dem oberen Beispiel den Jybrid-Button und erweitern diesen Button.

?>
<!-- or with initialization variable -->
<?php $tmpButton = Jybrid::getButton() ?>
<a onclick="<?php echo $tmpButton ?>" href="?page=2">Page 2</a>

und fügen einen Ajax-Request Parameter hinzu.

?>
<!-- or with initialization variable -->
<?php $tmpButton = Jybrid::getButton()->set('ajaxClicked','fromTop'); ?>
<!-- will be to -->
<a onclick="jybrid.Button(event,null,{'Params':{'ajaxClicked':'fromTop'}});" href="?page=2">Page 2 With Parameter</a>

<!-- or -->
<?php 
$tmpButton = Jybrid::getButton();
$tmpButton->set('ajaxClicked','fromTop');
 ?>
<!-- will be to -->
<a onclick="jybrid.Button(event,null,{'Params':{'ajaxClicked':'fromBottom'}});" href="?page=2">Page 2 With Parameter</a>

Fazit:

Die beschriebene Minimal-Bauweise kann immer angewendet werden.
Theoretisch und praktisch ist in der beschriebenen Bauweise noch jede Menge mehr an Funktionalitäten möglich.

Hier ein wichtiger Hinweis: <a onclick="jybrid.Button(event,null,{&quot;Params&quot;:{&quot;ajaxClicked&quot;:&quot;fromBottom&quot;}});" href="?page=2">Page 2 With Parameter</a>

Jybrid wandelt automatisch sämtliche Hochkommas(quotes/doublequotes) automatisch in deren html-Bedeutung um. Dies ist der auch der Grund aus dem ich empfehle die Jybrid-Buttons zu verwenden: Javascript-Commands im Html werden automatisch XSS-Safe erstellt!

Register Ajax Request

Was ist wenn du keinen Link aus einem Tag hijacken möchtest? Wie sieht es aus wenn du eigene Request-Urls verwenden möchtest. Oder Formulare mit Ajax übermitteln?

Send Ajax Request

Receive Ajax Request

Jybrid::isJybridRequest(); // bool Jybrid::getRequestName() // null|string Jybrid::getRequestUUID() //

Response Ajax Request

---- todo --- old stuff

Hier geht es detailiert darum wie du einen Ajax-Request von der Webseite aus gegen den Server vorbereitest.

Minimal Ajax-Request

Jybrid bereitet mit Hilfe von PHP spätere mögliche Ajax-Requests vor. Dies geschieht beim initial-page-load. Die einfachste Bauweise um einen Ajax-Request vorzubereiten ist die folgende Zeile:

Minimal Button Ajax-Request

Im ersten Beispiel wurde in der Ajax-Request-Registrierung der frei wählbare Bezeichner anCoolUniqueName registriert und im a-Tag der selbe Bezeichner erneut von Hand eingetragen. Für ein Beispiel mag das sicherlich in Ordnung sein, für einfachere Anwendungen auch. Nur, solltest du den Bezeichner bei der Registrierung von Hand ändern, darfst du nicht vergessen jybrid.Exe('myNewCoolName');diesen Ausdruck auch zu ändern.

Das erste Beispiel bleibt bis auf die folgenden Änderungen genauso bestehen:

Get Ajax Request-Object

Falls die Registrierung des Ajax-Requests weit weit weg in einer anderen Datei ist und du die $myRequestObject nicht durch das ganze System mitschleifen magst kannst du jederzeit auf ein bereits registrierte Request-Object zurück greifen.

Fazit

Damit haben wir auf ganz einfach Weise eine komplette automatischeClickRoute mit Ajax erstellt. Kein Javascript-Variablen Puzzle. Vielleicht noch einmal kurz zusammen gefasst.

  • Jybrid initialisieren
  • Ajax-Request mit php registrieren
  • Echo im Html-Code vom registrierten Ajax-Request

So einfach kann ajax sein ;-)