xtc und AJAX, ein Traumpaar!

[gswkaiser]

AJAX ist ein Akronym f?r die Wortfolge Asynchronous Javascript And XML.

Es bezeichnet ein Konzept der Daten?bertragung zwischen einem Server und dem Browser, welches es erm?glicht, dass die HTML-Seite nicht mit jeder HTTP-Protokoll-Anfrage komplett neu geladen werden muss. Das eigentliche Novum besteht in der Tatsache, dass nur gewisse Teile einer HTML-Seite sukzessive bei Bedarf nachgeladen werden.

AJAX ist derzeit das "Hot-Topic" in der Web-Entwicklung.
(Weitere Info dazu z.B. ?ber http://de.wikipedia.org/wiki/Ajax_(Programmierung) .)

Nach einigen ?berlegungen zum Thema bin ich dann zu dem Ergebnis gekommen, dass die notwendigen ?nderungen in xtc, dank des "Smarty"-Template-Konzepts, erstaunlich moderat sein w?rden, und habe das mal implemetiert (mit xtc Version 2).
(Mit osCommerce z.B. h?tte ich dieses Konzept nie verfolgen k?nnen, da damit, wegen der ?berall verstreuten HTML-Generierung, ein enormer Aufwand verbunden gewesen w?re. Ein Hoch auf "Smarty"! Daher funktioniert das Konzept auch nur im User-Bereich, nicht im Admin-Bereich, da der noch sehr "osCommerce"-ig ist.)

Der mit der AJAX-Technik ?bertragene Text sollte die folgenden 10 Abschnitte enthalten:
(Das sind m.E. alle Bereiche, die sich bei jeder Verarbeitung ?ndern k?nnen. Alle anderen Bereiche sind mehr oder weniger statisch!)
(Die Bereichs-Namen m?ssen den in den Templates verwendeten "Smarty"-Namen f?r die Inhalte entsprechen.)

Name --> Seiten-Bereich
================================================== =================================
navtrail --> Inhalt des oberen Navigationsbereichs
box_CATEGORIES --> Inhalt des Kategorienbereichs (Kategorien-Box)
box_WHATSNEW --> Inhalt des Neuigkeitenbereichs (Neuigkeiten-Box)
box_REVIEWS --> Inhalt des Bewertungenbereichs (Bewertungen-Box)
main_content --> Inhalt des mittleren Anzeigbereichs
box_CART --> Inhalt des Warenkorbs (Warenkorb-Box)
box_LOGIN --> Inhalt des Login-Bereichs (Login-Box)
box_ADMIN --> Inhalt des Admin-Bereichs (Admin-Box)
box_NOTIFICATIONS --> Inhalt des Benachrichtigungen-Bereichs (Benachrichtigungen-Box)
box_TELL_FRIEND --> Inhalt des Empfehlen-Bereichs (Empfehlen-Box) (Wenn ?berhaupt verwendet.)

Um AJAX-f?hig zu sein, muss die "index.html" des Templates so modifiziert werden, dass die zuvor genannten Bereiche f?r Javascript identifizierbar sind, da man mit der AJAX-Technik ja erreichen will, m?glichst kleine Bereiche auszutauschen.

Das erreicht man dadurch, dass diese Bereiche in identifizierbare HTML-Elemente plaziert werden, diese m?ssen also einen Namen ("ID") erhalten.

"{main_content}" ist i.d.R. schon in einen "TD"-Tag eingeschlossen, so dass darin nur der der Bereichs-ID (ID="Name") zu setzen ist.
("<TD ID="main_content" ....>")

Die restlichen Elemente ("{$box_xxxxx}" und "{$navtrail}") m?ssen in einen "SPAN"-Tag eingeschlossen werden:

{$Name} wird so zu <SPAN Id="Name">{$Name}</SPAN>.

Beispiele:

Navigation und Main-Content

<span id="navtrail">{$navtrail}</span>
<td id="main_content" class="tableBody" align="left" valign="top" width="61%">{$main_content}</td>

Linke Spalte

<span id="box_CATEGORIES">{$box_CATEGORIES}</span>
<span id="box_SEARCH">{$box_SEARCH}</span>
<span id="box_ADD_QUICKIE">{$box_ADD_QUICKIE}</span>
<span id="box_INFORMATION">{$box_INFORMATION}</span>
<span id="box_WHATSNEW">{$box_WHATSNEW}</span>
<span id="box_AFFILIATE">{$box_AFFILIATE}</span>
<span id="box_CONTENT">{$box_CONTENT}</span>
<span id="box_REVIEWS">{$box_REVIEWS}</span>
<span id="box_INFORMATION">{$box_INFORMATION}</span>
<span id="box_SPECIALS">{$box_SPECIALS}</span>

Rechte Spalte

<span id="box_CART">{$box_CART}</span>
<span id="box_LOGIN">{$box_LOGIN}</span>
<span id="box_INFOBOX">{$box_INFOBOX}</span>
<span id="box_ADMIN">{$box_ADMIN}</span>
<span id="box_BESTSELLERS">{$box_BESTSELLERS}</span>
<span id="box_ADMIN">{$box_ADMIN}</span>
<span id="box_NOTIFICATIONS">{$box_NOTIFICATIONS}</span>
<span id="box_TELL_FRIEND">{$box_TELL_FRIEND}</span>

Im "AJAX-Modus" wird von xtc eine Seite zur?ckgegeben, die den HTML-Text jedes ber?cksichtigten Bereichs (wenn er denn erstellt wurde), eingeschlossen in das Label "#Name#" (wobei "Name" einer der vorstehenden Namen ist).
(box_LOGIN wird z.B. nur bis zum Login erstellt, box_ADMIN erscheint nur nach einem Admin-Login.)

Beispiel: #box_TELL_FRIEND#HTML-Text f?r die TELL_FRIEND-Box#box_TELL_FRIEND#.

?ber ein Javascript-Modul wird der mit AJAX-Technik ?bertragene Text anhand der Abschnittsmarken ("#Name#") getrennt, der entsprechende HTML-Text wird dann in das entsprechende Seiten-Element (mit "ID="Name") der xtc-Seite eingef?gt.

================================================== =============================================

Die ?nderungen in xtc sind ausserordentlich moderat, und betreffen die folgenden Module:

In der "includes/application_top.php" wird

- definiert, ob ?berhaupt mit AJAX gearbeitet werden soll

- (einmalig) gepr?ft, ob der Client-Browser Javascript aktiviert hat
(Wenn nicht, wird keine AJAX-Verarbeitung durchgef?hrt.)

- gepr?ft, ob die aktuelle Anforderung an xtc im AJAX-Modus ausgef?hrt werden soll
(Der Parameter "ajax=true" ist vorhanden).

- festgelegt, welche HTML-Bereiche der Seite mit AJAX bearbeitet werden sollen
("define('AJAX_DATA_ELEMENTS', "navtrail box_CATEGORIES box_WHATSNEW box_REVIEWS main_content box_CART box_LOGIN box_ADMIN box_NOTIFICATIONS box_TELL_FRIEND");")

In der "inc/xtc_href_link.inc.php" wird
- im AJAX-Modus der Link in eine Javascript-Routine eingeschlossen.

Statt

"http://www.meinserver.de/index.php?...."

wird dann ein Link der Form

javascript:make_AJAX_Request("http://www.meinserver.de/index.php?....&ajax=true")

generiert.

In der "includes/header.php" wird
- wird das f?r den AJAX-Suport notwendige Javascript-Modul in die Seite eingebaut

function make_AJAX_Request(url)
--> Kennzeichnet den Link als "AJAX"-Link und sendet eine asynchrone Anforderung an den Server

function setContents()
--> Empf?ngt die Daten asynchron vom Server, splittet den Inhalt in die einzelnen Bereiche,
und schreibt diese (HTML-)Daten in den zugeh?rigen Bereich des HTML-Dokuments.
("document.getElementById("ID-Name").innerHTML = HTML-Text")

function extractText(textstring, delimiter)
--> Extrahiert einen mit "#delimiter#" eingeschlossenen Text aus einem Gesamttext.

In der "includes/classes/smarty_2.6.2/Smarty.class.php" wird
- an den Anfang der "function fetch" Zusatzcode eingef?gt (nur ca. 25 Zeilen!),
der im AJAX-Modus nur den HTML-Code aller f?r die AJAX-Verarbeitung definierten HTML-Module
("define('AJAX_DATA_ELEMENTS'....") ausgibt.
Das zeitaufw?ndige Kompilieren der gesamten "index.html" entf?llt dann!

(Die ?nderung der "Smarty.class.php" hat mir eigentlich nicht so gefallen, weil das eine entsprechende ?nderung in evtl. neuen "Smarty"-Versionen erfordert. Die Alternative w?re aber eine ?nderung in "zig" xtc-PHP-Modulen gewesen. Da diese ?nderung an einer Stelle konzentriert und zudem sehr moderat ist, habe ich mich dann doch daf?r entschieden.)

Was hat man aber nun davon???

Zum Einen wird die Verabeitung etwas schneller werden, da nicht mehr die gesamte "index.html" von "Smarty" gerendert werden muss.

Zum Anderen (und das ist wirklich spektakul?r!) wird die Seite bei einem "Klick" im Browser nicht gel?scht und komplett wieder aufgebaut, sondern es werden nur die ge?nderten Teile der HTML-Seite aktualisiert. Das Browserbild bleibt bestehen und flackert nicht mehr!

================================================== =============================================

Die Implemtierung ist recht weit fortgeschritten, muss aber noch ausf?hrlicher getestet werden.

Wenn gen?gend allgemeines Interesse daran besteht, w?rde ich das Ganze als Contribution dokumentieren und bereitstellen.

Bei Interesse also bitte eMail an mich.

[maggot]

H?rt sich sehr sehr interessant an.
Ich w?re an sowas auch f?r 3.0.X interessiert.
Ich glaube n?mlich dass die Unterschiede zwischen Version 2 und Version 3 zu gro? sein werden um es auf die 3er Version ?bertragen zu k?nnen.

Auch wenn ich es evtl.nicht nutzen werden kann, trotzdem Vielen Dank f?r deine M?hen! Freue mich jedesmal ?ber Beitr?ge von dir!

[xt:mzanier]

ja, hatte vor kurzem nen interessanten bericht ?ber ajax inner ix gelesen.

ist sicherlich f?r xtc interessent, jedoch bleibt zu beachten das daf?r zwingend javascript erforderlich ist.

f?r die template elemente ist ajax eigentlich nicht so interessant (da das nachladen der ganzen seite sowieso kaum last erzeugt), ajax ist vorallem in der form validierung evtl einsetzbar.

[peeeters]

Sehr interessantes Thema!

Ich hatte auch gerade etwas ?ber AJAX gelesen und direkt an xtc gedacht.
Vielen Dank f?r die detailreiche Ausf?hrungen, gswkaiser! Das klingt ja so, als h?ttest Du die Sache schon so gut wie fertig. Hast Du eine Testseite?

Ich halte es besonders dann f?r interessant, wenn der Kunde ein Produkt in den Warenkorb legt. Bei entsprechender Anpassung wird dann nur die Warenkorbbox neu geladen. Das w?rde sich besonders beim Button "Sofortkauf" im Produktlisting bemerkbar machen.

Gr??e
p3e

[gswkaiser]

Originally posted by mzanier+Jan 4 2006, 02:04 PM--><div class='quotetop'>QUOTE(mzanier @ Jan 4 2006, 02:04 PM)</div><div class='quotemain'>f?r die template elemente ist ajax eigentlich nicht so interessant (da das nachladen der ganzen seite sowieso kaum last erzeugt)

Quoted post

[/b]

Was ich mir auf jeden Fall spare ist das Rendern der index.html, Smarty muss halt nur noch die Boxen rendern. Und ein paar von den Boxen kann ich mir auch sparen, da sie statisch sind

Mir gef?llt aber sowieso am Besten die flickerfreie Bilddarstellung, das alleine ist mir schon den (ja ?berraschend geringen) Aufwand wert. Und der subjektive Eindruck beim Laden einer Kategorie z.B. ist: sauschnell im Vergleich zum kompletten nachladen!

Originally posted by mzanier@Jan 4 2006, 02:04 PM
ajax ist vorallem in der form validierung evtl einsetzbar.

Quoted post

F?r die Form-Validierung muss man m.E. doch sehr gro?e ?nderungen an xtc/Client Javascript-Code vornehmen.

<!--QuoteBegin-mzanier@Jan 4 2006, 02:04 PM
jedoch bleibt zu beachten das daf?r zwingend javascript erforderlich st

Quoted post

[/quote]
Ja, sicher. Deshalb macht unser xtc jetzt auch eine Javascript-Erkennung auf dem Client. Das kostet zwar einen (kleinen) zus?tzlichen Roundtrip am Anfang der Session, ist aber notwendig um zu entscheiden, ob die AJAX- oder die konventionelle Methode verwendet wird.

Sollte man vielleicht insgesamt pr?fen, da ein abgeschaltetes Javascript die Funktion von xtc doch stark behindert (Validierung, Druck u.?.).

[gswkaiser]

Originally posted by peeeters+Jan 4 2006, 03:04 PM--><div class='quotetop'>QUOTE(peeeters @ Jan 4 2006, 03:04 PM)</div><div class='quotemain'>Das klingt ja so, als h?ttest Du die Sache schon so gut wie fertig. Hast Du eine Testseite?

Quoted post

[/b]

Es ist in der Tat schon sehr weit gediehen, aber noch nicht online, sondern nur lokal. Das Konzept funktioniert auf jeden Fall aber schon.

<!--QuoteBegin-peeeters@Jan 4 2006, 03:04 PM
Ich halte es besonders dann f?r interessant, wenn der Kunde ein Produkt in den Warenkorb legt. Bei entsprechender Anpassung wird dann nur die Warenkorbbox neu geladen. Das w?rde sich besonders beim Button "Sofortkauf" im Produktlisting bemerkbar machen.

Quoted post

[/quote]
Gute Idee!

Muss mal ?berlegen, ob das, mit vertretbarem Aufwand, so weit reduziert werden k?nnte.

Im Moment ist es so, dass xtc, bis auf das Rendern der index.html, so l?uft wie bisher, und ich nur zum Zeitpunkt des endg?ltigen Seitenaufbaus eingreife, und nur die gew?nschten Teile ?bertrage.

Ich hatte aber schon dar?ber nachgedacht, Teile die nicht ben?tigt werden, auch nicht mehr aufzubauen, was dem beschriebenen Problem ja nahe kommt.

Da es aber keinen Sinn macht, das in allen betroffenen xtc-PHP-Modulen zu ?ndern, schwebt mir da eine L?sung auf "Smarty"-Ebene vor.

Das Problem hierbei ist allerdings, dass der "Smarty"-Render-Routine nicht der Name des zu rendernden Bereiches, sondern der Pfad der zum Rendern zu verwendenden Resource (HTML-Datei) ?bergeben wird, die Zuordnung des Bereiches zu den Daten erfolgt sp?ter unabh?ngig davon. Daher fehlt mir zur Zeit noch die Verbindung zwischen den Smarty-Namen der Bereiche und den zugeh?rigen Resourcen.

Aber man w?chst ja an seinen Aufgaben, ein m?glicher L?sungsansatz daf?r zeichnet sich langsam schon ab .....

[gswkaiser]

Kurzer Status-Update:

Mir ist es jetzt doch gelungen eine (einfache) L?sung daf?r zu finden, nur noch die HTML-Bereiche (Boxen) von Smarty rendern zu lassen, die auch tats?chlich angezeigt werden sollen. Das spart weitere Bearbeitungszeit.

In diesem Zusammenhang konnte ich auch "peeeters" Vorschlag, bei der Bestellung nur noch den Warenkorb zu aktualisieren, gleich mit l?sen!

Das ist einfach supermegaoberaffengeil!

Allerdings w?re noch zu ?berlegen, ob man nicht doch auch noch die "WHATSNEW"-Box mit ?ndert, damit auch dann auf ein neues Produkt hingwiesen wird.

Und wenn die Option, "nach Hinzuf?gen zum Warenkorb diesen anzeigen" gesetzt ist, muss auch doch noch der "main-content" neu angezeigt werden.

Wenn Ihr noch Ideen/Vorschl?ge habt, welche weiteren xtc-Abl?ufe sich noch so drastisch reduzieren lassen, wie der "Kaufen"-Vorgang, lasst es mich wissen.

[peeeters]

@gswkaiser: Mensch, das brennt mir aber jetzt unter den Fingern das mal zu sehen. Sag mir bitte Bescheid, wenn Du eine Testversion online hast!

[gswkaiser]

Noch ein Status-Update.

Man kann das AJAX-Konzept, nur noch die Teile zu erstellen, die wirklich ben?tigt werden, auf sehr einfache Art und Weise noch viel weiter treiben.

Durch geeignete ?nderung der "boxes.php" werden im AJAX-Modus die nicht ben?tigten Boxen nicht nur nicht mehr gerendert, sondern der komplette PHP-Code dieser ?berfl?ssigen Boxen wird gar nicht mehr ausgef?hrt!

Ich denke, so langsam kommen da doch auch merkliche Beschleunigungen der Ausf?hrung zu Stande.

Ich habe das Ganze mal eingehend analysiert:

Standardm??ig sind in xct2 folgende Boxen definiert:

box_ADD_QUICKIE
box_ADMIN *
box_AFFILIATE
box_BESTSELLERS
box_CART *
box_CATEGORIES *
box_CONTENT
box_CURRENCIES
box_HISTORY
box_INFOBOX
box_INFORMATION
box_LANGUAGES
box_LOGIN *
box_MANUFACTURERS
box_MANUFACTURERS_INFO
box_NEWSLETTER
box_NOTIFICATIONS *
box_REVIEWS *
box_SEARCH
box_SPECIALS
box_TELL_FRIEND *
box_WHATSNEW *

Der Inhalt der mit "*" gekennzeichneten Boxen kann sich, abh?ngig von der Verarbeitung, ?ndern,
die anderen Boxen sind (nach gegenw?rtigem Kennnisstand) statisch, und brauchen nicht jedesmal
neu erstellt werden.


Hinzu kommen noch die Bereiche
"main_content" f?r den Hautpanzeige-Bereich zwischen den linken und rechten Boxen
"navtrail" f?r die obere Navigationsleiste

Das Ausf?hren der PHP-Programme und das "Smarty"-Rendern der Boxen

box_ADD_QUICKIE
box_AFFILIATE
box_BESTSELLERS
box_CONTENT
box_CURRENCIES
box_HISTORY
box_INFOBOX
box_INFORMATION
box_LANGUAGES
box_MANUFACTURERS
box_MANUFACTURERS_INFO
box_NEWSLETTER
box_SEARCH
box_SPECIALS

und das Rendern der Gesamtseite "index.html" kann bei der AJAX-Verarbeitung also eingespart werden!

Und beim Hinzuf?gen eines Artikels zum Warenkorb reduziert sich das Ganze auf die Berechnung und das Rendern von:

box_CART
box_WHATSNEW (Muss nicht notwendigerweise erfolgen, sondern, nur wenn man auch dann neue Artikel anzeigen will.)

Wenn die Option, "nach Hinzuf?gen zum Warenkorb diesen anzeigen" gesetzt ist, muss auch noch

"main_content" f?r den Hautpanzeige-Bereich zwischen den linken und rechten Boxen
"navtrail" f?r die obere Navigationsleiste

neu angezeigt werden.

Wenn diese Option nicht gesetzt ist, k?nnte man sich sogar noch die Berechnung des "main_content" ersparen (das kriegen wir sicher auch noch hin...)

Im Gegensatz zu mzanier denke ich mittlerweile doch, dass sich mit dem AJAX-Konzept, neben der viel harmonischeren Optik, auch einiges an Verabeitungszeit einsparen l?sst.

Im konventionellen xtc-Prozess wird halt immer alles neu berechnet und gerendert, auch wenn das vom Ablauf her gar nicht notwendig ist. Da aber die xtc-Seite bisher immer komplett neu erstellt wird, muss man das halt tun.

================================================== ============================

Und das (auch f?r mich) Verbl?ffende daran ist, dass man f?r all das nur einen vergleichsweise geringen ?nderungs-Aufwand treiben muss.

Wenn Ihr noch Ideen/Vorschl?ge habt, welche weiteren xtc-Abl?ufe sich noch so drastisch reduzieren lassen, wie der "Kaufen"-Vorgang, lasst es mich wissen.

[xt:mzanier]

die neueberechnung der boxen befindet sich im MS bereich, von daher ist da der einsatz von ajax hier nicht relevant.

zudem, mit aktiviertem cache erfolgt gar keine neuladung der php file, sondern es wird die fertige html geladen. (3.04)

geschwindigkeitvorteile die hier durch ajax enstehen sind im bereich unter 0.01 sec.

Im konventionellen xtc-Prozess wird halt immer alles neu berechnet und gerendert,

n?, bei aktiviertem cache werden nur die n?tigen teile neu berechnet, und der rest wird als fertige html datei vom cache folder geladen, ohne das smarty hier ein erneutes rendering machen muss.

ajax ist f?r xtc nur f?r die live formvalidierung interessant, d.h. user gibt im formfeld einen Wert ein, und sofort wenn er mit der maus/tab auf das n?chste feld wechselt, wird das zuvor eingegebene ?berpr?ft, das spart die validierung bei absenden des formulars.

ajax in dieser form in eine 2.0 einzubauen ist reine zeitverschwendung, selbiges gilt f?r 3.x