AJAX steht für Asynchronous Java Script And XML. AJAX ist keine neue Programmiersprache, sondern eine sinnvolle und kreative Anwendung bestehender Techniken: JavaScript, XML/ HTML sowie DOM. Neu ist vor allem die Möglichkeit, zwischen dem Webclient (Browser) und Webserver einen asynchronen Datenaustausch durchzuführen. Die HTML-Seite wird dabei nicht komplett neu geladen und aufgebaut. Stattdessen werden lediglich die relevanten Inhalte oder Nutzdaten nachgeladen.

Die AJAX-Komponenten

Bei JavaScript handelt es sich um eine clientseitige Scriptsprache, die von Netscape entwickelt wurde, um HTML-Seiten dynamisch zu gestalten. Bei JavaScript kann der Programmcode innerhalb eines HTML-Dokumentes stehen oder aber als externe Datei im Dateikopf (Head) eines HTML-Dokumentes eingebunden sein. Mittels JavaScript lässt sich nun der Webserver im Hintergrund aufrufen und Daten anfordern (Request). Der Webserver beantwortet (Response) diese Anforderung und stellt die geforderten Daten zur Verfügung. Das empfohlene Austauschformat der Daten ist dabei XML. Schließlich ist die eXtensible Markup Language inzwischen das am häufigsten verwendete Austauschformat. In XML erstellte Dateien erreichen damit die größte Kompatibilität mit Applikationen, die in Sprachen wie C/C++ oder PHP programmiert wurden.

XML-Dokumente sind textbasiert und durch Tags strukturiert und hierarchisch gegliedert. Kernstück und verantwortlich für das Nachladen der Web-Seiten ist das API (Application Programming Interface) XMLHttpRequest, das in JavaScript als Objekt zur Verfügung steht. Das vom World-Wide-Web-Consortium (W3C) standardisierte DOM (Document Object Model) ist eine für AJAX-Anwendungen wichtige Programmierschnittstelle. Mittels DOM lassen sich Webseiten dynamisch verändert. DOM steht in JavaScript zur Verfügung und repräsentiert alle Elemente eines HTML-Dokuments und stellt sie in einer Baumstruktur dar. Über JavaScript kann somit auf jedes Element der Webseite zugegriffen und verändert werden, beispielsweise die Farbe, Animation oder Größe eines Visualisierungsobjekts. Es können aber auch neue Elemente innerhalb des HTML-Dokumentes erstellt werden - z.B. Bilder, Texte, Tabellen und Formulare. AJAX ist kostenfrei, wie alle Browsertechnologien betriebssystemunabhängig und steht in modernen Browsern bereits ohne PlugIn zur Verfügung. Speziell im Internet-Explorer bis einschließlich Version 6 muss die ActiveX-Schnittstelle sowie bei allen Browsern generell JavaScript aktiviert sein.

Licht und Schatten

Kleiner Unterschied, große Wirkung: Durch die AJAX-Engine erfolgt die Umwandlung der XML-Daten in HTML/CSS-Daten erst im Web-Browser.

Diese Funktion bringt vor allem bei der Web-Visualisierung eine Reihe von Vorteilen: Visualisierunsseiten können automatisch Daten aktualisieren. Bislang mussten Bediener dazu aktiv die Seite neu anfordern. Deswegen wird AJAX die gewohnte Bedienphilosophie von Webseiten verändern. Die Internet-Welt spricht dabei schon von Desktop-Feeling. Mit AJAX erstellte Formulare können beispielsweise die vom Benutzer eingetragenen Daten bereits bei der Eingabe validieren. Diese Formulare können theoretisch sogar ohne Sendebutton aufgebaut sein. Die Anwendung erkennt, wenn alle benötigten Felder ausgefüllt sind und überträgt daraufhin die Daten. Speziell bei Dateneingaben wird es aber auch in Zukunft wohl nicht ohne eine Bestätigung gehen. Nachladen statt komplettem Neuladen schont die Ressourcen des Web-Servers, da die Webseite nur noch beim ersten Aufruf als Ganzes übertragen wird. Danach überträgt der Web-Server lediglich das XML-Dokument, sofern es vom Client angefordert wurde.

Dies sorgt für deutlich kürzere Reaktionszeiten: Eine typische Webseite hat inklusive aller Grafiken ein Größe von rund 65 kByte. Die XML-Daten, die bei einem Request nachgeladen werden, dagegen nur rund 3 kByte. AJAX aktualisiert die Webseite rund 20-mal schneller als bisher. Für den Anwender ist die Betriebssystem- Unabhängigkeit und freie Wahl des Browsers der entscheidende Vorteil. Für den Programmierer gestalten sich die unterschiedlichen Interpretationen einer HTML-Seite allerdings als Problem. Denn verschiedene Browser-Hersteller halten sich nicht an die W3C-Standardisierungen. Daran ändert auch AJAX nichts. Die unterschiedliche Auslegung ist in abweichenden Darstellungen und Anordnungen der aufgerufenen Webseiten zu erkennen. Microsofts Internet Explorer in den Versionen 5 und 6 unterstützt kein XMLHttp- Request, stattdessen wird die ActiveXKomponente XMLHTTP verwendet. Für den Programmierer bedeutet dies zusätzliche Arbeit, da sowohl für Microsoft als auch für alle übrigen Browserhersteller ein eigenes Kommunikationsobjekt erzeugt werden muss. Dieses Objekt ist verantwortlich für die Kommunikation mit dem Webserver.

Mit der Version 7 implementiert auch Microsoft die XMLHttp- Request-API im Internet Explorer. Dies zeigt, dass auch Microsoft die Zukunft in der AJAX-Technik sieht. Aktuell unterstützen die folgenden Browser AJAX:

• Microsoft Internet Explorer ab Version 5.0 und alle Browser, die darauf basieren,
• Microsoft Internet Explorer ab Version 7.0,
• Mozilla Firefox ab Version 1.0 und alle Browser mit der gleichen Engine (Mozilla/Gecko),
• Opera ab Version 7.6,
• Apple Safari ab Version 1.2,
• Netscape ab Version 7.1,
• Konquerer ab Version 3.3 und andere auf KHTML basierten Browser.

Zudem gibt es für PDAs und Mobiltelefone von Opera und Nokia bereits AJAXkompatible Browser.

AJAX in der Automation

Beim Energiemanagement eines Unternehmens wird die zentrale Visualisierung über Web@SPS und AJAX aus den dezentral vorgehaltenen Visualisierungsseiten generiert.

Die Entwicklungen im Bereich Web-basierter Automation sind in den letzten Jahren in den Vordergrund gerückt. Dies zeigt unter anderem auch das ZVEI-Projekt Webmation (siehe auch Computer & AUTOMATION 2006, Heft 10, S. 42ff). Die Hersteller klassischer Visualisierungssoftware verfolgen verständlicherweise einen mehr oder weniger proprietären Ansatz. Diese Unternehmen werden sich vermutlich nicht an der Einführung von AJAX im industriellen Umfeld beteiligen, dessen Chancen gerade in der Offenheit und Interoperabilität liegen. Als erster Steuerungshersteller setzt Brangl Electronics AJAX in ihrer Web@SPS ein. Zielsetzung war, eine einfach zu programmierende Steuerung zu entwickeln, die ohne kommerzielle Werkzeuge auskommt. Deswegen wird der Programmcode mit einem Editor in eine Textdatei geschrieben.

Die Visualisierung lässt sich über beliebige HTML-Editoren erstellen und in den integrierten Web-Server der Steuerung laden. Damit sind Kauf und Pflege einer teuren Programmier- und Visualisierungssoftware hinfällig. Bei der Projektierung kommt der Automatisierer bei dieser Lösung allerdings nicht direkt mit AJAX in Verbindung. Für die AJAX-Integration gibt es eine Engine, die im HEAD-Bereich des zu erstellenden HTML-Dokuments lediglich mit einem Link zu implementieren ist.

Die Problematik der unterschiedlichen Browser-Interpretationen wurde bei der Erstellung der AJAX-Engine berücksichtigt. Somit werden alle aufgeführten Browser unterstützt. Für den schnellen Einstieg werden fertige Visualisierungsseiten in HTML mitgeliefert. Der Datenaustausch zwischen Web-Server (SPS) und Client (Browser) erfolgt im XML-Format. Innerhalb der XML-Struktur sind die aktuellen Variablen der Steuerung enthalten. Die Struktur der XMLDatei ist statisch. Die AJAX-Engine analysiert (parst) die XML-Dokumente und stellt die darin enthaltenen Informationen wie Elemente, Attribute usw. mittels adressiertem ID-Tag an die gewünschte Position in der Webseite.

AJAX im Einsatz

In einem Industriebetrieb wurde mithilfe des Web@SPS ein Energiemanagement realisiert. Ziel dieses Vorhabens war die Dämpfung der Spitzenleistung um 20 %, die als Leistungskosten die Stromrechnung maßgeblich beeinflussen. Dazu wurde zunächst der gesamte Leistungsbedarf analysiert und Maßnahmen abgeleitet wie die gegenseitige Verriegelung großer Stromaufnehmer: Der Heizkessel sowie die Lüftungsanlage sollen nicht gleichzeitig starten. Realisiert wurde dies über Web@SPSen, die neben der Verriegelung zusätzlich eine Datenloggerfunktion über die Stromaufnahme übernimmt. Ebenso werden die Kompensationsanlage und Photovoltaik-Anlage überwacht.

Der aktuelle Energieverbrauch sowie die Zustände der Anlagen können über die mit AJAX realisierte Visualisierung von jedem PC aus betrachtet werden. Jede Steuerung hat dazu eine Detail-Visualisierung ihres Anlagenbereichs integriert. Die Darstellung der kompletten Anlage wurde über Frames, das heisst verschachtelte Seiten, realisiert. Die einzelnen Webseiten von verschiedenen Webservern zu einer übergeordneten Webseite zusammenbringen, ist zudem eine besondere Stärke der HTML- und AJAX-Technik. Für zukünftige Erweiterungen der Anlage kann die HTML-Visualisierung mit AJAX-Kommunikation im Vergleich zu Java-Applets oder Flash leicht angepasst werden.

Autor:
Wolfgang Brangl ist Geschäftsführer der Brangl Electronics in Dietmannsried.