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

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