Das besondere bei diesem Training war, das ich diesen Teilnehmer ungefähr ein Jahr zu vor schon in einer AJAX-Schulung hatte. Es ist schön wiederkehrende Teilnehmer in den Schulungen zu sehen, denn nur so kann ich ein Feedback der gelaufenen Seminare einfordern und sehen ob und was ich verbessern kann. Die sonst üblichen Feedbackbögen am Ende einer Schulung vermitteln ja leider nicht die Langzeitwirkung.

Da der Teilnehmer bei der Messe Düsseldorf für die Pflege der Websites zuständig ist, erzählte er mir dass im Laufe der Zeit viel wenn nicht sogar alle Website eine AJAX-Unterstützung, also Web 2.0, bekommen sollen. Das begrüße ich natürlich hiermit.

Ähnliche Beiträge

• AJAX – PHP Schulung in Stuttgart
• JavaScript – Grundlagen
• PHP – Grundlagen
• PHP – Einzelcoaching
• PHP – Nachschulung

Also wenn man z.B. eine neue Seite hinzufügen möchte, sollte nicht eine neue Browser-Seite geladen werden, wie es zur Zeit der Fall ist, sondern besser wäre es wenn über die Thickbox-Erweiterung das Formular innerhalb einer darübergelegten Ebene angezeigt wird. Eigentlich könnte jede Modifikation am System damit erweitert werden. So auch eine Zwischenabfrage vor dem Löschen eines Menüpunktes, einer Box oder gar einer gesamten Seite – auch könnten verlinkte Bilder in dieser neuen Ebene angezeigt werden.

So schön dies klinkt, einen kleinen Nachteil hätte diese Erweiterung allerdings doch. Wenn JavaScript deaktiviert ist, könnte es zu Problemen kommen, da ja AJAX bekanntlich auf JavaScript aufbaut. Aus diesem Grund empfehle ich bewusst zur Zeit solche Erweiterungen nur im kontrollierten Rahmen anzuwenden. In meinem Fall wäre das der Administrationsbereich. Hier sollte JavaScript schon aus dem Grund aktiviert sein, um den Online-Editor zu benutzen. Im Frontend-Bereich wo jeder Besucher die Links benutzen möchte, ist es vielleicht zu viel verlangt.

Auch habe ich zur Zeit die Thickbox-Erweiterung nicht mit integriert, um die Übersichtlichkeit und damit die Verständlichkeit nicht zu gefärhden.

Ähnliche Beiträge

• Tag 24 – Abschluss
• Tag 23 – Mehrbenutzer- und Rechtesystem
• Tag 22 – Bild-Upload und RSS-Feed
• Tag 20 – CSS-Design
• Tag 19 – Formulare

So haben wir uns dann auf die Schulung von JavaScript konzentriert. Thema war dann speziell das DOM-Scripting, sowie die Verarbeitung von XML-Daten und JSON.

Um die einzelnen Themen in einem kleinen Projekt besser verständlich zu machen, haben wir ein kleines Adressbuch programmiert.

Ähnliche Beiträge

• Einzelcoaching – PHP-XML Schulung
• JavaScript – Grundlagen
• JavaScript – Grundlagen
• PHP – Grundlagen
• JavaScript – Grundlagen

• AJAX Adressbuch 1.1

Bugfix:

1. Ich habe eine SQL-Datei hinzugefügt, um die Datenbank schneller zu installieren. Jetzt muss nur noch in der include-Datei der Zugriff auf die Datenbank geregelt werden.
2. Der init()-Methode des Adressbuches wird jetzt der Form-Container übergeben, so dass das Adressbuch flexibler auf das DOM reagieren kann.
3. Die Literal-Namen wurden in eine einheitliche Schreibweise (RED_AdrBook, RED_AJAX) umbenannt.
4. Eine update-Funktion für bestehende Datensätze wurde hinzugefügt.
5. Eine Lösch-Funktion wurde hinzugefügt. Deswegen wurde ein delete.php-Script, welches einen Datensatz löscht, angelget.
6. Die Anzahl der Datensätze und der aktuelle Datensatz wird nun im Interface angezeigt.

Ähnliche Beiträge

• AJAX Adressbuch – Tutorial Teil 4
• Tag 21 – Erweiterung durch AJAX
• Alle Türchen von 2007 sind offen
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2

Ähnlich wie in Teil 2 und Teil 3 werde ich mehrere Datei benutzen um alles geordnet zu haben. Aber als erstes die Scripte zum Erzeugen der Datenbank und des Datenbestandes.

1. CREATE DATABASE `demodb` DEFAULT CHARACTER SET latin1 COLLATE latin1_general_ci; USE `demodb`;

1. CREATE TABLE `mitarbeiter` (
2. `id` int(11) NOT NULL auto_increment,
3. `nachname` varchar(255) NOT NULL,
4. `vorname` varchar(255) NOT NULL,
5. `email` varchar(255) NOT NULL,
6. `telefon` varchar(255) NOT NULL,
7. PRIMARY KEY (`id`)
8. );

Also phpMyAdmin, das ultimative Datenbank-Tool, öffnen und die Codes einfügen. Dazu noch einen Datenbank-Benutzer und ein dazugehöriges Passwort anlegen. In meinem Fall heißt der Benutzer “demouser” und sein Passwort ist “password“.

Als nächstes lege ich mir immer eine PHP-Datei an, die die Verbindung zur Datenbank regelt. Somit muss ich die Daten nicht in jedes Script hineinschreiben.

1. <?php
2. $connect = mysql_connect('localhost', 'demouser', 'password');
3. mysql_select_db('mitarbeiter', $connect);
4. ?>

In der Variable $connect wird dann die Verbindung zum Datenbank-Server gespeichert und kann von nun an genutzt werden. Ich habe hier der Einfachheit halber auf Fehlermeldungen verzichtet.

1. header('Content-Type: text/xml');
2. $xml = new DOMDocument('1.0', 'utf-8');
3. $root = $xml->createElement('mitarbeiter');
4. $xml->appendChild($root);
7. echo $xml->saveXML();

Um mit PHP eine XML-Ausgabe zu erzeugen, reicht der obige Quellcode. Wichtig dabei ist das der richtige Header an den Browser geschickt wird.

Danach wird ein XML-Objekt mit dem Zeichensatz “utf-8″ generiert. Weiterhin wird ein Hauptknoten erzeugt und an das XML-Dokument dran gehangen. Zum Schluss alles an den Browser geschickt.

Soweit die Grundstruktur der XML-Ausgabe. Aber es fehlen ja noch die eigentlichen Inhalte aus der Datenbank.

1. <?php
2. include_once('include.php');
4. $sql = 'SELECT * FROM personen ORDER BY nachname';
5. $result = mysql_query($sql, $connect);
6. while($rs = mysql_fetch_assoc($result))
7. {
8. $nachname = $xml->createElement('nachname');
9. $nachname->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['nachname'])));
10. $vorname = $xml->createElement('vorname');
11. $vorname->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['vorname'])));
12. $email = $xml->createElement('email');
13. $email->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['email'])));
14. $telefon = $xml->createElement('telefon');
15. $telefon->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['telefon'])));
16. $person = $xml->createElement('person');
17. $person->setAttribute('id', $rs['id']);
18. $person->appendChild($nachname);
19. $person->appendChild($vorname);
20. $person->appendChild($email);
21. $person->appendChild($telefon);
22. $root->appendChild($person);
23. }
25. mysql_close($connect);
26. ?>

Dazu binde ich als erstes die externe Datei zum Verbinden mit dem Datenbank-Server ein. Danach speichere ich das SQL-Statement in einer Variablen zwischen und hole von der Datenbank alle Ergebnisse dieser Anfrage.

In der darauffolgenden while-Schleife werden neue Knoten erzeugt und an den Root dran gehangen. Dabei setzt sich der Nachname-Knoten z.B. wie folgt zusammen. Ich erzeuge als erstes einen <nachname>-Tag und hänge dann mit der createTextNode()-Methode einen Text-Knoten dran. Den Text den ich da dran hänge, konvertiere ich zuvor noch mit der iconv()-Funktion in den richtigen Zeichensatz. Zum Schluss hänge ich dem <person>-Tag alle Unterknoten dran.

Soweit die Ausgabe zum Browser, bzw. zu JavaScript und meiner AJAX-Klasse. Was noch fehlt ist ein Script um Daten von JavaScript in Empfang zu nehmen und in die Datenbank einzufügen.

1. <?php
2. include('include.php');
3. $sql = sprintf('REPLACE INTO personen SET
4. id=%d,
5. nachname="%s",
6. vorname="%s",
7. email="%s",
8. telefon="%s"'
9. ,$_POST['f0'],$_POST['f1'],$_POST['f2'],$_POST['f3'],$_POST['f4']);
10. mysql_query($sql, $connect);
11. mysql_close();
12. ?>

Auch hier ist der Quellcode sehr überschaubar. Als erstes binde ich wieder Das Script zum Erzeugen einer Verbindung zum Datenbank-Server ein. Dann speichere ich wieder in einer Variablen das SQL-Statement zwischen. Um ein korrektes Ergebnis zu bekommen, verwende ich hier die sprinf()-Funktion. Diese bietet mir eine kleiner Kontrolle über die übergebenen Werte. Zum Schluss schicke ich das Ganze nur noch an der Server und fertig ist das Einfügen neuer oder das Ändern von bestehenden Datensätzen. Ich verwende dazu immer ganz gern das REPLACE-Statement. Wenn dieses Statement keine ID besitzt wird ein neuer Datensatz erzeugt, ansonsten wird der Bestehende verändert.

• Download

So und das war es auch schon mit der serverseitigen Programmierung. Gerade mal 3 kleine Script brauche ich hier um der ganzen Webanwendung auch das Speichern auf dem Server bzw. das Einlesen von Daten hinzuzufügen.

Ich hoffe es hat euch gefallen 24 meist kleine Beträge aus meinen Arbeitsalltag zu lesen. Ich gebe zu, es war nicht immer leicht die Texte rechtzeitig fertig zu stellen und ich verspreche, wie immer und alle, nächstes Jahr rechtzeitig mit den Vorbereitungen zu beginnen.

Ähnliche Beiträge

• AJAX Adressbuch
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• AJAX Adressbuch – Tutorial Teil 1
• Einzelcoaching – PHP-XML Schulung

Ok, als erstes wieder einmal die Zusammenfassung aller Eigenschaften und Methoden der RED-Ajax-Objektes.

1. // JavaScript Document
2. var RED_Ajax =
3. {
4. req : null,
5. url : null,
6. method : 'GET',
7. async : false,
8. body : null,
9. headers : [],
10. timer : null,
11. responseXML : null,
12. responseText : null,
13. init : function() { },
14. run : function() { },
15. header : function() {},

16. response : function() {},

17. callback : function() {},
18. update : function() {},
19. error : function() { }
20. }

Ich werde jetzt nicht alle Eigenschaften im Detail erklären, denn das passiert auf jeden Fall noch bei der Erklärung der einzelnen Methoden. Ich fange lieber direkt mit den Methoden an.

1. init : function()
2. {
3. this.req = (window.XMLHttpRequest)
4. ?
5. new XMLHttpRequest()
6. :
7. ((window.ActiveXObject)
8. ?
9. new ActiveXObject('Microsoft.XMLHTTP')
10. :
11. null
12. );
14. if(this.req != null)
15. {
16. this.req.onreadystatechange = this.response;
17. }
18. },

Wie immer gibt es bei mir eine init()-Methode. Diese hier legt in der reg-Eigenschaft ein Objekt ab, welche eine Verbindung zum Server aufbauen kann. Da jeder Browser ein anderes Objekt dazu benutzt, muss hier immer erst noch geprüft werden ob das ganze auch funktioniert. Wenn alles geklappt hat wird noch auf den readystatechange-Event ein Methodenverweise gemacht.

1. run : function(u,m,f,b)
2. {
3. this.method = m || this.method;
4. this.async = f || this.async;
5. this.body = b || this.body;
6. this.url = u;
7. if(this.req != null)
8. {
9. this.req.open(this.method, this.url, this.async);
10. if(this.headers.length > 0)
11. {
12. for(var i=0; i<this.headers.length; i+=2)
13. {
14. this.req.setRequestHeader(this.headers[i], this.headers[i+1]);
15. }
16. }
17. this.req.send(this.body);
18. }
19. },

Um dann aber auch die eigentlichen Daten vom bzw. zum Server zu schicken gibt es die run()-Methode. Ihr kann bis zu 4 Parameter mit übergeben werden, wobei der erste, die URL-Angabe, nur Pflicht ist. Die weiteren Parameter sind die Übertragungsmethode (GET oder POST), ob die Ubertragung synchron (true) oder asynchron (false) stattfinden soll und der beim Senden mitgelieferte Body.

Bevor der Request aber geschickt wird, werden die im Vorfeld gesetzte Header-Angaben verarbeitet.

1. header : function(k,v)
2. {
3. if(k != null)
4. {
5. this.headers.push(k);
6. this.headers.push(v);
7. }
8. },

Um eine Header-Angabe, die später mit übertragen werden soll, zu setzten, reicht es die header()-Methode mit ihren beiden Parametern key und value aufzurufen.

1. response : function()
2. {
3. var a = ajax.req;
4. switch(a.readyState)
5. {
6. case 1:
7. break;
8. case 2:
9. this.timer = window.setTimeout(this.error, 10000);
10. break;
11. case 3:
12. this.timer = window.setTimeout(this.error, 10000);
13. break;
14. case 4:
15. window.clearTimeout(this.timer);
16. if(a.status==200 || a.statusText=='OK')
17. {
18. RED_Ajax.responseXML = a.responseXML;
19. RED_Ajax.responseText = a.responseText;
20. RED_Ajax.callback();
21. }
22. }
23. },

Beim Ausführen der Sende- bzw. Empfang-Vorganges durchläuft das Verbindungsobjekt verschiedene Stadien, die in der response()-Methode geprüft werden. Folgende Stati gibt es:

1. Das Verbindungsobjekt existiert aber die open()-Methode wurde noch nicht aufgerufen.
2. Die send()-Methode wurde noch nicht ausgeführt.
3. Die send()-Methode wurde zwar ausgeführt, aber der Server hat noch nichts zurück geschickt.
4. Der Server hat angefangen Daten zu übermitteln, aber ist damit noch nicht fertig.
5. Der Übermittlungsvorgang wurde beendet und alle Date sind angekommen.

Um den Übertragungsvorgang auch irgendwann abzubrechen, falls ein Fehler aufgetreten ist, habe ich im Status 2 und 3 eine Timeout eingefügt und hebe ihn im Status 4 wieder auf, da da ja alles angekommen ist. Wenn dann auch noch der Server mit “alles ok” übertragen hat, dann werden die übertragenen Werte einmal als reine Text und als XML-Objekt abgespeichert. Zum Schluss rufe ich nur noch die callback()-Methode auf.

1. callback : function(){},
2. update : function(){},

Meine callback()-Methode ist ein sogenannter Huck und muss erst noch definiert werden. Ich habe deshalb offen gelassen, weil die Verarbeitung der übertragenen Daten sehr unterschiedlich sein kann. In Teil 2 habe ich erklärt wo und wie man diese Definition einsetzt.

Auch habe ich eine update()-Methode zwar eingesetzt, aber noch nicht definiert. Hier lasse ich mir die Möglichkeit offen zu einem späteren Zeitpunkt einen zyklischen Aufruf des Server zu bauen.

1. error : function()
2. {
3. alert('Die Zeit ist um!');
4. this.req.abort();
5. }

Meine letzte Methode ist die error()-Methode. Sie dient ausschließlich dazu bei zu langen Ladezeiten diesen Vorgang abzugrechen.

Wie immer gibt es zum Schluss den Download der beschriebenen Dateien:

• RED_AJAX Datei

Ähnliche Beiträge

• AJAX Adressbuch – Tutorial Teil 2
• AJAX Adressbuch – Tutorial Teil 1
• AJAX Adressbuch – Tutorial Teil 4
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1

Die Programmierung besteht hier nun aus 2 JavaScript-Dateien. Die eine ist für die Verarbeitung der Daten und die andere regelt die Übertragung zum und vom Server.

Fangen wir nun mir der Verarbeitung an. Um in diesem Stadium der Programmierung nicht schon die serverseitigen Scripte geschrieben zu haben, arbeite ich immer mit einer Demo-XML-Datei.

1. // JavaScript Document
2. var RED_Adrbook =
3. {
4. data : [],
5. alerts : { },
6. zeiger : 0,
7. init : function(){ },
8. loadXML : function() { },
9. loadData : function(xml) { },
10. loadEvents : function() { },
11. loadSlides : function() { },
12. pager : function() { },
13. add : function() { },
14. insert : function() { },
15. edit : function() {},
16. update : function() {},
17. remove : function() {}
18. }

Wie schon bei den letzten Beispielen verwende ich bei solcher Programmierung gerne Literale. Die Eingenschaft data dient dann später dazu alle vom Server bekommen Kontakte in einen einzigen Array zu sammeln. Über die Eigenschaft zeiger wird dann das Weiterschalten zum nächsten Mitarbeiter geregelt. Die letzte Eigenschaft innerhalb des Objektes verwende ich um Meldungen vom System an den Benutzer zu kapseln. Ich habe mir dazu ein Unterobjekt angelegt.

Kommen wir nun zu den einzelnen Methoden des Obejktes:

1. init : function()
2. {
3. RED_Ajax.init();
4. this.loadXML();
5. },

In fast jedem Objekt lege ich eine init()-Methode an, um alle wichtigen Prozesse zu starten, die vor der eigentlichen Benutzung durch den Anwender gebraucht werden. In diesem Fall ist das die Vorbereitung der Verbindung zum Server und dann das Laden der XML-Daten vom Server.

1. loadXML : function()
2. {
3. RED_Ajax.callback = function()
4. {
5. RED_Adrbook.loadData(this.responseXML);
6. };
7. RED_Ajax.run('mitarbeiter.xml','GET',false);
8. },

Um die empfangen XML-Daten auch später zu verarbeiten, muss der Huck, also die callback()-Methode des RED_AJAX-Objektes definiert werden. Ich rufe hier die loadData()-Methode des RED_AdrBook auf und übergebe ihr die empfangenen XML-Werte. Nach allen Vorbereitungen rufe ich die run()-Methode auf und übergebe ihr als erstes die zu ladende Datei, dann mit welcher Methode die Übertragung stattfinden soll und zum Schluss ob es sich um eine synchrone Übertragung handelt. Nur selten ändern sich die beiden letzten Werte.

1. loadData : function(xml)
2. {
3. this.data = [];
4. var personen = xml.getElementsByTagName('person');
5. for(var i=0; i<personen.length; i++)
6. {
7. var person = {
8. Nachname : personen[i].childNodes[0].firstChild.nodeValue,
9. Vorname : personen[i].childNodes[1].firstChild.nodeValue,
10. Email : personen[i].childNodes[2].firstChild.nodeValue,
11. Telefon : personen[i].childNodes[3].firstChild.nodeValue,
12. ID : personen[i].getAttribute('id')
13. };
14. this.data.push(person);
15. }
16. this.loadEvents();
17. this.loadSlides();
18. },

Nachdem alle Daten vom Server übertragen wurden, kann die eigentliche Verarbeitung beginnen. Als erstes leere ich den Array und hole mir aus den übergebenen Wert einen Array mit allen Mitarbeitern. Diesen Array durchlaufe ich und erzeuge mir ein eigenes Personen-Objekt zur späteren besseren Verarbeitung. Dieses Personen-Objekt wird dann im Data-Array abgespeichert.

Zum Schluss müssen natürlich noch die Events für die Buttons festgelegt werden und das aktuelle Slide, also der aktuelle, hier der erste, Mitarbeiter angezeigt werden.

1. loadEvents : function()
2. {
3. document.getElementById('btn_next').onclick = function() {
4. RED_Adrbook.pager(true);
5. }
6. document.getElementById('btn_prev').onclick = function() {
7. RED_Adrbook.pager(false);
8. }
9. document.getElementById('btn_edit').onclick = function() {
10. RED_Adrbook.edit();
11. }
12. document.getElementById('btn_add').onclick = function() {
13. RED_Adrbook.add();
14. }
15. document.getElementById('btn_remove').onclick = function() {
16. RED_Adrbook.remove();
17. }
18. },

Das festlegen welche Funktionen welcher Button hat ist recht einfach, da es dafür separate Methoden gibt.

1. loadSlides : function()
2. {
3. var s = document.getElementById('RED_Book').getElementsByTagName('span');
4. s[0].innerHTML = this.zeiger;
5. s[1].innerHTML = this.data[this.zeiger]['Nachname'];
6. s[2].innerHTML = this.data[this.zeiger]['Vorname'];
7. s[4].innerHTML = this.data[this.zeiger]['Telefon'];
8. var link = '<a href="mailto:';
9. link += this.data[this.zeiger]['Email'];
10. link += '">';
11. link += this.data[this.zeiger]['Email'];

12. link += '</a>';
13. s[3].innerHTML = link;
14. },

Bei Laden des aktuelle Slides werden als erstes alle <span>-Tags aus dem Formular mit der ID RED_Book in eine Array geladen. Dann werden die Daten aus dem aktuellen Silde per innerHTML in die Spans zugewiesen. Das this.zeiger immer den aktuellen Zeiger repräsentiert ist das ganze kein größeres Problem. Selbst eine mailto:-Link zu erzeugen stellt keine große Hürde da.

1. pager : function(d)
2. {
3. if(d)
4. {
5. (this.zeiger == this.data.length-1) ?alert(this.alerts.last) :this.zeiger++;
6. }
7. else
8. {
9. (this.zeiger == 0) ?alert(this.alerts.first) :this.zeiger--;
10. }
11. this.loadSlides();
12. },

Für der vor und zurück Blättern gibt es eine kleine und einfache Methode, die als erstes prüft wo der Zeiger steht und am Ende bzw. am Anfang der Liste diesen korrigiert. Dann wird noch per loadSlides()-Methode der richtige Mitarbeiter angezeigt.

1. add : function()
2. {
3. var s = document.getElementById('RED_Book').getElementsByTagName('span');
4. s[0].innerHTML = 'neuer Datensatz';
5. s[0].innerHTML += '<input type="hidden" name="f0" value="" />';
6. s[1].innerHTML = '<input type="text" name="f1" />';
7. s[2].innerHTML = '<input type="text" name="f2" />';
8. s[3].innerHTML = '<input type="text" name="f3" />';
9. s[4].innerHTML = '<input type="text" name="f4" />';
10. s[4].innerHTML += '<br />';s[4].innerHTML += '<input type="button" id="btn_save" value="speichern" />';
11. s[4].innerHTML += '<input type="button" id="btn_cancel" value="abbrechen" />';
12. document.getElementById('btn_save').onclick = function() {
13. RED_Adrbook.insert(document.getElementById('RED_Book'));
14. };
15. document.getElementById('btn_cancel').onclick = function() {
16. RED_Adrbook.loadSlides();
17. };
18. document.getElementsByTagName('input')[1].focus();
19. },

In der add()-Methode werden die Inhalte der <span>-Tags gelöscht und durch leere Eingabefelder erstetzt. Zusätzlich wird ein Speichern- und Cancel-Button eingefügt und ihnen natürlich auch noch die richtige Funktionalität zugewiesen. Zum Schluss bekommt das erste Eingabefeld den Focus, so dass der Anwender direkt losschreiben kann.

1. insert : function(form)
2. {
3. var inputs = form.getElementsByTagName('input');
4. var body = 'f0='+escape(inputs[0].value)+'&'+ 'f1='+escape(inputs[1].value)+'&'+ 'f2='+escape(inputs[2].value)+'&'+ 'f3='+escape(inputs[3].value)+'&'+ ‘f4='+escape(inputs[4].value);
5. RED_Ajax.callback = function()
6. {
7. RED_Adrbook.loadXML();
8. };
9. RED_Ajax.header('Content-Type', 'application/x-www-form-urlencoded');
10. RED_Ajax.run('eingabe.php','POST',false,body);
11. },

Um die neu eingefügten, bzw. später geänderten Daten auch an der Server und damit in die Datenbank zu schreiben, wird beim Klick auf den Speichern-Button die insert()-Methode aufgerufen. Sie lädt alle Eingabefelder und fügt sie zu einem langen String mit URL-konformer Schreibweise zusammen. Dann wird eine neue callback()-Methode des RED_Ajax-Objektes definiert, der Header zum Übertragen von Formular-Daten geändert und die Date an das Verarbeitungsscript gesendet. Nach dem Senden wird wiederum die loadXML()-Methode aufgerufen, um die neuen Daten vom Server abzufragen und anzugeigen.

1. edit : function() {},
2. update : function(form) {},
3. remove : function() {}
4. }

Bleiben zum Schluss noch 3 weiter Methoden übrig. Als kleine Herausforderung habe ich mir überlegt diese von euch selber erstellen zu lassen. Das ist auch gar nicht so schwer.

Z.B. ähnelt die edit()-Methode ja der add()-Methode, nur dass hier jetzt noch die Daten des aktuellen Mitgliedes eingefügt werden müssen. Auch die update()-Methode ist nur eine abgewandelte Version der insert()-Methode und bei der remove()-Methode brauch ja nur die aktuelle ID an den Server übermittelt werden, um den richtigen Datansatz zu löschen. Ich glaube fest daran, dass das jeder Lesen schaffen kann.

Hier nochmals die gesamte JavaScript-Datei zum Download.

• Adressbuch-Datei

Ähnliche Beiträge

• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 1
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1
• AJAX Adressbuch – Tutorial Teil 4

In diesem Tutorial möcht ich euch die Entwicklung, bzw. die wichtigsten Schritt zum Erstellen eines Web-Adressbuches zeigen. Dabei habe ich alles in 3 Teile aufgeteilt. Dass heißt heute zeige ich euch das Interface der Webanwendung, also die HTML-Datei und das dazugehörige Design. Morgen gibt es dann die clientseitige und übermorgen die serverseitige Programmierung.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>RE-Design - AJAX - Adressbuch</title>

6. <link rel="stylesheet" href="adressbook.css" type="text/css" media="screen" />
7. </head>
8. <body>
9. <div class="RED_Adrbook">
10. <h1>Adressbuch Demo</h1>
11. <noscript>
12. <p>Ohne JavaScript ist hier nix los.</p>
13. </noscript>
14. <form id="RED_Book">
15. <table>
16. <tr>
17. <th>ID:</th>
18. <td><span></span></td>
19. </tr>
20. <tr>
21. <th>Name:</th>
22. <td><span></span></td>
23. </tr>
24. <tr>
25. <th>Vorname:</th>
26. <td><span></span></td>
27. </tr>
28. <tr>
29. <th>Email:</th>
30. <td><span></span></td>
31. </tr>
32. <tr>
33. <th>Telefon:</th>
34. <td><span></span></td>
35. </tr>
36. </table>
37. <ul class="RED_Buttons">
38. <li><a id="btn_prev">previous</a></li>
39. <li><a id="btn_next">next</a></li>
40. <li><a id="btn_edit">edit</a></li>
41. <li><a id="btn_add">add</a></li>
42. <li><a id="btn_remove">delete</a></li>
43. </ul>
44. </form>
45. </div>
46. </body>
47. </html>

Wie ihr seht ist in diesem Quellcode keine besonderen Tricks enthalten. An Anfang lade ich noch das externe Design. Die gesamte Anwendung ist dann in eine <div>-Container gebettet und die einzelnen Ein- und Ausgabefelder sind in eine Tabelle integriert. Dort wo später die Ein- und Ausgabe erfolgen soll habe ich <span>-Tags gesetzt um später einfacher per JavaScript darauf zu zugreifen.

Die Button zur Steuerung dieser Anwendung habe ich dann unterhalb der Tabelle un eine Liste leget. Es sind einfache Links, die aber kein Ziel haben. Klar sie sollen ja auch nicht irgendwohin anderes gehen!

1. @charset "utf-8";
2. /* CSS Document */
3. body
4. {
5. margin:0 auto;
6. padding:0;
7. text-align:center;
8. width:28em;
9. }
10. th, td
11. {
12. vertical-align:top;
13. }

Als erstes lege ich in der CSS-Datei fest wie die gesamte Seite auszusehen hat. Dabei beschränke ich mich hier erstmal nur auf die Zentrierung des Inhaltes und die Definierung der Gesamtbreite. Weiterhin werden alle Zellen der Tabelle vertikal oben ausgerichtet.

1. .RED_Adrbook
2. {
3. margin: 1em 0 0;
4. padding:1em;
5. background-color:#fc3;
6. border:thin solid #960;
7. text-align:left;
8. font-family: Verdana, Arial, Helvetica, sans-serif;
9. }
10. .RED_Book table {
11. width:28em;
12. border-collapse:collapse;
13. }
14. .RED_Book th
15. {
16. text-align:left;
17. width: 6em;
18. }
19. .RED_Book h1
20. {
21. font-size:1.0em;
22. text-decoration:underline;
23. }

Als nächstes definiere ich das Aussehen des eigentlichen Adressbuches. Hier wird die allgemeine Schriftart, Hintergrundfarbe etc. angegeben. Zusätzlich mache ich Angaben über die Breite der Tabellen und ihre Tabellenköpfe. Als letztes lege ich noch das Aussehen der Überschrift meiner Anwendung fest.

1. .RED_Buttons
2. {
3. margin:1em 0 0;
4. padding:0;
5. }
6. .RED_Buttons li
7. {
8. margin:0;
9. padding:0;
10. list-style-type:none;
11. display:inline;
12. }

Nun zur Button-Liste, auch hier verwende ich nur rudimentäre Formatierung. Alle Buttons sollen nebeneinander und nicht untereinander stehen. Am einfachsten geht das mit dem inline-Wert der display-Eigenschaft.

1. #btn_prev,
2. #btn_next,
3. #btn_edit,
4. #btn_add,
5. #btn_remove,
6. #btn_save,
7. #btn_cancel
8. {
9. cursor:pointer;
10. padding:.2em;
11. background-color:#c63;
12. color:#fff;
13. text-decoration:none;
14. border:thin outset;

15. font-weight:normal;
16. }
17. #btn_prev:hover,
18. #btn_next:hover,
19. #btn_edit:hover,
20. #btn_add:hover,
21. #btn_remove:hover,
22. #btn_save:hover,
23. #btn_cancel:hover
24. {
25. background-color:#804000;
26. }
27. #btn_prev:active,
28. #btn_next:active,
29. #btn_edit:active,
30. #btn_add:active,
31. #btn_remove:active,
32. #btn_save:active,
33. #btn_cancel:active
34. {
35. border:thin inset;
36. }

Zum Schluss nach das Aussehen der eigentlichen Buttons. Da es ja offiziell Links sind, wird ihre Darstellung komplett geändert. Zusätzlich bekommen sie noch eine hover- und einen active-Effekt, um das Feeling einer Interaktion weiter zu unterstützen.

1. <?xml version="1.0" encoding="utf-8"?>
2. <mitarbeiter>
3. <person id="1">
4. <nachname>Reinsdorf</nachname>
5. <vorname>Enrico</vorname>
6. <email>enrico@re-design.de</email>
7. <telefon>0177 - 2822557</telefon>
8. </person>
9. <person id="2">
10. <nachname>Doe</nachname>
11. <vorname>John</vorname>
12. <email>john@doe.com</email>
13. <telefon>0123 - 1234567</telefon>
14. </person>
15. <person id="3">
16. <nachname>Doe</nachname>
17. <vorname>Jane</vorname>
18. <email>jane@doe.de</email>
19. <telefon>0123 - 1234567</telefon>
20. </person>
21. </mitarbeiter>

Als letztes möchte ich euch noch die XML-Datei zeigen, die ich zur ersten Verarbeitung in der Anwendung benutzt habe. Späte wird diese komplett dynamisch von PHP bzw. in ähnlicher Form von JavaScript, erzeugt. Und spielt in der finalen Version keine große Rolle mehr.

Zum Schluss noch die gerade besprochenen Dateien zum Download:

• Download

Ähnliche Beiträge

• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1
• CSS Import macht Probleme

Die einfache und trotzdem flexible Verwendung der erstellten Klasse lag mir dabei besonders am Herzen.

Verwendung der AJAX-Klasse

Eingebunden und verwendet wird die Klasse über folgende Befehle:

1. <script type="text/javascript" src="ajax.js"></script>
2. <script type="text/javascript">
3. //<![CDATA[
4. function afterLoad(xml)
5. {
6. alert(xml.toString());
7. }
8. ajax.callback = function()
9. {
10. afterLoad(this.responseXML);
11. }
13. ajax.init();
14. ajax.load('getXML.php');
16. //]]>
17. </script>

Wie ihr seht ist diese Verarbeitung sehr einfach einzusetzen. Als erstes muss natürlich die Klasse in das HTML-Dokument eingebunden werden. Dann legt man fest was passieren soll, wie die Daten verarbeiter werden sollen. Zusätzlich sollte man in der eigentlichen Klasse definieren das diese Funktion auch aufgerufen wird, sonst passiert gar nichts. Dazu habe ich einen sogenannten Hock vordefiniert, der dann einfach mit Funktionalität gefüllt wird. Zum Schluß initialisiert man nur nach die Klasse, um das XMLHttpRequest-Objekt anzulegen und läd dann die entsprechende Datei von Server. Fertig ist ist ein flexibles Ladesystem per JavaScript.

Detail zur AJAX-Klasse

Natürlich möchte ich euch auch noch den Inhalt meiner Klasse kurz präsentieren, denn ich denke dadurch wird der Ausbau ud die Erweiterung relativ einfach.

1. var ajax = {
2. req : null,
3. url : null,
4. method : 'GET',
5. async : false,
6. responseXML : null,
7. responseText : null,
8. init : function()
9. {
10. try
11. {
12. this.req = new XMLHttpRequest();
13. }
14. catch(e)
15. {
16. try
17. {
18. this.req = new ActiveXObject('Microsoft.XMLHTTP');
19. }
20. catch(e)
21. {
22. this.req = null;
23. }
24. }
25. if(this.req != null)
26. {
27. this.req.onreadystatechange = this.response;
28. }
29. },
30. load : function(u,m,a)
31. {
32. this.url = u;
33. this.method = m || this.method;
34. this.async = a || this.async;
35. if(this.req != null)
36. {
37. this.req.open(this.method,this.url,this.async);
38. this.req.send();
39. }
40. },
41. response : function()
42. {
43. var a = ajax.req;
44. if(a.readyState == 4)
45. {
46. if(a.status==0 || a.status==200 || a.statusText=='OK')
47. {
48. ajax.responseXML = a.responseXML;
49. ajax.responseText = a.responseText;
50. ajax.callback();
51. }
52. }
53. },
54. callback : function(){}
55. };

Ich habe mich bei der Erstellung der Klasse für Literal-Objekt entschieden, da ich die Verwendbarkeit dadurch als sehr einfach empfinde und das Instanzieren des Objektes entfällt.

Eigenschaften der Klasse

• req
  Hier wird später das XMLHttpRequest-Objekt abgespeichert, welches ja für den Verbindungsaufbau zu Datenquellen nötig ist.
• url
  Um später die URL auch in einem regelmäßigen Verfahren immer wieder abzurufen, wird sie in dieser Eigenschaft abgespeichert.
• method
  Auch wird für weitere Verwendung die Übertragungsmethode als Eigenschaft festgehalten. Mögliche sinnvolle Werte sind in diesem Fall HEAD, PUT und GET, wobei letzteres der Defaultwert ist.
• async
  Um eine synchrone Übertragen der Daten ein zustellen, setzt man diese Eigenschaft auf true.
• responseXML und responseText
  In diesen beiden Eigenschaften wird nach erfolgreicher Übertragung der Daten die Ergebnis gespeichert. Einmal als normale Zeichenkette und einmal als ein XML-Objekt.

Methoden der Klasse

• init()
  Diese Methode sollte immer vor allen anderen Methodenaufrufen benutzt werden, da sie das XMLHttpREquest instanziert und gleichzeitig wird festgelegt, dass die response()-Methode beim Statuswechsel aufgerufen werden soll.
• load(u,m,a)
  Durch die 3 übergebenen Parameter wird als erstes die URL der Datenquelle, die Übertragungsmethode und synchrone oder asynchrone Art festgelegen. Dann wird die Datenquelle geladen.
• response()
  In dieser Methode wird der Status der Übertragung und der Status des Übertragenen überprüft. Im Erfolgsfall werden die übertragenen Daten in die entsprechenen Eigenschaften übertragen und die callback()-Methode aufgerufen.
• callback()
  Dieser Hock dient zur flexiblen Benutzung der Klassen. Mit dem Überschreiben der leeren Funktion bestimmt man extern was mit dem Daten nach dem Laden geschehen soll.

Download der Dateien

• AJAX-Klasse
• HTML-Datei
• Kompletes Beispiel als ZIP-Datei

Ähnliche Beiträge

• dynamische Linkliste bringt mehr Usability
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• AJAX – PHP Schulung in Stuttgart
• AJAX Adressbuch