Search the Community

Eine neuer Status-Update. (Ich habe einen neuen Thread er?ffente, weil der erste schon etwas un?bersichtlich war.) Die Arbeit an xtc/AJAX ruhte etwas, geht aber wieder weiter. Das Form-Handling auf AJAX-Basis hatte sich als ziemliches Problem herausgestellt, vor allem auch deshalb, weil in einigen xtc-Formularen ein (verstecktes) Feld "action" verwendet wird, um die auszuf?hrende Option zu ?bergeben. Im nicht Nicht-AJAX-Betrieb st?rt das nicht weiter, aber da ich bei AJAX mir ja den Formular-Inhalt und die Zieladresse selbst auslesen muss, gab es das Problem, dass dieser Feldname "action" mit dem Attribut "action" des Formulars (also die Zieladresse der Daten) in Konflikt geriet. Beim Auslesen des "action"-Attributes des Formulares in Javascript wurde daher immer das Feld "action" als Objekt zur?ckgeliefert. (Das hat einige Zeit gedauert, bis mir das klar wurde...) Aber mittlerweile habe ich das mit den Formularen auch so weit im Griff. Apropos Javascript: Das Javascript-Modul f?r den AJAX-Support hat mittlerweile doch schon ca. 800 Zeilen erreicht... Darin enthalten ist aber auch schon der Code f?r eine AJAX-basierte intelligente Feldvalidierung, die ich mir auch vorgenommen habe, und auch der Code f?r einen verschiebbaren Warenkorb (wenn die Produktliste auf dem Bildschirm nach unten verschoben wird, soll ein Warenkorb mitwandern, damit man sieht, was man so bestellt). Die Feldvalidierung ist mit Daten in der DB hinterlegt und wird folgendes leisten: (Allen Funktionen gemeinsam ist, dass, wenn es f?r eine Eingabe mehrere Datens?tze gibt in der Datenbank gibt, diese Optionen in einer Auswahlbox unter dem Feld zur Auswahl angeboten werden. Man kann also durchaus nur Teile des Feldes (Plz, Blz) eingeben, und erh?lt dann die daf?r zutreffenden Optionen zur Auswahl.) Pr?fung der Vornamen - auf richtige Schreibweise und ?bereinstimmung von Namensgeschlecht (Herr Ingrid z.B. w?rde damit angemeckert). (Diese DB-Tabelle hat ca. 45.000 Eintr?ge, mit Namen aus aller Welt) Pr?fung der Postleitzahl (D-A-CH) - auf Existenz. Wird Sie gefunden, wird auch die Stadt und das Bundesland (f?r "D") im Formular gleich mit aktualisiert, sonst erfolgt eine Fehlermeldung. (Diese DB-Tabelle hat ca. 26.500 Eintr?ge) Pr?fung der Bankleitzahl - auf Existenz. Wird Sie gefunden, wird auch der Bankname im Formular gleich mit aktualisiert, sonst erfolgt eine Fehlermeldung. Pr?fung der Kontonummer (f?r "D") - auf Konformit?t mit den Pr?fziffernverfahren der Banken. Damit kann man die formale Richtigkeit der Kontonummern pr?fen. (Diese DB-Tabelle hat ca. 8.500 Eintr?ge) Der PHP-Teil dieser Validierung ist so weit fertig, der Javascript-Teil der Validierung muss noch ?berarbeitet werden. Aber das sieht schon sehr gut aus... ================================================================ Ich habe auch die Notwendigkeit zur Neuberechnung diverser Boxen weiter reduziert, indem diese nur dann angezeigt werden, wenn sie ben?tigt werden. Die Navigationsbox z.B. wird nur noch angezeigt, wenn eine Navigation stattgefunden hat usw.. Da kann man doch noch einiges reduzieren. ================================================================ Ich hoffe, im Laufe der Woche eine neue Version online stellen zu k?nnen, die auch das Formular-Handling nach AJAX-Art vollst?ndig abdeckt.

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.