Clientseitige Ajax Frameworks

Wozu clientseitige Ajax Frameworks ?

Mit der Funktionalität die wir bis jetzt benutzt haben lässt sich schon eine ganze Menge machen. Gekoppelt an ein paar JavaScript Funktionen wie z.b. setInterval(func, 5000) und clearInterval könnten wir schon mit relativ wenig Aufwand ein kleines Framework mit Polling Anfragen realisieren.

Diese Idee hatten auch schon einige Leute vorher und deshalb gibt es eine große Zahl an Frameworks die immer wieder anfallende Aufgaben für uns erledigen.

Ein sehr bekanntes JavaScript Framework das auch eine Ajax Unterstützung bietet ist Prototype.

Das Prototype JavaScript Framework

Unter http://www.prototypejs.org/ ist die Webseite des Projekts zu finden. Dort findet man auch die jeweils aktuelle Version des Prototype Frameworks sowie eine Dokumentation.

Prototype ist ein JavaScript Framework um die Entwicklung von Webanwendungen zu erleichtern. Es bietet eine Ajax Unterstützung und einige andere Intressante Funktionen.

Die Datenübertragung über JSON wird direkt unterstützt ohne das man eine zusätzliche Bibliothek benutzen muss.

JSON Unterstützung in Prototype

JSON wird in Prototype direkt unterstützt. Wenn der Server im HTTP Header das X-JSON Feld setzt, übergibt Prototype den geparsten JSON String automatisch an die CallBack Funktion in der Ajax Funktion als zweiten Parameter.

Grob skizziert sieht das so aus:

Der Server sendet:

header('X-JSON: '.trim(json_encode($result)));

Mit Prototype DOM Elemente manipulieren

Prototype bietet intressante Möglichkeiten DOM Element zu manipulieren.
Über die $() Funktion kann ein Element mit einer ID angesprochen werden.

Die meissten Methoden geben das Element selbst zurück. Dadurch ist eine mehrfache Anwendung von Methoden auf das gleiche Objekt hintereinander möglich:

$('mydiv').addClassName('active').show();

Dieses Beispiel würde dem "div" mit der Id "mydiv" die CSS Klasse "active" hinzufügen und würde es sichbar machen (Hinweis: mit toggle() ist abwechselndes sichtbar und unsichtbarmachen möglich).

Der Client bekommt in der Ajax CallBack Funktion das Ergebnis bereits dekodiert zurück

onSuccess: function(nom, json){
      //nom ist der nomale response text
      //json der automatische jsoin text
      $('dollar').value = json.dollar;
      $('pound').value = json.pound;
},

Observer

Im Bereich von Events hat Prototype ebenfalls eine Menge zu bieten. So kann man Elemente nach auftretenden Events überwachen.

Beispiel:

new Event.observe(
    'myword',
    'click',          
    function(){
          alert('hello');
    },
    false
);


Dieser Observer würde beim Anklicken des Elements mit der Id 'myword' , 'hello ausgeben'.

 

Navigation