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

II

Inhaltsverzeichnis

  Inhaltsverzeichnis  II

  Management Summary  IV

  Abbildungsverzeichnis  V

Tabellenverzeichnis VI   

  Abkürzungsverzeichnis  VII

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  VIII

III

Anhang .................................................................................................................................. XIII Anhang 1 : Beispiel für Vereinigung der Bestandteile ..................................................... XIII Anhang 2 : ClientScript Person Mitarbeiter ....................................................................... XV Anhang 3 : Asynchroner Datenabruf ............................................................................. XVIII Anhang 4 : AsynchPostBackTrigger.................................................................................. XX Anhang 5 : TimerControl .................................................................................................. XXI Anhang 6 : ClientControl CollapsiblePanel ................................................................... XXIII Anhang 7 : Webserviceaufruf aus JavaScript ................................................................ XXIV

IV

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 Fra-mework 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.

V

  Abbildungsverzeichnis  

  Abbildung 1 : Das traditionelle Modell für Webapplikationen (links) im Vergleich zum AJAX  

  Modell (rechts)  2

  Abbildung 2 : Die Schnittstellenbeschreibung des XMLHTTPRequest-Objekts gemäß des  

  W3 C Standardisierungsvorschlages.  3

  Abbildung 3 : Das DOM einer XHTML-konformen Webseite  5

  Abbildung 4 : Zusammensetzung WebForm  10

  Abbildung 5 : ASP NET AJAX Architektur  12

VI

  Tabellenverzeichnis  

Tabelle 1  : Zustände für das XMLHttpRequest-Objekt  7

VII

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

1

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 Be-standteile, 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

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 zeitlich versetzte Senden und Empfangen von Daten, ohne Quelle: adaptive path

eine Antwort des Empfängers abwarten zu müssen, was den Workflow des Benutzers normalerweise blockieren würde. 4

Zu den Vorreitern im Einsatz von AJAX zählt die Firma Google, die mit googleSuggest und

¹ Vgl.: WWW, adaptive path, 08.10.2006

² WWW, GetTheCode - Was ist AJAX?, 08.10.2006

³ Gibbs (2006), S.30.

⁴ Vgl.: WWW, Wikipedia - Asynchrone Kommunikation, 08.10.2006