Anzeige
Tutorialbeschreibung

Javascript und Ajax - AJAX-Frameworks

Javascript und Ajax - AJAX-Frameworks


[Javascript und Ajax] AJAX Frameworks 21

Dieses Kapitel schafft anhand von Beispielen einen Überblick über AJAX Frameworks.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education.

Ein Intellektueller ist einer, der in eine Bibliothek geht, selbst wenn es nicht regnet. – André Roussin

Kapitel 21 AJAX-Frameworks

Wie bereits mehrfach erwähnt wurde, ist AJAX an sich eigentlich nichts Besonderes, die Techniken sind bekannt und auch überschaubar. Das Geheimnis liegt nun darin, diese Techniken zu bündeln und damit beeindruckende Effekte zu erzielen, die auch auf Browsern mit niedrigem einstelligen Marktanteil noch möglichst gut laufen.

Ist man auf sich allein gestellt, hat man es oft schwer: Es mangelt in der Regel schlicht an Testmöglichkeiten beziehungsweise an einigen der exotischeren Systeme. Ein Open-Source-Projekt kann hier Wunder wirken: Auch wenn die Anzahl der Entwickler überschaubar ist, die Anzahl der Tester beziehungsweise Entwickler, die ein solches Projekt ausprobieren, kann wertvolles Feedback liefern.

AJAX-Frameworks können gleich zwei positive Effekte haben: Zum einen läuft der Code auf möglichst vielen Clients, und zum anderen spart man sich durch die Verwendung vorgefertigter Effekte mitunter eine Menge Zeit und Aufwand.

Meine persönliche Einstellung zu Frameworks ist die, dass ich generell ein technologiespezifisches Framework bevorzuge – spezifisch in Bezug auf die Serverseite. Wenn ich also eine PHP-Website mit AJAX-Effekten erstellen soll und die Wahl zwischen einem allgemeinen AJAX-Framework und einem AJAX-Framework für PHP hätte (und beide vergleichbar gut wären), würde ich das spezifische Framework verwenden. Die serverseitige Technologie wird in der Regel sehr selten gewechselt, und ein Framework, das sich gut integriert, kann auch Features der Servertechnologie nutzen, was einem allgemeinen JavaScript-Framework normalerweise nicht gelingt.

Die Meinungen sind natürlich unterschiedlich, weswegen ich in diesem Kapitel einen besonderen Ansatz wähle: Es wird sowohl ein rein clientseitiges AJAX-Framework vorgestellt als auch eines, das sich in eine bestimmte Servertechnologie integriert und diese somit erweitert.

Eine komplette Vorstellung aller relevanten AJAX-Frameworks hat in diesem Buch keinen Platz und würde zudem einer geringen Halbwertszeit unterliegen: Was heute noch »state of the art« ist, mag morgen bereits überholt sein, neue Frameworks könnten einen Siegeszug antreten, alte Frameworks könnten die Unterstützung ihrer Entwickler verlieren und in der Bedeutungslosigkeit verschwinden.

Deswegen zeigt dieses Kapitel an einem Beispiel, was ein Framework zu leisten in der Lage ist, und verweist auf weitere Quellen und Dokumentation dazu; eine komplette Referenz werden Sie aus den genannten Gründen allerdings nicht finden.


 

 

21.1 Dojo  

Das wohl bekannteste AJAX-Framework ist Dojo, das sich selbst »the JavaScript Toolkit« nennt. Dojo ist ein Vertreter der rein clientseitigen Frameworks und hat damit den Vorteil, mit jeder Servertechnologie zu funktionieren, solange nur der Server entsprechendes HTML-Markup und zugehörigen JavaScript-Code ausgibt. Damit hätte Dojo auch ganz gut in Kapitel 33 zum Thema JavaScript-Bibliotheken gepasst, aber der Schwerpunkt liegt schon sehr stark auf dem Thema AJAX.

Hinter Dojo steckt die Dojo Foundation, eigentlich eine gemeinnützige Institution. Gesponsert wird das Ganze aber von einigen namhaften Firmen, unter anderem IBM und AOL. Somit sieht die Zukunft von Dojo ziemlich rosig aus.

Erhältlich ist Dojo auf der Homepage http://dojotoolkit.org/. Der Download ist zurzeit über 3 MB groß, da wird also eine ganze Menge mitgliefert. Wenn Sie danach in das heruntergeladene Archiv gucken, finden Sie dort einige überraschende Elemente, unter anderem Flash-Filme. Das hat einen guten Grund: Über den Umweg des Flash-Plugins sind Anwendungsszenarien wie das Speichern von Daten und der Zugriff auf entfernte Websites möglich. Die Dojo-Bibliothek selbst ist um die 125 KB groß, aber unleserlich, weil sie mit einem speziellen Packprogramm klein gemacht wurde (und deswegen beispielsweise kurze, aber nichtssagende Variablennamen verwendet). Die leserliche Version bringt es auf über 200 KB. Allerdings steckt viel Funktionalität im Unterordner src.

Als Implementierungsbeispiel soll eine sich selbst vervollständigende ComboBox erzeugt werden, wie das etwa Google Suggest vormacht (siehe Kapitel 18). Das ist vom JavaScript-Code her recht trickreich, aber mit Hilfe der Dojo-Bibliothek überraschend einfach.

Zunächst benötigen Sie eine Datenquelle, die Vervollständigungsdaten für die ComboBox liefert. Dojo setzt hier auf JSON, Sie müssen also nur ein Array mit den einzelnen Listenelementen liefern. Jedes Array hat zwei Elemente: Die Beschriftung des Elements und den Wert.

Normalerweise würden Sie jetzt ein serverseitiges Skript schreiben, das aus einer Datenbank Daten extrahiert, doch in diesem Fall machen wir es uns einfach und geben einfach einen statischen JSON-String zurück:

[

   ["Januar", "1"],

   ["Februar", "2"],

   ["März", "3"],

   ["April", "4"],

   ["Mai", "5"],

   ["Juni", "6"],

   ["Juli", "7"],

   ["August", "8"],

   ["September", "9"],

   ["Oktober", "10"],

   ["November", "11"],

   ["Dezember", "12"]

]

Im zweiten Schritt ist die HTML-Seite an der Reihe. Zunächst muss die Dojo-Hauptbibliothek (dojo.js) geladen werden. Zum Redaktionsschluss dieses Buches war Dojo 0.3.1 aktuell; Sie müssen den Pfad unter Umständen an Ihr System und die jeweils vorhandene Dojo-Version anpassen:

<script type="text/javascript"

   src="dojo-0.3.1-ajax/dojo.js"></script>

Wie bereits erwähnt, steckt in der dojo.js nicht die komplette Funktionalität. Die ComboBox etwa ist in der Datei src/widget/ComboBox.js im-plementiert. Das folgende Kommando lädt dieses Skript:

<script type="text/javascript"><!--

dojo.require("dojo.widget.ComboBox");

//--></script>

Und das war es auch schon mit dem JavaScript-Code! Der Rest funktioniert komplett deklarativ. Sie verwenden ein herkömmliches <select>-HTML-Element für die ComboBox. Mit dem Attribut dojoType geben Sie an, dass Sie eine spezielle Variante der Auswahlliste haben möchten, nämlich eine ComboBox. Fehlt nur noch die Information, woher die Daten für die ComboBox kommen: Dafür ist das Attribut dataUrl da, mit dem Sie die JSON-Datei referenzieren:

<select

   dojoType="ComboBox"

   dataUrl="dojo-autocompleter.json"

   maxListLength="10"

   style="width:200px;">

</select>

Hier noch einmal der komplette, sehr überschaubare Code:

<html>

<head>

<title>Dojo</title>

<script type="text/javascript"

   src="dojo-0.3.1-ajax/dojo.js"></script>

<script type="text/javascript"><!--

dojo.require("dojo.widget.ComboBox");

//--></script>

</head>

<body>

<select

   dojoType="ComboBox"

   dataUrl="dojo-autocompleter.json"

   maxListLength="10"

   style="width:200px;">

</select>

</body>

</html>

Das Ergebnis entnehmen Sie Abbildung 21.1: Sie tippen ein paar Zeichen und erhalten entsprechende Monatsnamen. Sie sehen also: wenig Code, maximale Wirkung – genau so macht ein Framework Sinn. Dojo bietet noch viele weitere Features, die wohl ein eigenes Buch füllen würden. Viel Spaß beim Experimentieren!

Bilder

Abbildung 21.1     Die Dojo-ComboBox

21.2 Atlas  

ASP.NET von Microsoft verwendet einen Steuerelement-Ansatz: Es gibt auf dem Webserver spezielle Elemente, die dann im Client als HTML (und CSS und JavaScript) »ankommen«. Damit ist die Technologie natürlich prädestiniert für AJAX-Frameworks, denn diese können sich dann auf der Serverseite einklinken und bestehende Steuerelemente mit zusätzlicher AJAX-Funktionalität versehen.

Das AJAX-Framework von Microsoft für ASP.NET 2.0 heißt Atlas (das ist ein Code-Name, er kann sich also in Zukunft unter Umständen noch ändern). Unter http://atlas.asp.net/ gibt es das Framework (zurzeit) als Vorabversion. In Kapitel 20 haben Sie bereits den Visual Web Developer Express Edition kennengelernt; diesen benötigen Sie auch, um den Atlas-Download nutzen zu können. Atlas integriert sich nämlich in den Gratis-Editor (und auch in die kostenpflichtigen Varianten von Visual Studio 2005). Wenn Sie eine neue Website anlegen möchten, finden Sie – natürlich erst nach der Installation – eine Atlas-Projektvorlage (siehe Abbildung 21.2). Wählen Sie diese aus, damit Sie eine komplett für Atlas vorkonfigurierte Website vorfinden.

Atlas erfordert ASP.NET 2.0; ASP.NET 1.x wird hier leider nicht unterstützt.

Auch hier soll wieder ein Google-Suggest-ähnlicher Effekt erzeugt werden. Dazu benötigen Sie diesmal einen Web Service. Atlas ruft nämlich in Verbindung mit dem ComboBox-Effekt einen Web Service auf, wenn Sie ein paar Zeichen in das Textfeld tippen. Als Parameter werden zwei Informationen übergeben: welche Zeichen eingetippt worden sind und wie viele Ergebnisse maximal zurückgeliefert werden dürfen.


Bilder

Abbildung 21.2     Die Atlas-Website-Vorlage im Visual Web Developer

Der Web Service wird ähnlich wie in Kapitel 20 erstellt: Sie müssen System.Web.Services importieren, eine Klasse von WebService ableiten und WebMethodAttribute verwenden:

<%@ WebService Language="JScript" Class="Atlas_Autocompleter" %>

 

import System.Web.Services;

 

public class Atlas_Autocompleter extends WebService {

 

   WebMethodAttribute

   function Monate(prefixText: String, count: int) : String[] {

Die Parameternamen prefixText und count sind dieselben Namen, die Atlas an den Web Service schickt.

Die Methode Monate() soll alle Monate zurückliefern, die mit prefixText beginnen. Dazu benötigen wir zunächst einmal eine Liste aller möglichen Monate:

var monate: String[] = [

   "Januar", "Februar", "März", "April",

   "Mai", "Juni", "Juli", "August",

   "September", "Oktober", "November", "Dezember"];

Das Array-Handling ist unter .NET (und damit auch unter JScript.NET) etwas mühsamer als unter JavaScript. Es gibt mehrere mögliche Lösungen, aber diese Implementierung ist besonders einfach zu verstehen. Zunächst zählen wir alle passenden Monate. Ein Monat "passt", wenn er mit prefixText beginnt:

var i: int = 0;

var treffer: int = 0;

for (i = 0; i < monate.Length; i++) {

   if (monate[i].IndexOf(prefixText) == 0) {

      treffer ++;

   }

}

In der Variablen treffer steht nun die Anzahl der Treffer. Damit initialisieren wir ein neues Array (.NET möchte gern vorher wissen, wie viele Elemente ein Array hat). Eine Besonderheit gibt es: count gibt ja an, wie viele Treffer es maximal geben darf, also ermitteln wir, welche Zahl kleiner ist: count oder treffer.

var ergebnis: String[] =

   new String[Math.min(count, treffer)];

Jetzt werden alle Monatsnamen noch einmal durchlaufen und damit das Array ergebnis mit allen gültigen Monaten gefüllt:

var pos: int = 0;

for (i = 0; i < monate.Length; i++) {

   if (monate[i].IndexOf(prefixText) == 0) {

      ergebnis[pos] = monate[i];

      pos ++;

      if (pos == ergebnis.Length) {

         break;

      }

   }

}

Das war es; nun muss das Array ergebnis nur noch von der Funktion zurückgegeben werden. Hier der komplette Code des Web Service:

<%@ WebService Language="JScript" Class="Atlas_Autocompleter" %>

 

import System.Web.Services;

 

public class Atlas_Autocompleter extends WebService {

 

   WebMethodAttribute

   function Monate(prefixText: String, count: int) : String[] {

      var monate: String[] = [

         "Januar", "Februar", "März", "April",

         "Mai", "Juni", "Juli", "August",

         "September", "Oktober", "November", "Dezember"];

 

      var i: int = 0;

      var treffer: int = 0;

      for (i = 0; i < monate.Length; i++) {

         if (monate[i].IndexOf(prefixText) == 0) {

            treffer ++;

         }

      }

 

      var ergebnis: String[] = new String[Math.min(count, treffer)];

      var pos: int = 0;

      for (i = 0; i < monate.Length; i++) {

         if (monate[i].IndexOf(prefixText) == 0) {

            ergebnis[pos] = monate[i];

            pos ++;

            if (pos == ergebnis.Length) {

               break;

            }

         }

      }

 

      return ergebnis;

   }

 

}

Rufen Sie ihn im Browser auf, und nehmen Sie die Testmöglichkeit in Anspruch (Abbildung 21.3). Suchen Sie beispielsweise nach allen Monaten, die mit einem J beginnen; Sie sollten drei Ergebnisse erhalten (siehe Abbildung 21.4). Wenn Sie allerdings bei count den Wert 2 angeben, sollten Sie auch nur noch zwei Ergebnisse im Browser sehen (Abbildung 21.5).


Bilder

Abbildung 21.3     Testen Sie den Web Service.


Bilder

Abbildung 21.4     Drei Monate beginnen mit J.

Bilder

Abbildung 21.5     Sie können die Anzahl der Rückgabewerte beschränken.

Jetzt fehlt nur noch die ASP.NET-Seite, die diesen Web Service als Daten-Backend für eine ComboBox nutzt. Ausnahmsweise erstellen wir eine C#-Datei in Visual Web Developer. Keine Sorge, Sie müssen keine neue Sprache lernen, denn die ASP.NET-Datei wird keine einzige Zeile Code enthalten, nur Markup. Jedoch unterstützt Visual Web Developer standardmäßig kein IntelliSense (Codevervollständigung etc.) für JScript.NET. Schlimmer noch: Atlas kommt ebenfalls nicht mit JScript.NET zurecht, zumindest in der zum Redaktionsschluss vorliegenden Version (July CTP). Deswegen erzeugen Sie eine C#-Datei, und alles funktioniert.

Als Erstes benötigen Sie natürlich ein Textfeld. Erzeugen Sie ein HTML Control, also ein HTML-Formularelement mit dem Attribut runat="server" sowie mit einer eindeutigen ID:

<form id="form1" runat="server">

<div>

<input type="text" id="Monatsliste" runat="server" />

Als Nächstes laden Sie die Atlas-Bibliothek. Das übernimmt ein spezielles serverseitiges Steuerelement, der ScriptManager von Atlas. Den bauen Sie wie folgt in die Seite ein:

<atlas:ScriptManager id="ScriptManager1" runat="server" />

Im nächsten – und auch schon letzten – Schritt wandeln Sie das Texteingabefeld in eine ComboBox um. Das erledigt das Steuerelement AutoCompleteExtender. Innerhalb dieses Elements sorgen die AutoCompleteProperties dafür, dass Atlas auch alle relevanten Daten erhält: Wo ist der Web Service (ServicePath), welche Methode soll aufgerufen werden (ServiceMethod), ab wie vielen eingetippten Zeichen soll die ComboBox aktiv werden (MinimumPrefixLength). Vergessen Sie nicht, Atlas mitzuteilen, welches Textfeld überhaupt zur Combobox werden soll: Die Feld-ID geben Sie in der Eigenschaft TargetControlID an. Das sieht dann am Ende wie folgt aus:

<atlas:AutoCompleteExtender ID="Extender1" runat="server">

<atlas:AutoCompleteProperties

   Enabled="true"

   MinimumPrefixLength="1"

   ServiceMethod="Monate"

   ServicePath="Atlas_Autocompleter.asmx"

   TargetControlID="Monatsliste" />

</atlas:AutoCompleteExtender>

Hier noch einmal das komplette Markup:

<%@ Page Language="C#" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

   <title>Atlas</title>

</head>

<body>

   <form id="form1" runat="server">

   <div>

      <atlas:ScriptManager id="ScriptManager1" runat="server" />

      <input type="text" id="Monatsliste" runat="server" />

      <atlas:AutoCompleteExtender ID="Extender1" runat="server">

         <atlas:AutoCompleteProperties

            Enabled="true"

            MinimumPrefixLength="1"

            ServiceMethod="Monate"

            ServicePath="Atlas_Autocompleter.asmx"

            TargetControlID="Monatsliste" />

      </atlas:AutoCompleteExtender>

   </div>

   </form>

</body>

</html>

Das ist natürlich der serverseitige Code. Wenn Sie diese Seite im Webbrowser aufrufen, erhalten Sie folgendes HTML, das mit einer ganzen Menge JavaScript gespickt ist:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head><title>

   Atlas

</title></head>

<body>

   <form name="form1" method="post" action="Atlas_Autocompleter.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 

value="/wEPDwULLTE1MTA3MzU1OThkZIPhr5F/xEkLRSDqE4TCplm4938/" />

</div>

 

 

<script src="/AtlasWebSite1/WebResource.axd?d=GMTDuAhqpvtSdvkkcIt9MJ4wGcQ-

wg_8ety6VK45YP95SfJxmXyg3FkmT6pciiVGSULNSKxDGxAbeN4o6GgWa6-YHKRRMRB-YXenf8g93oc1&amp;t=

632782292040000000" type="text/javascript"></script>

<script src="atlasglob.axd" type="text/javascript"></script>

   <div>

 

      <input name="Monatsliste" type="text" id="Monatsliste" />

 

   </div>

 

<div>

 

   <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" 

value="/wEWAgKX6aD0CwLL0aKoBy6+tbmlKBMbaeibAFZoZZ6TKuQ4" />

</div>

<script type="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

  <components>

    <control id="Monatsliste">

      <behaviors>

        <autoComplete minimumPrefixLength="1" serviceURL="Atlas_Autocompleter.asmx" 

serviceMethod="Monate" />

      </behaviors>

    </control>

  </components>

</page></script>

<script type="text/javascript">

</script>

</form>

</body>

</html>

Einige Elemente sind besonders hervorgehoben: Offensichtlich wurde das ScriptManager-Element durch zwei <script>-Tags ersetzt; der AutoCompleteExtender wurde ebenfalls in ein <script>-Element umgesetzt (allerdings eines mit XML im Inneren, kein JavaScript). Und so ist es tatsächlich: Die ersten <script>-Elemente enthalten die Atlas-Client-Bibliothek, werten das XML-<script>-Element am Seitenende aus und erzeugen so den ComboBox-Effekt, wie in Abbildung 21.6 zu sehen ist.

Bilder

Abbildung 21.6     Die Atlas-ComboBox

Auch für Atlas gilt: Ganze Bücher ließen sich damit füllen, dies war nur eines von vielen Beispielen. Wenn Sie auf ASP.NET 2.0 setzen, sollten Sie unbedingt einen Blick darauf werfen.


Zumindest so ungefähr – die exakte Ausgabe hängt auch vom Browsertyp ab.

 

Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von tanzfrosch
  • 11.01.2018 - 14:56

Dankeschön, tolles Tut. !

Portrait von MaoMao
  • 09.01.2013 - 17:09

Gute Tutorial leicht erklärt.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.06.2008 - 00:46

Super Tutorial, gefällt mir gut!

x
×
×