AJAX Adressbuch – Tutorial Teil 2 5


Nachdem ich gestern erklärt habe wie die HTML-Datei, das dazugehörige CSS-Design und die XML-Datenstruktur aufgebaut sind, werde ich mich nun der clientseitigen Programmierung widmen.

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.


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

5 Gedanken zu “AJAX Adressbuch – Tutorial Teil 2