Ajaxify your 4Images-Gallery

In: Programmieren Von:

20 Feb 2006

Alle schreiben über Ajax, jeder verwendet es und überhaupt, es ist das Tollste, was die Welt momentan zu bieten hat. Grund genug sich auch diesem Hype anzuschließen und sich alles mal genauer und praktischer anzuschauen.

Zur Begriffsklärung: Es geht nicht um Putzmittel und auch nicht um Fussballer aus Amsterdam. Nein, es geht um Programmieren und Webentwicklung. Bezeichnet wird damit ein Konzept zum Austausch von Daten zwischen Browser und Server.

Normalerweise gibt man Daten auf einer Website ein (z.B. einen Kommentar für mein Blog), dieser wird dann an den Server geschickt und der schickt die komplette Internetseite mit den geänderten Daten zurück - dauert laaaange.

Ajax (Asynchronous JavaScript and XML) geht einen anderen Weg. Mit JavaScript werden die Daten an den Server geschickt, dieser schickt dann eine XML-Datei mit den neuen Daten zurück und dann kommt wieder JavaScript ins Spiel, um diese Daten in die Internetseite einzufügen. Asynchron heißt flapsig gesagt, dass man zwischen Abschicken und Empfangen nicht Kaffee trinken muss, sondern weiter rumklicken darf. Dadurch wird alles viel flüssiger, besser, toller zu bedienen und überhaupt ... lieb haben wir uns sowieso :)

Mein Ziel: Die Bilder in meiner Gallery sollten auf diese Weise bewertet werden können. Wer nicht Informatik studiert, will sich das vermutlich nur anschauen, Bilder bewerten und danach was anderes machen. Für alle anderen beschreibe ich noch, was ich da genau veranstaltet habe.

Zuerst braucht man etwas am Server, das die Aktion ausführt. Die Daten die über Ajax verschickt werden kommen über die bekannten Wege (GET oder POST - es ist ja normale HTTP-Kommunikation) beim Server an. Man kann also ganz normal php programmieren. Die Routinen für das speichern der Bewertung hab ich mir aus den Quellen der Gallery zusammengesucht. Einziger Unterschied zu ner normalen Webseite...es wird ein kleines XML-Dokument erzeugt.

PLAIN TEXT
PHP:
  1. ...
  2. header("Content-type: text/xml; charset=iso-8859-1");
  3. echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
  4. echo "$msg$rating ($votes $stimmen)";

Auf der Clientseite ist es etwas komplexer, weil hier die Hauptarbeit geschieht. Aber wenn man erstmal durchblickt, dann geht es ganz gut. Zuerst braucht man ein XMLHttpRequest-Objekt, der Dreh- und Angelpunkt von Ajax.

PLAIN TEXT
JavaScript:
  1. xmlHttp = new XMLHttpRequest();

Das hier ist die beispielhafte Instantiierung für Mozilla & Co. Mit Browserweiche macht man die Seite auch fit für alle neueren Browser. Den Code dafür findet man z.b. auf dieser Seite.

Ein HTML-Formular wo man einen Wert wählen kann und einen Knopf zum Abschicken hat, dürfte jeder bauen können. Wenn nicht freut sich SelfHTML über einen Besuch. Erwähnenswert ist die erste Zeile:

PLAIN TEXT
HTML:
  1. <form name="frmrating" onsubmit="bewertemitajax( aktuelleBildId ); return false;">

action gibt's nicht, weil wir ja keinen normalen Postback haben wollen. name, dass wir nachher das Formular in Javascript finden und auslesen können. onsubmit wird ausgeführt, wenn man auf Abschicken drückt. Wichtig ist das return false;. Ohne dieses würde zusätzlich ein Postback (den wir ja grade nicht haben wollen) ausgeführt werden.Und nun kommen wir zur zentralen Methode, die auch wirklich Ajax macht: bewertemitajax(id):

PLAIN TEXT
JavaScript:
  1. function bewertemitajax(id) {
  2. var rate = document.frmrating.rating.value;
  3. if (xmlHttp) {
  4. xmlHttp.open('POST', 'ajax.php', true);
  5. xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  6. xmlHttp.onreadystatechange = function () {
  7. if (xmlHttp.readyState == 4) {
  8. xmlDoc = xmlHttp.responseXML;
  9. var msg = xmlDoc.getElementsByTagName("message")[0].firstChild.data;
  10. var votetxt = xmlDoc.getElementsByTagName("votetext")[0].firstChild.data;
  11. document.getElementById("vote_anzeige").firstChild.data = votetxt;
  12. document.frmrating.parentNode.insertBefore(document.createTextNode(msg), document.frmrating);
  13. document.frmrating.submit.disabled = true;
  14. document.frmrating.rating.disabled = true;
  15. }
  16. };
  17. xmlHttp.send('action=rateimage&id='+id+'&rating='+rate);
  18. }
  19. }

Ich erkläre es nur kurz, da es genug Tutorials gibt, die die einzelnen Funktionen beschreiben.
  • Es wird eine Verbindung geöffnet, wobei man angeben kann wie, wohin und ob asynchron (true) oder sychron (false) übermittelt wird.
  • Der Content-Type der zu übermittelden Daten wird gesetzt.
  • onreadystatechange gibt eine Funktion an, die aufgerufen wird, wenn der asynchrone Transfer fertig ist. Hier ist es als anonyme Funktion (vielleicht aus Java bekannt) implementiert. Man kann auch einfach einen Funktionsnamen angeben.
  • Am Ende wird mit send alles abgeschickt, wobei als Parameter die richtig codierten Daten angegeben werden.
  • Wenn der Server geantwortet hat, wird die oben erwähnte anonyme Funktion abgearbeitet. Da der Server in meinem Fall echtes XML liefert, bekommt man mit xmlHttp.responseXML ein Objekt des DOM-Baums, dem man mit den JavaScript-üblichen Funktionen Informationen entlocken kann. Diese Informationen bastelt man dann noch an die richtigen Stellen (am besten man markiert die über ID's) im DOM-Baum der Seite und fertig ist man.

So, ich hoffe das war jetzt einigermaßen verständlich. Abschließend noch ein kleiner Änderungslog: Ich hab eine neue php-Datei erstellt, in der die Funktionalität am Server implementiert ist (ajax.php). Der Javascript-Code wurde in die bestehende Template-Datei rate_form.html gepackt. Diese zwei Dateien hab gibt's als ZIP-Archiv zum Download. Im Template details.html muss noch ein id="vote_anzeige" dort eingefügt werden, wo die aktuelle Bewertung eines Bildes erscheinen soll.

Das war's und bitte keine Kommentare zu meinem Programmierstil ;)

1 Antwort to Ajaxify your 4Images-Gallery

Sebi

February 20th, 2006 at 22:50

Schick gemacht. Ich hab mich noch nicht getraut eine bestehende seite durch AJAX aufzuwerten, bisher ist es bei neu schreiben geblieben… Vielleicht wirds ja beim Photoblog was.

Kommentarfeld

Über mich

Ich bin Sebastian (30) und das ist mein Blog. Ein spezielles Thema gibt es nicht, aber ich kann wohl behaupten, dass es oft um Bilder geht. Dazu empfehle ich auch meine Gallery zu besuchen.

Zufallsbild

Kunstrastplatz Illertisen
 
 

Kunstrastplatz Illertisen

Betrachtet: 53 mal

Schubladen

Rückblicke

  • spocket: Ja, Anfang September läuft fast noch unter Sommer, farblich nicht so schön, dafür temperaturtechn [...]
  • Sebi: Hattest auch gutes Wetter erwischt und man sieht das du etwas früher am Walberla warst. Es sind vie [...]
  • Sebi: Coole Aktion... [...]
  • spocket: Danke fürs Lob - mir gefällt das auch. Siehst du keine Sterne fürs Voten? Also bei mir und bei S [...]
  • Sebi: Am besten gefällt mir Bild 18. Finde das könnte man direkt so auf eine Postkarte drucken (aber lei [...]

Copyright © 2007 - sBLOGet - is proudly powered by WordPress | Log in

Compositio Theme is created by: Design Disease brought to you by PremiumThemes.com