Microsoft .NET & IBM System i - Webanwendungen mit AJAX - I
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Microsoft .NET & IBM System i -
Webanwendungen mit AJAX - I
Christian Neißl, 28.12.2010
Im Jahr 2006 hat ein cleverer Journalist den Namen ‚AJAX‘ erfunden. Der Begriff
beschreibt eine damals bereits bekannte Strategie Webseiten interaktiver zu gestalten
als man es bisher gewohnt war. ‚AJAX‘ setzt sich zusammen aus ‚Asynchronous
JavaScript and XML‘. Verwendet wird AJAX in vielen Webanwendungen, lässt es doch
eine Webanwendung fast so bedienerfreundlich gestalten wie eine Windows-Client –
Anwendung. In dieser Serie lernen wir AJAX-Anwendungen mit dem neuen
VisualStudio 2010 und dem .NET-Framework 4.0 kennen und werden natürlich unsere
AS/400-Daten und Anwendungen integrieren.
Vorab beschäftigen wir uns mit dem technischen Umfeld von AJAX. Zu allererst muss
erwähnt werden dass JavaScript nichts mit der Programmiersprache ‚Java‘ (ehemals Sun,
jetzt ORACLE) zu tun hat. JavaScript ist die Sprache des Browsers – hier ein
weiterführender Link in SelfHTML http://de.selfhtml.org/javascript/ und hier ein OnlineBuch:
http://openbook.galileocomputing.de/javascript_ajax/.
Wenn man 5250-Konzepte kennt kann man sich JavaScript als eingebettete Sprache in
einem Terminal vorstellen. Als AS/400-Programmierer hatte ich öfter den Wunsch Dialog-
Eingabefelder direkt bei der Erfassung durch den Benutzer zu prüfen oder die Positionierung
des Cursors zu steuern ohne dass der Benutzer drücken muss und damit die
Kontrolle an das RPG-Programm im Hintergrund zurückgibt. Das und noch viel mehr kann
man mit JavaScript machen.
Asynchron bedeutet dass die Aufrufe für Daten unabhängig vom Lebenszyklus der Seite
ausgeführt werden. ‚Normale‘ Webseiten würden sich zuerst darstellen und danach auf die
Eingabe des Benutzers warten. AJAX-Seiten beginnen bereits sich weitere Inhalte zu holen
während die Seite im Browser aufgebaut wird. Siehe Abbildung 1.
http://www.netvibes.com/privatepage/1#Computer
Nicht AJAX-Seiten würden hier
auf eine Eingabe vom Benutzer
warten, AJAX-Seiten hingegen
fordern während der Browser
die Seite darstellt bereits weitere
Informationen vom Server an!
Abbildung 1 - Seitenaufruf unter AJAX
Das Ergebnis ist eine kürzere Ladezeit von Seiten, man kann bei AJAX-Seiten beobachten
dass die Seite nicht von Beginn an als Ganze Seite vorhanden ist sondern sich Stück für
Stück zusammensetzt (natürlich abhängig von der Server-Performance).
XML muss nicht weiter erklärt werden, mit AJAX wird XML als Übertragungsformat von
Daten gewählt, das ist aber nicht zwingend. Da XML die Datenmenge zwangsläufig aufbläht
und damit die Performance verschlechtert geht man auf traditionelle http – Übertragung
zurück wenn es sich nicht direkt um Massendaten handelt.
Wer sich nun typische AJAX-Anwendungen ansehen möchte sollte diese Seiten aufrufen:
http://maps.google.com/
http://www.flickr.com/
http://www.netvibes.com
http://www.gliffy.com/
Mit der dynamischen Aktualisierung von Teilen einer Webseite ist der Hauptvorteil von AJAX
geklärt – es ist die Vermeidung des ständigen vollständigen Neuaufbau von Seiten. Dabei
wird die Netzwerklast nicht wirklich verringert, sie wird gleichmäßiger über die Nutzung
hinweg verteilt. Eine wirkliche Reduktion der Netzwerklast wird erreicht wenn während eines
Dialoges immer nur Teile der Seite aktualisiert werden.
Weiterer Nutzen ergibt sich aus den neuen Steuerelementen die mit AJAX unterstützt
werden. Die Controls sind Thema der nächsten Folgen dieser Serie.
So toll alles ist – es gibt auch Nachteile von AJAX:
AJAX setzt JavaScript voraus – ist JavaScript im Browser deaktiviert funktioniert die
Seite eben nicht. Da JS in vielen Unternehmen als Sicherheitsrisiko gesehen wird
kann es sein dass man diese Anwendungen nicht ohne weiteres genehmigt
bekommt.
Der schnelle Seitenaufbau den man dem Benutzer beim Seitenaufbau bietet kann
sich als Bumerang auswirken wenn die Anwendung Daten lädt und der Benutzer
bereits mit der Seite arbeitet. Hier kann der Eindruck entstehen dass die Anwendung
nicht optimal reagiert.
Im Vergleich zu Windows-Anwendungen haben Webanwendungen doch einige Vorteile:
Einfach zu installieren – auch wenn man sich erst an den IIS und das Deployment
gewöhnen muss ist eine Webanwendung durch die zentrale Auslieferung am Server
einfacher zu aktualisieren als eine Windowsanwendung die möglicherweise auf
jedem Client installiert werden muss.
Sicheres Verhalten – wenn eine Webanwendung funktioniert kann man davon
ausgehen dass sie das auf jedem Client macht der denselben Browser verwendet.
Bei Clientanwendungen die lokal installiert sind ist das gar nicht so sicher da
möglicherweise durch die lokale Installation individuelle Gegebenheiten
berücksichtigt werden müssen.
Skalierbare Performance – eine Webanwendung hat eine zuverlässige Performance
die man über Hardware skalieren kann. Eine Windows-Client-Anwendung ist in ihrer
Leistung von der Client-Leistung abhängig, das führt gelegentlich dazu dass
Probleme intermittierend auftreten und kaum analysiert werden können.
Nach der Installation von VisualStudio2010 – Professional – oder auch der ‚Schmalspur-
Version‘ dem Visual Web Developer findet man die AJAX-Erweiterungen in der Toolbox.
Abbildung 2 - Toolbox mit geöffneten AJAX Extensions (englische Version von VS2010)
Um die Funktion der AJAX-Extensions zu erleben sehen wir uns ein kleines Projekt an. Es
geht darum das Aktualisieren eines Teiles einer Website zu zeigen. In Abbildung 3 sehen wir
eine Website die 2 Labels und einen Button enthält. Der Bereich des Update-Panels ist in
hellblau hervorgehoben. Wie wir an den Timestamps sehen wurde die Zeit im ersten Label
beim Klick des Buttons aktualisiert währenddessen der zweite Timestamp die Zeit des
Erstladens der Seite enthält. Der Code in Abbildung 4 aktualisiert aber beide Labels.
Abbildung 4 - Update-Panel in Aktion Abbildung 3 - Programmcode in PageLoad zu Abb. 3
Etwas klarer wird es wenn wir uns den ASP-Code der Seite ansehen. Damit der Code übersichtlicher wird habe ich die wesentlichen Zeilen markiert: Gelb – ScriptManager – muss als Objekt auf der Seite vorhanden sein. Grün – UpdatePanel – markiert den Bereich in denen Controls über AJAX gesteuert werden. Das Partielle Rendering der Seite funktioniert nur wenn die entsprechende Eigenschaft im Script-Manager eingeschaltet ist. Abbildung 5 - Eigenschaften des ScriptManagers
Im nächsten Artikel werden wir uns den Controls in der gratis verfügbaren AJAX-Toolbox widmen. Gerne stehe ich Ihnen für Ihre Fragen und Anregungen zur Verfügung, kontaktieren Sie mich unter christian@neissl.net
Sie können auch lesen
