AJAX Grundlagen und Verwendung in .NET - Stichwort „ATLAS“

von

Daniel Amruth

Wintersemester 2006/2007

Inhaltsverzeichnis

Management Summary

1 Einleitung  1

1.1 Ziel der Arbeit  1
1.2 Vorgehensweise  1

2 AJAX 2

2.1 Definition von AJAX 2
2.2 Bestandteile von AJAX 3

2.2.1 Das XMLHTTPRequest-Objekt 3
2.2.2 JavaScript  4
2.2.3 Das Document Object Model (DOM)  5
2.2.4 Beispiel für eine Vereinigung der Bestandteile 6

2.3 Nachteile von AJAX  7

3 NET  8

3.1 .NET und das .NET-Framework 2.0  8
3.2 ASP.NET (Active Server Pages) 2.0 9

4 Microsoft ASP.NET AJAX 10

4.1 Definition und Ziele des Frameworks  11
4.2 Architektur von Microsoft ASP.NET AJAX  11
4.3 ASP.NET AJAX Client Framework und Services 12
4.4 AJAX ASP.NET Server Extensions 13

4.4.1 ScriptManager  13
4.4.2 ScriptManagerProxy 14
4.4.3 UpdatePanel  15
4.4.4 AsyncPostBackTrigger 16
4.4.5 Timer  17

4.5 ClientControls  18
4.6 Webservices mit JavaScript aufrufen 19

5 Fazit  20

Literaturverzeichnis
 

Abkürzungsverzeichnis

AJAX = Asynchronous JavaScript and XML
API = Application Programming Interface
ASP = Active Server Pages
CLR = Common Language Runtime
COM = Component Object Model
CSS = Cascading Stylesheet
CTP = Community Technology Preview
DOM = Document Object Model
ECMA = European Computers Manufacturers Association
HTTP = Hypertext Transfer Protocol
IL = Intermediate Language
JIT = Just in time
RAD = Rapid Application Developement
VB = Visual Basic
W3C = Word Wide Web Consortium
(X)HTML = (eXtensible) Hypertext Markup Language
XML = eXtensible Markup Language
XSLT = eXtensible Stylesheet Language Transformations

Management Summary

Der von Jesse James Garrett verfasste Essay über AJAX – die Abkürzung für „Asynchronous JavaScript and XML“ - gilt bis heute als eine Revolution des Internets: Was vorher nur durch Frames oder iFrames möglich war, ist nun auch mittels der schon länger bestehenden Skriptsprache JavaScript möglich. JavaScript kann das vom Internet Explorer als ActiveXObject und von anderen Browsern bereits nativ unterstützte XMLHTTPRequest-Objekt instanziieren. Dieses Objekt ist in der Lage einen asynchronen Datenverkehr zwischen Client und Server herzustellen. Der Benutzer schickt eine Anfrage an einen Server, jedoch entfällt das sonst übliche Neuladen der kompletten Webseite. Stattdessen übernimmt das XMLHTTPRequest- Objekt die Kommunikation: Es initiiert die Anfrage und wartet bis der Server die angeforderten Daten wieder zurückschickt. Während des Wartens auf die Antwort wird der Benutzer in seinem Workflow nicht unterbrochen. Das Ergebnis kann dann von JavaScript über das DOM dynamisch in die Webseite geschrieben werden. Zu den Pionieren des Einsatzes von AJAX gehört die Firma Google, die beispielsweise mit googleSuggest sehr früh zeigen konnte, wie der asynchrone Datenaustausch zu Gunsten der Benutzerfreundlichkeit eingesetzt werden kann.

Zur Ausführung von AJAX-basierten Aufrufen ist ein aktiviertes JavaScript unerlässlich und der Browser muss das XMLHTTPRequest-Objekt unterstützen. Es ist darüber hinaus nicht möglich eine veränderte AJAX-Seite zu drucken, diese als Lesezeichen hinzuzufügen und per Zurück-Button des Browsers einen Schritt innerhalb des Workflows zurückzugehen. Seit der „Entdeckung“ von AJAX treten für alle Skript- und Programmiersprachen vermehrt Frameworks auf, die den Kern einer solchen asynchronen Kommunikation abstrahieren, so dass sich der Entwickler nicht um die Übertragungsschicht kümmern muss – ein solches Framework wurde Mitte Oktober 2006 auch von Microsoft in einer Beta-Version veröffentlicht. Mit diesem Framework ist es möglich eine neue AJAX-basierte Seite zu erstellen und bereits bestehende Seiten ohne großen Aufwand mit asynchronem Datenaustausch zu versehen. Ein so genannter ScriptManager ist für die Kommunikation zuständig. Dabei ist anzumerken, dass die Browserkompatibilitätsschicht dafür sorgt, dass ein solcher Austausch in verschiedene Browser (derzeit Internet Explorer, Mozilla Firefox und Apple Safari) ablaufen kann. Ergänzend dazu wirkt ein UpdatePanel als ein Teil der Seite, der asynchron aktualisiert werden kann. ASP.NET AJAX bringt zudem eine ClientScript-Bibliothek mit sich, die eine objektorientierte mit JavaScript ermöglicht und auch ein ControlToolkit, das bestehende Controls um clientseitige Features erweitert.

1 Einleitung

In diesem Kapitel wird die Zielsetzung der Arbeit, sowie die Vorgehensweise zum Vermitteln der Inhalte erläutert.

1.1 Ziel der Arbeit

Das von Jesse James Garrett geprägte Modewort „AJAX“ steht für „Asynchronous JavaScript and XML“ und eröffnet dem Benutzer und dem Entwickler von Webseiten neue Möglichkeiten. Dabei steht der Grundgedanke im Vordergrund, dem Benutzer einen komfortableren Umgang mit Webanwendungen zu ermöglichen. Ziel dieser Arbeit ist es einen Einblick in die Nutzung von AJAX in ASP.NET 2.0 anhand des von Microsoft herausgegebenen AJAX ASP.NET-Frameworks zu erhalten – ein grundlegendes Verständnis für die asynchrone Kommunikation und die Technologien, die zwischen Client und Server zum Einsatz kommen, bilden dazu die Grundlage der Arbeit.

1.2 Vorgehensweise

Die Grundlagen dieser Arbeit werden bei der Definition von AJAX und den einzelnen Bestandteile, die dieses Konzept ermöglichen, vermittelt. Im Mittelpunkt steht dabei nicht, ein lauffähiges Beispiel zu implementieren, sondern eher ein grundsätzliches Verständnis für den Ablauf der Kommunikation bei einem asynchronen Datenaustausch zu vermitteln. Der Einsatz von AJAX in Verbindung mit ASP.NET bedarf zudem einer Einführung in das Thema .NET, respektive ASP.NET, der Technologie zum Entwickeln von Webanwendung. Kapitel 4 erläutert das ASP.NET AJAX-Framework mit seinen Bestandteilen und Möglichkeiten. Basierend auf ASP.NET 2.0 hat Microsoft Mitte Oktober 2006 ein erstes Release von ASP.NET AJAX veröffentlicht. Zwar steht dieses noch im Beta-Stadium, es lassen sich jedoch bereits jetzt neue, stabile Webanwendungen mit diesem Framework erstellen und bestehende Seiten um die Möglichkeit des asynchronen Datenaustauschs erweitern. Zudem trumpft Microsoft mit zwei weiteren Features in diesem Bereich auf: Es ist nun möglich JavaScript mit einem objektorientierten Ansatz zu programmieren und es können lokale Webservices aus diesem Script heraus aufgerufen werden. Zeitgleich entstand in Kooperation mit Codeplex eine Palette von ClientControls, die auf Benutzerseite ausgeführt werden und eine grafische und benutzerfreundliche Erweiterung von bestehenden Controls ermöglichen.

2 AJAX

Der Begriff „AJAX“ wurde von Jesse James Garrett in seinem Essay „Ajax: A New Approach to Web Applications“¹ Mitte Februar des Jahres 2005 das erste Mal öffentlich geprägt. Dieser Beitrag wird bis heute als eine Art „Geburtsstunde“ von AJAX angesehen. Eine Definition von AJAX, den Bestandteilen, die dieses Konzept ermöglichen, sowie Beispiele für die Einsatzgebiete von AJAX werden in den folgenden Kapiteln gegeben.

2.1 Definition von AJAX

„AJAX beschreibt eine Technologie, mit der Daten zwischen Client und Server … ausgetauscht werden können, ohne dass die gesamte Web-Seite neu geladen werden muss.“ ² Zu verdanken ist dieses Verfahren den einzelnen Bestandteilen von AJAX, aus denen sich auch das Akronym zusammensetzt: So kommen bei diesem Konzept „Asynchronous JavaScript and XML“³ zum Einsatz. Diese einzelnen Technologien ermöglichen es, eine Webseite wie eine Applikation aussehen zu lassen und zu bedienen, indem das sonst übliche Neuladen einer Seite - beispielsweise auf Benutzereingaben hin - entfällt. Abbildung 1 zeigt den Unterschied zwischen einer traditionellen HTTP-Anfrage (oben im Bild) und wie die Ajax-Engine sich zwischen den Client und den Server klinkt (unten im Bild), um einen asynchronen Auf- und Abruf von Daten zu ermöglichen. Unter asynchroner Kommunikation versteht man das zeitlich versetzte Senden und Empfangen von Daten, ohne eine Antwort des Empfängers abwarten zu müssen, was den Workflow des Benutzers normalerweise blockieren würde.⁴ Zu den Vorreitern im Einsatz von AJAX zählt die Firma Google, die mit googleSuggest und googleMaps als Erster wirklich zeigen konnten, was sich hinter dieser Möglichkeit verbirgt und wie sie gezielt eingesetzt werden kann.

Abbildung 1: Das traditionelle Modell für Webapplikationen (links) im Vergleich zum AJAX Modell [Abbildung in der Downloaddatei vorhanden]

2.2 Bestandteile von AJAX

Wie im vorigen Kapitel beschrieben, handelt es sich bei AJAX nicht um eine eigenständige Technologie, sondern vielmehr um ein Zusammenspiel bereits länger existierender Technologien. Die folgenden Punkte geben einen kurzen Überblick über diese Technologien, ohne aber auf syntaktische Hintergründe genauer einzugehen. Ein Grundverständnis wird somit für das anschließende Codebeispiel vorausgesetzt.

2.2.1 Das XMLHTTPRequest-Objekt

Abbildung 2: Die Schnittstellenbeschreibung des XMLHTTPRequest-Objekts gemäß des W3C Standardisierungsvorschlages. [Abbildung in der Downloaddatei vorhanden]

Das XMLHTTPRequest-Objekt bildet die Basis von AJAX, in dem es „…den Datenaustausch mit einem Webserver ermöglicht, jedoch ganz ohne den gefürchteten „Page Refresh“ (dem Neuladen und vor allem dem Neuaufbau der Seite)“⁵ Das mittels JavaScript zu instanziierende XMLHTTPRequest-Objekt stellt eine Schnittstelle zur Erzeugung von HTTPTransaktionen auf der Seite des Clients bereit und ist bei einer asynchronen Transaktion der Initiator der Anfrage an den Server.⁶ Für den Request kann sich das XMLHTTPRequest- Objekt unterschiedlicher Anfragemethoden bedienen, unter anderem GET und POST.⁷ Liefert der Server auf eine Anfrage hin XML-Daten aus, so kann das aufrufende XMLHTTPRequest- Objekt diese wahlweise als Klartext oder DOM-Struktur zurückliefern.⁸ Dabei ist zu beachten, dass „…it (das XMLHTTPRequest-Objekt; A.d.V.) is not limited to being used with XML, it can request or send any type of document, although dealing with binary streams can be problematical in javascript.“⁹ Der Aufbau des XMLHTTPRequest-Objekts ist bis heute nur ein de facto-Standard; es liegt jedoch beim W3C10 ein Standardisierungsvorschlag vor, der in Abbildung 2 zu sehen ist.

Bis zur Einführung dieses Objektes „Ende der 90er Jahre…“¹¹ durch Microsoft, „...behalf man sich mit unsichtbaren Frames und iFrames, die – unbemerkt vom Rest der Seite – permanent neu geladen werden konnten.“¹² Microsoft führte dieses Objekt vor allem für die Nutzung in einer neuen Version von Outlook Web Access ein¹³ - es wurde „…im Internet Explorer 5 für Windows als ActiveX-Objekt implementiert.“¹⁴ Anders hingegen sieht es bei den übrigen Browsern aus: „other browsers such as Firefox, Safari, and Opera implement it (das XMLHTTPRequest-Objekt; A.d.V.) as a native JavaScript object.“¹⁵, auch die „Version 7.0 des Internet Explorer … soll das XMLHttpRequest-Objekt nativ unterstützen.“¹⁶. Nach einer plattformunabhängigen Instanziierung des XMLHTTPRequest-Objekts, sind „die verschiedenen Implementierungen … zueinander kompatibel“¹⁷, so dass danach gleichermaßen mit dem Objekt gearbeitet werden kann.

2.2.2 JavaScript

[...]

1 Vgl.: WWW, adaptive path, 08.10.2006

2 WWW, GetTheCode – Was ist AJAX?, 08.10.2006

3 Gibbs (2006), S.30.

4 Vgl.: WWW, Wikipedia – Asynchrone Kommunikation, 08.10.2006

5 Wenz (2006), S.14.

6 Vgl.: WWW, Teialehrbuch – XMLHttpRequest, 09.10.2006

7 Vgl.: WWW, Wikipedia – XMLHttpRequest, 09.10.2006

8 Vgl.: WWW, Wikipedia – XMLHttpRequest, 09.10.2006

9 WWW, Using the XML HTTP Request object, 10.10.2006

10 Vgl.: WWW, W3C – The XMLHttpRequest Object, 10.10.2006

11 Wenz (2006), S.14.

12 Wenz (2006), S.14.

13 Wenz (2006), S.14.

14 WWW, ZDNet – AJAX und Microsofts Engagement, 09.10.2006

15 Asleson, Schutta (2006), S. 23.

16 Wenz (2006), S.16.

17 Wenz (2006), S.19.