AJAX-Klasse, einfach gebaut 2


Bei der Erstellung von moderen Websites spielt AJAX eine immer wichtigere Rolle. In diesem Tutorial möchte ich euch eine kleine JavaScript-Klasse vorstellen. Diese Klasse kann dann Grundlage für weiter tolle Webanwendungen sein kann.

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. }
  12. ajax.init();
  13. ajax.load('getXML.php');
  14. //]]>
  15. </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


Schreibe einen Kommentar

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

2 Gedanken zu “AJAX-Klasse, einfach gebaut