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

Warum macht es Sinn eine solche Linkliste zu erstellen? Nun fast jeder der sich mit benutzerfreundlichen Websites auseinandersetzt weiß, dass Links innerhalb von Fließtext den Lesefluss stören. Außerdem kann es möglich sein Leser zu verlieren, wenn sie den Links innerhalb des Textes folgen und nicht wieder zurück kommen. Es ist besser erst am Ende des Textes alle im Text empfohlenen Links aufzulisten.

Leider kann es sehr mühselig sein, die Passagen im Text mit Fußnoten zu kennzeichnen und dann im unteren Bereich eine Linkliste mit Ankerpunkten zu erstellen. Sowas kann wunderbar JavaScript mit einem Automatismus übernehmen.

Einbindung des Link-Generators

Ich habe mir überlegt, dass die Einbindung möglichst einfach sein sollte. Deshalb habe ich ein externes Script geschrieben, welches eine Variable mit einem Literal erzeugt. Dieses Script muss nur in die eigene Website eingebunden werden und ein Event festgelegt werden, wann die Abarbeitung beginnen soll.

1. <script src="RED_LinkGenerator.js" type="text/javascript"></script>
2. <script type="text/javascript">
3. //<![CDATA[
4. window.onload = function()
5. {
6. var content = document.getElementById('content');
7. RED_LinkGenerator.init(content);
8. RED_LinkGenerator.writeList();
9. }
10. //]]>
11. </script>

Als Übergabeparameter für die Initialisierung wird der Container gewählt in dem die Links enthalten sind. Hier z.B. der <div>-Container mit der ID content. Als nächstes muss nur noch die writeList()-Methode ausgeführt werden und das Script erzeugt am Ende des übergebenen Containers eine sortierte Liste.

Ich habe extra diesen Vorgang in 2 Schritte unterteilt, um flexibel zu bleiben, denn ich kann mir vorstellen später eine Methode zu schreiben, die in einen komplett anderen Container die Liste schreibt oder auch einfach nur den Array zurückgibt.

Der Link-Generator selbst

Ich werde jetzt hier nicht jeden einzelnen Schritt erklären. Ich versuche mich auf die wichtigsten Punkte zu beschränken.

Die Initialisierung

Hier wird einfach nur der übergebene Container abgespeichert.

1. init: function(content)
2. {
3. this.container = content;
4. },

Die Methode writeList()

1. writeList: function()
2. {
3. var nodes = this.container.getElementsByTagName('A');
4. var ol = document.createElement('OL');
6. for(var n=nodes.length-1, f=nodes.length; n>=0; n--, f--)
7. {
8. var parent = nodes[n].parentNode;
10. var a = document.createElement('A');
11. a.setAttribute('href', '#a_'+n);
12. a.appendChild(document.createTextNode('['+f+']'));
14. var foot = document.createElement('SUB');
15. foot.appendChild(a);
17. var span = document.createElement('SPAN');
18. span.appendChild(document.createTextNode(nodes[n].firstChild.nodeValue));
19. span.appendChild(foot);
21. var li = document.createElement('LI');
22. var a = document.createElement('A');
23. a.appendChild(document.createTextNode(nodes[n].firstChild.nodeValue));
24. a.setAttribute('href', nodes[n].href);
25. a.setAttribute('id', 'a_'+n);
26. li.appendChild(a);
28. this.list.push(li);
30. parent.insertBefore(span, nodes[n]);
31. parent.removeChild(nodes[n+1]);
32. }
33. for(var n=this.list.length-1; n>=0;n--)
34. {
35. ol.appendChild(this.list[n]);
36. }
37. this.container.appendChild(ol);
38. }

In Zeile 15 werden aus dem Text alle Link gesucht und in Zeile 16 schon mal ein HTML-Knoten für die sortierte Liste angelegt.

Danach wird über eine for-Schleife alle Link-Knoten von hinten nach vorne verarbeitet, die Erklärung folgt später. Dabei wird als Erstes ein Verweis auf den Eltern-Knoten gespeichert und dann ein Link als Fußnote generiert (Zeile 22 – 27).

Diese Fußnote wird zusammen mit dem Linktext in einen neuen <span>-Tag gestellt (Zeile 29 – 31).

Danach wird der Listeneintrag mit einer Kopie des Orginallinks erzeugt (Zeile 33 – 39). Dieser Listeneintrag wird erstmal in einem Array zwischengespeichert.

Anschließend wird der Span-Knoten vor dem eigentlichen Link eingesetzt (Zeile 42) und der Link gelöscht (Zeile 43). Dabei muss aber darauf geachtet werden, dass in der Variablen nodes ein Verweis auf alle Links innerhalb des Container ist und wenn wie hier ein neuer Link, die Fußnote, hinzukommt auch die Anzahl der Links innerhalb des Textes steigt. Deshalb muss beim Löschen n+1 gerechnet werden. Durch diese dynamische Änderung der Menge der Links im Array hat mich auch veranlasst von hinten nach vorne zu arbeiten, denn dadurch wird der Löschvorgang vereinfacht.

Zum Schluss muss nur noch die geordnete Liste erzeugt werden. Da aber die Links im Array in der verkehrten Reihenfolge stehen, habe ich wieder von hinten nach vorne gearbeitet, um die richtige Reihenfolge zu bekommen (Zeile 45 – 48).

Fazit

Ich hoffe ich konnte mit diesem kleine Beispiel zeige, wie JavaScript das Arbeiten im Web erleichtern kann. Keine Ahnung ob das schon ein Ansatz von Web 2.0 ist, aber ich finde der Automatismus kann sich schon sehen lassen.

• HTML-Datei
• JavaScript-Datei
• komplettes Set

Ähnliche Beiträge

• AJAX-Klasse, einfach gebaut
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1