AJAX + XSL

Kombination von AJAX und XSL

Zielgruppe sind fortgeschrittene StudentInnen und Informatik-Amateure

Kenntnisse von und Erfahrungen mit HTML und Javascript (→ AJAX und DOM-Methoden) werden vorausgesetzt.


Ähnliche Themen auf anderen Seiten


Live AJAX Beispiel



Mit den beiden Buttons Digital und Analog werden die aktuellen XML-Daten mit AJAX angefordert.
Mit XSL-Programmen werden daraus Objekte erzeugt und rechts in diese Webseite eingesetzt.

Mit AJAX erhaltene Objekte:

Mit Klick auf die Buttons werden mit AJAX Daten angefordert, mit XSL und Javascript daraus Objekte erzeugt und an dieser Stelle eingesetzt.

Das Beispiel funktioniert mit allen modernen Browser-Programmen, nicht jedoch mit veralteten Versionen des MSIE-Browsers oder wenn sie Javascript abgeschaltet haben.


Zusätzlich zu den XML-Daten wurde je 1 XSL-Programm mit AJAX angefordert und zur Erzeugung der Objekte aus den Daten verwendet: Mit beiden Programmen werden Objekte gleicher Höhe erzeugt, die man beliebig oft einsetzen kann.

  Im HTML-Quelltext der Webseite werden mit AJAX eingefügte Objekte nicht angezeigt.

AJAX-Diagramm

  Die Daten werden vom Server als → XML-Datei mit 'selbst erfundenen' Elementen (z.B. <year>) geliefert.
XML-Daten sind bewusst allgemein gehalten und enthalten keine Angaben zur Verarbeitung oder Formatierung.

  Zur Verarbeitung der Daten kann man unterschiedliche → XSL-Programme anfordern: Hier stehen 2 Beispiele zur Verfügung.

  Ein XSL-Programm ('Filter') kann den XML-Text in einen beliebigen anderen Text umwandeln - Hier in HTML-Quelltext oder SVG-Quelltext.
Der erzeugte Text ist allerdings nicht sichtbar sondern wird mit einem Javascript-Programm sofort zu einem Objekt verarbeitet. Das fertige Objekt kann man z.B. in eine Webseite einsetzen.

AJAX Server-Programm

PHP-Quelltext

◀  Dieses Programm in der Programmiersprache → PHP wurde mit AJAX angefordert, um die aktuellen XML-Daten (von Datum und Zeit) zu erzeugen.

  Das Programm wird am Server-PC ausgeführt. Man braucht ein PHP-Interpreter-Programm (kostenfrei), um diesen Text in Maschinensprache zu übersetzen und auszuführen.

  An jedem Standard Webserver ist ein PHP-Interpreter installiert, nicht jedoch auf typischen Arbeits-PC. Man kann das Programm daher in einer Text-Datei am eigenen PC speichern, jedoch normalerweise nicht ausführen.

  Mit Funktion header() wird der erzeugte Daten-Typ programmiert. Darauf sollte man sich allerdings nicht verlassen, weil auch die Konfiguration des Webservers eine Rolle spielt. Der Typ wird daher auch im ↓ Javascript-Client-Programm fixiert.

  Der Ausgabe-Text wird in der Variablen $xml zusammengestellt und zuletzt mit Funktion print() oder echo() ausgegeben.


XML-Daten

◀  Diese → XML-Daten wurden mit dem PHP-Programm erzeugt (aktualisieren).

  Jede XML-Datei muss mit der <?xml ?>-Deklaration beginnen.

  Es folgt genau 1 XML-Element - Hier das frei erfundene Element <datim>

  Darin können beliebig viele andere Elemente, Daten, sowie Child-Elemente und deren Daten enthalten sein.


Man kann zur Umwandlung der rohen XML-Daten beliebige XSL-Programme verwenden. Diese Programme sind einfache 'statische' Text-Dateien, die man nur 1mal vom Server anfordern muss und danach beliebig oft auf verschiedene Daten anwenden kann.

XSL-Programme

Programm zur Erzeugung von (Digital)-Text

◄  Dieses → XSL-Programm kann aus ↑ XML-Daten der oben angegebenen Form ein HTML-'Snippet' erzeugen, d.h. einen kleinen Ausschnitt (Schnipsel) von HTML-Quelltext.

  Zum Ausführen eines XSL-Programms braucht man ein XSL-Interpreter-Programm. Ale modernen Browser enthalten ein solches Programm bereits in der Grund-Ausstattung.

  XSL ist selbst Mitglied der → XML-Familie und muss daher mit der <?xml ?>-Deklaration beginnen.

  Danach folgt die Angabe des XML-Namespace (hier: XSL) und als erste XSL-Anweisung die Bekanntgabe des Typs der zu erzeugenden Daten (hier: HTML).

  Das Programm (template) enthält - so wie bei XML üblich - Elemente (tags) und Daten.
 Die XSL-Elemente erkennt man an der Vorsilbe (Prefix) <xsl:...>
 Die XSL-Daten bestehen hier aus HTML-Text, z.B. aus <br>-Elementen und aus HTML-Daten, z.B. aus dem Wort Zeit

  Mit den Elementen <xsl:value-of> werden Elemente der zu verarbeitenden XML-Daten adresssiert und - in diesem Fall - einfach in den erzeugten Ausgabe-Text eingefügt.


Der Ausgabe-Text des XSL-Programms wird als Eingangs-Text für den HTML-Prozessor des Browsers verwendet: Dieser erzeugt daraus ein Element der Webseite (hier: 2 Zeilen Text).


Programm zur Erzeugung einer Objekt-Grafik (Analog-Uhr)

◄  Dieses → XSL-Programm kann aus ↑ XML-Daten der oben angegebenen Form ein SVG-ObjektGrafik-'Snippet' erzeugen.

  Als Ausgabe-Typ <xsl:output method> ist ebenfalls HTML angegeben, weil man ab Version → HTML-5 <svg>-Grafik-Elemente direkt (→ Inline) in den HTML-Quelltext einfügen kann.
  Die XSL-Daten beginnen daher mit <svg> und enden mit </svg>
  Dazwischen werden SVG-Elemente (z.B. <circle> oder <line>) und SVG-Daten erzeugt.

  Die XML-Daten der Elemente <year> ... <day> werden von diesem XSL-Programm nicht verwendet.

  Mit den XML-Daten der Elemente <hour> ... <second> werden hier Attribute der Form transform="rotate()" erzeugt. Die 3 Zeiger sind als <line>-Elemente programmiert und werden mit diesen Attributen um den jeweils berechneten Winkel in Grad gedreht.


Dieses XSL-Programm erzeugt mit den XML-Daten diesen Ausgabe-Text: Der Ausgabe-Text des XSL-Programms wird als Eingangs-Text für den HTML-Prozessor des Browsers verwendet:
Dieser erzeugt daraus ein Element der Webseite (hier: eine Objekt-Grafik).

Die beiden Beispiele haben allerdings nur geringen praktischen Wert:

  Die digitale Zeit steht auch ohne Server an jedem Arbeits-PC zur Verfügung. Man kann auch die (meist besser verwaltete) Zeit des Server-PC zur Anzeige verwenden, dazu gibt es jedoch Methoden, die den Server weniger belasten.

  Wenn man die Zeit mit einer Analog-Uhr anzeigen will, dann verwendet man besser eine SVG-Datei mit einem eigenen Javascript-Programm: Damit werden die Zeiger laufend nachstellt und trotzdem der Server nur 1mal belastet. (Beispiel → Analog-Uhr)


Auf dieser Seite wird das Wort 'Programm' für XSL-Dokumente verwendet. Es ist umstritten, das Wort mit dieser Bedeutung zu benutzen. Sie sind daher eingeladen, dafür auch andere Bezeichnungen zu verwenden, z.B.
Methode, um unter Verwendung von Variablen, Anweisungen, Bedingungen, Schleifen und anderen typischen Programm-Elementen ein Informatik-Produkt herzustellen...

Javascript-Programme


Die hier gezeigten Beispiele sind zum besseren Verständnis gekürzt.
Alle Original-Programme sind ungekürzt im Quelltext dieser Webseite enthalten.


HTML
<button onclick="digital_demo()">
Digital-Beispiel
</button>
Javascript
function digital_demo() {
ajax_xml('ajax_hms_server.php');
ajax_xsl('hms_digital.xsl');
}


Anforderung der XML-Daten:
function ajax_xml() {
var xml_obj = res_xml_obj = null;
xml_obj = new XMLHttpRequest();
var xml_tevt = window.setTimeout('ajax_cancel()',4000);
xml_obj.onreadystatechange = function() {
if(xml_obj.readyState==4 && xml_obj.status==200) {
window.clearTimeout(xml_tevt);
result_xml_obj = xml_obj.responseXML;
xml_obj.abort();
ajax_receiver();
}
}
xml_obj.open('GET',xml_path,true);
xml_obj.send();
}
Timeout:
function ajax_cancel() {
try{
xml_obj.abort();
window.clearTimeout(xml_tevt);
}
catch(e) {}
try{
xsl_obj.abort();
window.clearTimeout(xsl_tevt);
}
catch(e) {}
console.log('ajax timeout');
}



HTML: In dieses Element wird das Ergenis-Objekt eingefügt
<div id="result"></div>

Javascript
function ajax_receiver() {
if(result_xml_obj && result_xsl_obj) {
try{
var xProc = new XSLTProcessor();
xProc.importStylesheet(result_xsl_obj);
var result_obj = xProc.transformToFragment(result_xml_obj,document);
var n = document.getElementById('result');
n.appendChild(result_obj);
}
catch(e) {console.log('XSLTProcessor error: '+e);}
}
}

Vor- und Nachteile


Wenn das Server-Programm seine Daten als einfachen Text oder JSON-Objekt sendet, dann spart man noch mehr Resourcen. In diesem Fall muss man allerdings auf XSL verzichten.


Die gleiche Ersparnis wird genutzt, wenn man - wie auf dieser Seite möglich ist - aus den gleichen Daten mehrere unterschiedliche Produkte erzeugen lässt.


Im Einzelfall ist allerdings ein klassisches PHP-Programm meist schneller, d.h. wenn es darum geht, 1 HTML-Element oder 1 ObjektGrafik für 1 Client und 1maligen Zugriff zu liefern.


Man muss jedoch erst einmal funktionierende Javascript AJAX-Programme haben. Meist werden fertige Bibliotheken verwendet, die allerdings gewaltigen (100...1000fachen Umfang dieser Beispiele) haben und kaum zu verstehen oder zu ändern sind.


Es ist schwierig, AJAX + XSL mit den gewohnten Mitteln der HTML-Entwicklung zu debuggen. Das liegt am schnellen Ablauf und daran, dass die mit XSL erzeugten Zwischen-Produkte nicht aufscheinen.
Mit geeigneten Werkzeugen kann man auch diese Technologie debuggen.