Microsoft.NET & IBM System i - Webanwendungen mit AJAX - I Christian Neißl,

Transkript

1 Microsoft.NET & IBM System i - Webanwendungen mit AJAX - I Christian Neißl, 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 und hier ein OnlineBuch: 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 <EINGABE> 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. 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

2 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: 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

3 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

4 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. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:scriptmanager ID="ScriptManager1" runat="server" /> <div> <div style="background:lightblue"> <asp:updatepanel ID="UpdatePanel1" runat="server" > <ContentTemplate> <asp:label ID="Label1" runat="server" Text="Label"></asp:Label> <br /> <br /> <asp:button ID="Button1" runat="server" Text="Button" /> </ContentTemplate> </asp:updatepanel> </div> <br /> <br /> <asp:label ID="Label2" runat="server" Text="Label"></asp:Label> </div> </form> </body> </html> Das Partielle Rendering der Seite funktioniert nur wenn die entsprechende Eigenschaft im Script-Manager eingeschaltet ist. Abbildung 5 - Eigenschaften des ScriptManagers

5 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