AJAX und ASP.NET

Veröffentlicht: 25. Jan 2006

Von Jürgen Mauerer

AJAX (Asynchronous Javascript And XML) ist derzeit bei Web-Entwicklern das Wort der Stunde. Es beschreibt einen speziellen Ansatz für Web-Applikationen, bei dem Daten zwischen Client und Server mittels JavaScript asynchron ausgetauscht werden können, ohne dass die gesamte Web-Seite neu geladen werden muss. Dieses Feature zeigt, welche Technologien hinter AJAX stecken und wie Entwickler ASP.NET und AJAX kombinieren können. Zugleich gibt es Einblicke in die neue ASP.NET-Technologie mit dem Codenamen „Atlas“, die den AJAX-Ansatz aufgreift und erweitert.

Auf dieser Seite

 AJAX – ein Überblick
 AJAX-Technologien und -Prozessfluss
 AJAX und ASP.NET
 Microsoft-Projekt “Atlas”: ASP.NET 2.0 und AJAX

AJAX – ein Überblick

AJAX erlebt derzeit in der Entwicklergemeinde als Ansatz zur Gestaltung fortschrittlicher, dynamischer Web-Oberflächen einen regelrechten Boom. AJAX ist ursprünglich eine Abkürzung für Asynchronous JavaScript And XML, umfasst aber mittlerweile eine Menge von Methoden und Werkzeugen, die keineswegs auf JavaScript und XML beschränkt sind (siehe nächstes Kapitel). Die technologischen Grundlagen von AJAX waren bereits vorher bekannt und wurden in Projekten intensiv eingesetzt. Mit der AJAX-Bewegung wird dieser Ansatz nun gewissermaßen salonfähig.

Bei AJAX handelt es sich also nicht um eine neuartige Technologie, sondern um einen Sammelbegriff für bestimmte Techniken zum effizienten Einsatz bestehender Funktionalität, die das World Wide Web schon heute bereitstellt (z.B. DOM, XMLHttpRequest, CSS etc.). So verbirgt sich hinter allerlei existierenden Webseiten bereits eine große Portion AJAX-Technologie, ohne dass dies dem Betrachter unmittelbar bewusst wird.

Der Begriff AJAX geht auf den im Februar 2005 veröffentlichten Artikel „AJAX: A New Approach to Web Applications“ von Jesse James Garrett zurück. Er beschreibt darin die Technologie und definiert sie erstmals in der Öffentlichkeit mit der eingängigen Abkürzung AJAX. Seitdem ist AJAX in aller Munde. Jetzt kann man über AJAX reden, ohne Wortungetüme wie „Remote Scripting mit JavaScript+CSS+DOM“ bemühen zu müssen. Wichtig ist, dass AJAX keine neuen Browser Plugins (oder gar neue Browser) erfordert und somit das standardbasierte Web nicht verlässt.

Was also sind die Vorteile von AJAX? Da AJAX bei der Kommunikation zwischen Browser und Web Server ansetzt und via JavaScript asynchron XML-Nachrichten austauscht, muss der Benutzer nicht unnötig lange warten, bis die Seite nach einem Mausklick neu lädt. Die Server-Last verringert sich zudem, da Seiteninhalte durch neue Daten vom Server geändert werden können, ohne die Seite komplett laden zu müssen. Zudem bleibt beim Nachladen der Daten naturgemäß der aktuelle Zustand auf der Gesamtseite erhalten (beispielsweise die Position des Cursors oder der Inhalt von Elementen).

Im Prinzip bedeutet AJAX auch einen Paradigmenwechsel, da Web-Anwendungen entstehen, die sich immer mehr wie Desktop-Anwendungen anfühlen und verhalten. Schließlich ist bei AJAX die Kommunikation nicht auf vom Benutzer ausgelöste Ereignisse beschränkt. Der Browser schickt oft asynchron Daten an den Server, ohne dass der Benutzer es merkt. Zudem lassen sich Oberflächen schaffen, die Desktop-Applikationen ähneln. Hierfür entstehen momentan Bibliotheken, wie AJAX Widgets, die die Entwicklung von komfortablen WUIs - Web User Interfaces - unterstützen.

Mittlerweile gibt es viele Webseiten mit AJAX-Technologie, zum Beispiel von Google (Google Suggest, Google Maps, Google Mail) oder auch von Microsoft (VirtualEarth-Projekt). Bei Google Suggest handelt es sich um eine Variante des Google-Suchdienstes mit einem überarbeiteten Interaktionsmodell. Auf den ersten Blick unterscheidet sich die Eingangsseite des neuen Dienstes nicht von der gewohnten Google-Suche. Sobald man jedoch beginnt, die ersten Buchstaben für einen Suchbegriff einzugeben, liefert die Anwendung bereits mögliche Schlagwörter und Schlagwort-Kombinationen samt der jeweiligen Anzahl der Treffer dazu.

Wie vielfältig AJAX-Anwendungen sein können, zeigt das VirtualEarth-Projekt von Microsoft. VirtualEarth ist Microsofts Antwort auf Google Maps. Der Nutzer kann hier Kartendaten und hoch auflösende Satellitenbilder der Erde anschauen und nach Geschäften, Restaurants oder Tankstellen suchen, die auf der Karte angezeigt werden. Klassische Kartenanwendungen sind mit recht langen Wartezeiten verbunden, bis die Karte jeweils herunter geladen ist. VirtualEarth hingegen erledigt das Nachladen der Karten vom Server im Hintergrund, ohne dabei den Benutzer aufzuhalten. Es steht also das A am Anfang von AJAX im Vordergrund, die Asynchronität.

Doch trotz aller Vorteile ist zu bedenken, dass der Einsatz von AJAX nicht für jede Web-Seite ratsam ist. Denn AJAX setzt voraus, dass JavaScript aktiviert ist. Damit scheidet die Verwendung von AJAX für normale Web-Seiten, die auch ohne JavaScript benutzbar sein müssen, weitgehend aus. Vorrangiges Einsatzgebiet für AJAX sind Web-Seiten mit Applikationscharakter, z.B. in Intranets. Beim Internet Explorer setzt AJAX voraus, dass die Ausführung von ActiveX-Objekten erlaubt ist. Grund: Microsoft hat die XMLHttpRequest-Klasse als ActiveX-Erweiterung in den Internet Explorer implementiert. Manche Benutzer haben diese Option jedoch aus Sicherheitsgründen abgeschaltet. Und ohne XMLHttpRequest würde AJAX auf diesen PCs gar nicht funktionieren.

AJAX – ein neuer Ansatz bei Web-Anwendungen
Mit diesem Aufsatz vom Februar 2005 (Originaltitel: “AJAX – A New Approach to Web Applications”) hat Jesse James Garrett, ein Mitarbeiter der Agentur Adaptive Path, den Hype um AJAX ins Rollen gebracht. Er hat quasi den Namen AJAX geschaffen, um so diverse Softwaretechnologien unter einem Begriff zu subsumieren. In englischer Sprache.

Online-Buch zu AJAX
Olaf Bergmann und Carsten Bormann bieten in diesem kostenlosen Online-Buch eine Einführung in das spannende und gleichermaßen neue wie bekannte Feld von AJAX und verwandte aktuelle Methoden des Web Designs.

AJAX auf Wikipedia
Eine sehr gute Einführung in AJAX bietet der Artikel im freien Lexikon Wikipedia.

AJAX-Patterns
Auf dieser englischsprachigen Web Site finden Entwickler ausführliche Informationen zu AJAX mit vielen Code-Beispielen.

AJAX-Technologien und -Prozessfluss

Bei AJAX nutzen Entwickler Client Scripts, um Web Server-Anwendungen mittels eines XML-basierten Protokolls (XMLHTTP) aufzurufen. Es handelt sich dabei nicht um eine neuartige Technologie, sondern um einen Sammelbegriff für bereits bestehende Web-Techniken. Dazu gehören JavaScript, DHTML, DOM (Document Object Model) und XMLHTTP. JavaScript und DHTML lassen Anwendungen auf Ereignisse wie Mausklicks reagieren und sind insbesondere für die dynamischen Elemente auf Web-Seiten zuständig.

Das Document Object Model (DOM) ist eine Programmierschnittstelle (API) für den Zugriff auf HTML- oder XML-Dokumente. Es besteht im Rahmen der objektorientierten Programmierung aus einem Satz von Klassen zusammen mit deren Methoden und Attributen. Es erlaubt Anwendungen dadurch, den Inhalt, die Struktur und das Layout eines Dokuments dynamisch zu verändern.

XMLHttpRequest dient dem Transfer von beliebigen Daten über das Protokoll HTTP und kann aus JavaScript, JScript und VBScript heraus verwendet werden. Die Technik steht im Internet Explorer seit Version 5.0 als ActiveX-Objekt zur Verfügung. Bei XMLHttpRequest sind verschiedene Anfragemethoden (unter anderem GET, POST, HEAD, PUT) möglich. Wenn eine Anfrage XML-Daten liefert, kann XMLHttpRequest diese alternativ als Text oder als DOM-Baumstruktur zurücksenden.

XMLHttpRequest ermöglicht es Skripten auf Web-Seiten, Daten dynamisch vom Web Server abzurufen, ohne dass dazu die Seite neu geladen werden müsste. Dies war zuvor nur durch den Einsatz unsichtbarer Frames oder IFrames möglich. Da XMLHttpRequest Anfragen asynchron verarbeiten kann, muss ein Script nicht warten, bis die Anfrage beantwortet ist, sondern kann solange andere Aufgaben abarbeiten.

Bei traditionellen Web-Anwendungen läuft der Prozessfluss nach dem synchronen Request/Response-Schema ab. Hier wird bei jeder Benutzeraktion eine zugehörige HTTP-Anfrage (Request) an den Server gerichtet. Verzögert sich die erforderliche Antwort (Response) des Servers oder bleibt diese gar aus, entstehen unweigerlich längere Wartezeiten oder sogar Brüche im Ablauf der Anwendung.

Bei AJAX-Anwendungen wird für jede Benutzeraktion, die normalerweise eine HTTP-Anfrage erzeugen würde, ein JavaScript-Aufruf erzeugt, der an die AJAX-Laufzeitumgebung delegiert wird. Die AJAX Engine bewältigt alle Antworten auf Aktionen der Nutzer, die keine Verbindung zum Server erfordern. Dazu gehören das Validieren und Ändern von Daten, die sich im Speicher befinden, oder sogar das Navigieren zwischen einzelnen Elementen der Web-Seite.

Benötigt die AJAX Engine Daten vom Server, um eine bestimmte Aktion erfolgreich durchzuführen (z.B. Laden neuer Daten, Nachladen einzelner Bausteine der Benutzeroberfläche), startet sie eine asynchrone Anfrage an den Server, etwa in Form eines XML-Dokuments. Dadurch wird die Interaktion des Benutzers mit der Oberfläche nicht unterbrochen. Zudem fordert die AJAX Engine bei der Anfrage nur die Daten vom Server an, die sie auch tatsächlich benötigt.

Auf Grund seiner Asynchronität erlaubt AJAX das parallele Verschicken von HTTP Requests. Nach dem Absenden läuft die Javascript-basierte Oberfläche weiter, und erst bei Eintreffen der HTTP-Antwort wird die Methode am jeweiligen Objekt aufgerufen (Event Handling). Um mehrere Requests parallel abzusetzen, ist es notwendig, für jeden Request eine eigene Callback-Methode zu definieren und dem jeweiligen Objekt zuzuweisen. Die so initialisierten Objekte können zu einem beliebigen Zeitpunkt eine Verbindung öffnen und einen Request absenden.

Community-Seite für AJAX-Entwickler
Auf der Webseite AJAXdeveloper.org finden AJAX-Entwickler eine gute Community Web-Seite mit neuesten Nachrichten zum Thema AJAX, Verweisen zu interessanten Artikeln und Diskussionsforen. In englischer Sprache.

AJAX Developer Center bei Mozilla
Auf dieser englischsprachigen Web Site finden Entwickler sehr gute Informationen zum Thema AJAX in Form von technischen Artikeln oder Verweisen auf andere AJAX-relevante Webseiten.

AJAX-Linksammlung
Die englischsprachige Seite AJAX Matters bietet viele Links zu Artikeln und Anwendungsbeispielen zum Thema AJAX.

AJAX bei Technorati
Auf dieser Web-Seite (verschiedene Sprachen) sind Web Sites oder Blogs aufgeführt, die das Wort AJAX als Tag verwenden. Daher finden sich hier viele, teilweise sehr nützliche Informationen.

AJAX und ASP.NET

Auch für .NET gibt es einige AJAX-Erweiterungen beziehungsweise Frameworks, mit denen es relativ einfach ist, von der Client-Seite aus Server-seitige Funktionen aufzurufen, die Business-Logik ohne Postback anzustoßen oder HTML Controls zu aktualisieren. Die Webseite AJAXpatterns (siehe unten) listet insgesamt 16 AJAX Frameworks für .NET auf. Wir nehmen hier als Beispiel gleich das erste auf der Liste, AJAX.NET von Michael Schwarz, mit dem Entwickler schnell AJAX für ASP.NET nutzen können. Es erfordert allerdings fortgeschrittene Kenntnisse in der Programmierung mit JavaScript.

Und so funktioniert’s: Entpacken Sie AJAX.NET nach dem Download, legen Sie in Visual Studio.NET oder Visual Studio 2005 ein neues ASP.NET-Projekt an und ergänzen Sie unter References die ref/ajax.dll-Datei von AJAX.NET. Erst dann können Sie mit dem AJAX.NET Wrapper programmieren. Im nächsten Schritt geht es darum, den HttpHandler des Wrappers anzulegen bzw. zu definieren, der zur Durchführung von ASP.NET-Anfragen notwendig ist.

Um Server-seitige .NET-Funktionen über JavaScript zugänglich zu machen, kennzeichnet der Wrapper diese als AJAX-Methoden (Ajax.AjaxMethodAttribute). Die Klasse, die diese .NET-Funktionen enthält, muss während des Ladens der Seite bei Ajax.Utility.RegisterTypeForAjax registriert werden. Anschließend erzeugt AJAX korrespondierende, Client-seitige JavaScript-Funktionen, die als Proxies dienen und XmlHttpRequest nutzen. Die JavaScript-Variable trägt denselben Namen wie die mit Ajax.Utility.RegisterTypeForAjax registrierte Klasse, welche die durch Ajax.AjaxMethodAttribute gekennzeichneten Funktionen bereitstellt.

Nehmen wir als Beispiel die JavaScript-Methode GetMessageOfTheDay auf dem Client. Wird die Anfrage an den Server weitergeleitet, kann der Code folgendermaßen aussehen (Sample ist die zugehörige Klasse):

<script language="javascript">
 Sample.GetMessageOfTheDay(GetMessageOfTheDay_CallBack);
 function GetMessageOfTheDay_CallBack(response)
 {
  alert(response.value);
 }
</script>

Die JavaScript-Methode erwartet dieselben Parameter wie ihr Gegenstück auf Server-Seite, ergänzend zur JavaScript Callback-Funktion. AJAX ist asynchron, d.h. anderer JavaScript-Code kann weiterhin ausgeführt werden oder man kann an der Seite weiterarbeiten, während der Prozess auf dem Server ausgeführt wird. Hat der Server den Aufruf abgeschlossen, ruft AJAX.NET die spezifische Callback-Funktion auf, nämlich GetMessageOfTheDay_CallBack, und holt die Antwort ein, die die Rückgabewerte des Servers umfasst.

Der AJAX Wrapper kann auch komplexe Typen zurückgeben. Er unterstützt derzeit Integers, Strings, Double, Booleans, DateTime, DataSets and DataTables sowie die einfachen Typen von benutzerdefinierten Klassen und Arrays. Die entsprechenden Klasen müssen aber mit dem Serializable-Attribut versehen werden.

ASP.NET und AJAX
Autor Karl Seguin beschreibt in diesem englischsprachigen Artikel, wie Entwickler mit Hilfe von AJAX ihre ASP.NET-Anwendungen dynamischer gestalten können. Neben einer allgemeinen Einführung zeigt Seguin anhand von drei Beispielen, wie AJAX im Zusammenspiel mit ASP.NET funktioniert.

DotNet AJAX Frameworks
Auf dieser englischsprachigen Website finden Sie 16 AJAX-Erweiterungen beziehungsweise AJAX Frameworks für .NET zur Auswahl einschließlich ausführlicher Erläuterungen.

Microsoft-Projekt “Atlas”: ASP.NET 2.0 und AJAX

Mit ASP.NET 2.0 hat Microsoft asynchrone Callbacks eingeführt und damit das Schreiben von AJAX-Anwendungen für jeden Browser erleichtert. Speziell für ASP.NET 2.0 arbeiten die Redmonder derzeit auch an einem Framework mit dem Code-Namen Atlas. Atlas erweitert das AJAX-Konzept auf zwei Arten, indem es Client-Skriptbibliotheken mit der Server-basierten Entwicklungsplattform ASP.NET 2.0 integriert. Das „Atlas Client Script Framework“ mit seinen Skriptbibliotheken auf der Client-Seite vereinfacht das Erzeugen von modernen Benutzeroberflächen sowie Remote Calls durch objektorientierte APIs und Komponenten. Zusätzlich bietet Atlas basierend auf ASP.NET 2.0 eine Server-Entwicklungsplattform. Zu den Atlas-Server-Komponenten gehören ASP.NET Web Services und spezielle Server-Controls.

Atlas Client Script Framework
Das Atlas Client Script Framework ist ein erweiterbares, objektorientiertes JavaScript Framework für die einfache Erstellung von AJAX-Anwendungen mit modernen Benutzeroberflächen und Anbindung an Web Services. Entwickler können damit Web-Anwendungen schreiben, die DHTML, JavaScript und XMLHTTP nutzen, ohne Experte in diesen Technologien zu sein. Das Framework funktioniert mit allen Browsern und enthält folgende Komponenten:

1. Erweiterbares Kern-Framework, das JavaScript-Funktionen wie Lifetime Management, Vererbung, Schnittstellen oder Multicast Event Handlers hinzufügt.

2. Die Skript-Bibliotheken auf der Client-Seite stellen folgende Funktionen bereit:- Objektorientierte Entwicklung: Die Client-Bibliotheken fügen objektorientierte Eigenschaften wie Typsystem, Datentypen, Namensräume oder Ereignisse zu JavaScript hinzu. Mit dem sodann bekannten Programmiermodell ist es möglich, qualitativ hochwertigeren Code zu schreiben.

   • Browser-Kompatibilität: Die Bibliotheken sind automatisch mit jedem Browser kompatibel; es ist daher nicht notwendig, für jeden einzelnen Browser ein spezifisches Script zu schreiben.

   • Client-Komponenten: Die Bibliotheken enthalten Steuerelemente für gebräuchliche Elemente wie Autokomplettierung, Drag and Drop oder Popups. Zudem gibt es Komponenten, die an Daten gebunden werden können, so dass die Erstellung datengetriebener Business-Anwendungen leichter fällt.

   • Code für Remote Calls: Die Bibliotheken führen asynchrone Aufrufe via XMLHTTP durch und reduzieren den dafür notwendigen Code erheblich.

   • Deklaratives Programmiermodell: Über die Bibliotheken kann man Atlas-Komponenten mit deklarativer Syntax nutzen, ähnlich wie bei den ASP.NET Server Controls.

ASP.NET Server Controls für Atlas
ASP.NET 2.0 bietet die Funktionalität Asynchronous Client Callbacks (ASC), die es leichter macht, ASP.NET-Seiten zu erstellen, die ihren Inhalt über den Server aktualisieren, ohne dass die Seite komplett erneuert werden muss. Die ASC wrappen XMLHTTP und arbeiten auf verschiedenen Browsern. ASP.NET selbst enthält verschiedene Steuerelemente, die Callbacks nutzen, z. B. Sortieren und Paginieren im GridView oder DetailsView-Control oder die Unterstützung von virtuellen Listen im TreeView-Control.

Das Atlas Client Script Framework unterstützt ASP.NET 2.0 Callbacks komplett. Es gibt aber auch Erweiterungen für eine bessere Integration zwischen Browser und Server. So ist es möglich, Atlas Client Controls an ASP.NET Datenquellen-Controls auf dem Server zu binden oder Personalisierungsfunktionen von WebPart-basierten Seiten asynchron vom Client aus zu kontrollieren.

ASP.NET Web Services Integration
Wie jede Client-Anwendung muss auch eine AJAX Web-Anwendung für bestimmte Funktionalitäten auf einen Web Server zugreifen. Dies kann über Web Services erfolgen. Durch die Integration von ASP.NET Web Services kann jede Atlas-Anwendung über das Atlas Client Script Framework sowie einen Browser, der XMLHTTP unterstützt, direkt auf einen mit ASMX erstellten Web Service zugreifen.

Atlas Web-Seite
Auf dieser englischsprachigen Web Site finden Entwickler alle aktuellen Informationen zur “ASP.NET technology preview code-named Atlas”: Tutorials, Links zum Download von Code-Beispielen oder zu Blogs, die sich mit dem Thema „Atlas“ befassen.

ASP.NET Atlas
Auf dieser Web Site finden Sie Links für den Download von insgesamt acht englischsprachigen Word-Dokumenten, die einerseits in AJAX und Atlas einführen und andererseits konkrete Anleitungen für die Programmierung von Atlas-Anwendungen geben. Hier eine Auswahl der Titel: „ASP.NET Atlas – ein Überblick“, „Erstellen einer deklarativen Web-Anwendung mit ASP.NET Atlas“, „Erstellen einer Atlas-Anwendung mit Datenbindung und Templates“ oder „How To: Download und Installation der ASP.NET Atlas-Projektvorlage“.

Weblog von Scott Guthrie
Scott Guthrie vom Web Platform und Tools-Team bei Microsoft fasst in seinem Blog die Kennzeichen von Microsoft „Atlas“ zusammen. In englischer Sprache.

Atlas Quickstart Tutorials
Die Quickstart Tutorials bieten eine schnelle Einführung in die Funktionen von ASP.NET Atlas und helfen gleichzeitig dabei, diese schnell selbst einzusetzen. Themenbereiche sind „Making JavaScript Easier“, „Using Services“, „Performing Data Access“, “Controls and UI” sowie “Server Class Library”. In englischer Sprache.

Feature ASP.NET 2.0
ASP.NET 2.0 enthält eine Vielzahl von internen Änderungen gegenüber ASP 1.x. Weiterhin bringt ASP.NET 2.0 neue Funktionen für die Personalisierung und Lokalisierung von Web-Seiten sowie viele neue Controls. Dieses Feature zeigt, welche Neuerungen ASP.NET 2.0 für die Entwicklung von dynamischen Web-Seiten bietet.