Benutzerfreundlichkeit durch Scripts und Ajax

AJAX_logo_by_gengns.svg

Zur Technik des Social Webs, Teil 2

Werden im Zusammenhang mit dem Web 2.0 technische Aspekte diskutiert, darf Ajax nicht fehlen. Dabei handelt es sich nicht um ein neues Programm oder eine neue Programmiersprache, sondern lediglich um eine Kombination etablierter Webtechnologien. Der Schöpfer des Begriffs, der Webdesigner Jesse James Garret, hat mit dieser leicht zu merkenden Kurzform eines ansonsten umständlich langen Ausdrucks, nämlich »Asynchronous JavaScript And XML«, erheblich zu der Verbreitung des Konzepts beigetragen.

Zudem konnten in den letzten Jahren eine Reihe von Applikationen durch eine verbesserte Oberfläche und eine elegante ajaxbasierte Lösung das Interesse des Webpublikums auf sich ziehen und damit auch auf Ajax aufmerksam machen. Allen voran ist hier die Google-Suchleiste zu nennen, die schon während des Tippens Vorschläge zur Vervollständigung des Suchbegriffs macht. Dieser Vorgang wäre ohne die Ajax nicht denkbar.

Damit wären wir auch schon beim Thema: Woran erkennt man denn eigentlich eine Ajax-Applikation? Für den normalen Benutzer ist dies gar nicht so einfach, weil gerade die Unauffälligkeit der technischen Vorgänge das entscheidende Merkmal von Ajax ist. Im Grunde ist der Browser jedoch in ständigem Kontakt mit dem Server. Dies ebnet den Weg für komplexe clientseitige Programmierung, bei der die Nutzeraktionen an den Server gemeldet werden:

  • Rich Internet Applications. Damit ist die zunehmende Angleichung von Webapplikationen an Desktopprogramme gemeint. So können zum Beispiel auf der Website von Google Docs Dokumente verfasst und formatiert werden. Wichtiger Bestandteil ist dabei ein unkomplizierter, tadellos funktionierender Visueller Editor. Zudem kann man in Google Docs genau wie in Microsoft Word Menüs auf- und zuklappen und ausgefeilte Dialogfenster nutzen. Es gibt auch ein Excel-Äquivalent, mit dem ein durchaus sehenswertes Tabellenkalkulationsprogramm realisiert wurde. Alle diese Dokumente können gleichzeitig von mehreren Nutzern bearbeitet werden und schaffen so die Möglichkeit ganz neuer Vorgehensweisen bei der gemeinsamen Texterstellung. Ohne Ajax wäre dies nicht denkbar.
Google Docs
Die Tabellenkalkulation bei Google Docs
  • Mehr Präzision der Nutzerinteraktion. Die Site reagiert sofort auf Ihre Eingaben, und zwar noch während Sie tippen. Typisches Beispiel hierfür ist Google Suggest. Sie beginnen mit der Eingabe des Suchbegriffs und Google schlägt Ihnen etliche Vervollständigungen vor, die nicht von Ihrem Browser aus Ihren älteren Angaben generiert, sondern vom Server aus einer Datenbank geholt werden.
Google Suggest
Google Suggest wird seinem Namen gerecht.

 

  • Drag&Drop. Eine Errungenschaft der grafischen Benutzeroberfläche ist die Bedienung per Drag&Drop. Dies ist eine Arbeitstechnik, bei der Objekte direkt mit dem Mauszeiger angefasst, verschoben (»drag«) und in einem Zielbereich losgelassen (»drop«) werden können. Als wohl intuitivste Form der Interaktion mit einem gewöhnlichen PC hielt Drag&Drop rasch Einzug in viele Anwendungen. In Webanwendungen war das Prinzip bisher nur schwer zu realisieren, was hauptsächlich an den unterschiedlichen Interpretationen der verschiedenen Browser lag. Für JavaScript gibt es mittlerweile eine Reihe von sehr guten Frameworks, die dem Entwickler von webbasierten Anwendungen fertig einsetzbare Lösungen zur Verfügung stellen, die ohne zusätzlichen Aufwand auf den gängigen Browsern funktionieren.
Netvibes Drag&Drop
Bei netvibes können die verschiedenen Elemente der Site mit Drag&Drop an eine andere Stelle verschoben werden.
  • Ajax-Ästhetik. Viele Leute bestreiten, dass Ajax einen großartigen Einfluss auf die visuelle Gestalt der Webseiten hat. Unseres Erachtens sieht man aber in zunehmenden Maße kleine sichtbare Veränderungen, die nicht nur auf die typische Ästhetik des Webdesigns in der derzeitigen Web-Phase zurückzuführen sind, sondern auf Ajax-Funktionalitäten basieren, zum Beispiel Abdunklungseffekte, die den Hintergrund so gut verschwinden lassen, wenn Dialogfenster aufgerufen werden.

Funktionsweise

Um das genaue Vorgehen von Ajax zu verstehen, werfen wir noch einmal einen Blick zurück auf die »herkömmlichen« Webseiten. Diese sind von einer bestimmten Verfahrensweise geprägt, die jeder kennt, der schon länger mit dem Internet zu tun hat: Man ruft eine Seite auf, wartet, bis diese im Browser angezeigt wird, klickt auf den nächsten Link oder macht irgendwelche Eingaben, wartet, bis die neue Seite bzw. die Antwort geladen ist und so weiter und so fort. Techniker bezeichnen dieses Konzept als synchron: Während der Server die Anfrage des Clients bearbeitet, hält der Client normalerweise still und wartet auf die Antwort. Erst wenn die Antwort angekommen ist, arbeitet der Client weiter.

Mittlerweile ist diese Vorgehensweise durch das beständige Wachstum der Bandbreiten für den User erträglich geworden, weil die Reaktionszeit des Servers wesentlich schneller geworden ist. Das Prinzip ist dennoch das gleiche geblieben und unterscheidet eine Webanwendung damit grundlegend von einer Desktopanwendung.
Ein Beispiel ist der abschließende Bestellvorgang bei Amazon: Erst geben Sie Ihre Nutzerdaten ein. Während der Eingabe erhalten Sie noch keine Rückmeldung. Erst wenn Sie auf den »Absenden«-Button gedrückt haben, überprüft der Server Ihre Eingaben und schickt Ihnen eine neue Seite zurück, die Ihnen entweder die Annahme der eingegebenen Daten signalisiert oder Sie ermahnt, fehlende Textfelder auszufüllen. Erst dann erfolgen die nächsten Schritte, bis Sie ganz zum Schluss den Kauf tatsächlich als vollzogen ansehen können.

Mit Ajax gewinnt dieser Schlagabtausch mit dem Server an Geschwindigkeit und Dynamik. Hier geschieht die Interaktion zwischen Nutzer und Seite im Hintergrund durch einen permanenten Client-Server-Datenaustausch. Der Seiteninhalt kann sich verändern, indem die relevanten Informationen häppchenweise nach Bedarf nachgeladen werden, ohne dass die Seite im Browser komplett neu aufgebaut werden muss.

Das Ajax-Modell basiert dabei auf der Erweiterung des klassischen Modells durch einen permanenten Vermittler zwischen der Client- und der Serverseite, der sogenannten Ajax-Engine, ein Programm, das in jedem neuen Browser bereits integriert ist. Diese beobachtet die Interaktionen der User, schickt bei Bedarf Anfragen an den Server, interpretiert die Antworten und passt die Seitendarstellung dementsprechend an. Die klassischen generellen HTTP-Anfragen werden dabei durch kleine HTTP-Anfragen der Engine ersetzt.

So kann etwa ein Passwort sofort im Hintergrund geprüft werden: Die Ajax-Engine nimmt beim Eintippen das Passwort vom Eingabefeld entgegen und sendet es an ein Serverscript, also zum Beispiel eine Python-Datei. Dieses fragt in der Datenbank nach, ob das Passwort falsch oder richtig ist. Die Antwort wird an die Engine zurückgeschickt, die dann für eine entsprechende Meldung auf der Seite sorgt, indem sie die Seitendarstellung über CSS und DOM verändert.

Was ist DOM? Um Elemente auf einer Website ein- und ausschalten, erzeugen und löschen zu können, setzt JavaScript auf das Document Object Model (DOM). Mit diesem Modell können die Elemente einer Seite direkt angesprochen und die Struktur eine Webseite oder XML-Seite verändert werden. Dies geschieht so schnell, dass der Anwender das Gefühl hat, eine prompte Reaktion zu erhalten.

Die Leistungsfähigkeit von Ajax wird noch dadurch erhöht, dass die Engine gleich mehrere Anfragen parallel bearbeiten kann, wenn der User weitere Angaben macht, die geprüft werden müssen. Zudem muss der Vorgang nicht notwendigerweise vom Nutzer initiiert werden – ein im Hintergrund laufendes Script kann Funktionen selbstständig aufrufen. Diese Unabhängigkeit von der Interaktion mit dem Benutzer, den Vorgängen auf der Webseite und den parallel ablaufenden Serverprozessen bezeichnet man als asynchron.

Bestandteile von Ajax

Ajax ist eine geniale Kombination aus bereits bestehenden Technologien:

  • HTML und CSS, welche eine standardkonforme Seitenstruktur und Präsentation sicherstellen.
  • Asynchrone HTTP-Anfragen – Sie finden hinter den Kulissen statt, während die Besucher auf der Seite weiterlesen, ein Formular ausfüllen oder ähnliche Tätigkeiten durchführen. Ein spezieller Verarbeitungsmechanismus, genannt Callback-Funktion, liest die Serverantwort, sobald sie vorliegt.
  • JavaScript – zur Manipulation des Document Object Models und zur dynamischen Darstellung der Inhalte. JavaScript dient auch als Schnittstelle zwischen einzelnen Komponenten. Das benötigte HTTP-Anfrageobjekt gehört (unter verschiedenen Namen) zur JavaScript-Bibliothek aller aktuellen Browser.
  • DOM zur dynamischen Anzeige, Interaktion und Manipulation von Seitenstrukturen.
  • XML – zum Nachladen, Austauschen und Ändern von lokal und extern gespeicherten Daten.
Java Script
Dynamisch Inhalte, Prüfung von Inhalten oder Anzeige von Dialogfenstern werden mit Java Script möglich. Bild von Ejn6699 , CC BY-SA 3.0, via Wikimedia Commons

Programmiertechnisch tritt der Ajax-Code als ganz normaler JavaScript-Code auf, indem er von den JavaScript-Tags eingeschlossen wird. Ajax kann von jedem modernen grafischen Browser (z. B. Internet Explorer, Firefox und Chrome) interpretiert werden. Auch dadurch wird deutlich, dass es sich bei Ajax um gewöhnliche JavaScript-Programmierung handelt, die durch zusätzliche Methoden erweitert wurde.

Nachteile von Ajax

Obwohl mit Ajax unbestritten beeindruckende und nützliche Effekte möglich sind, gibt es dennoch berechtigte Kritik:

  • Deaktivierung von JavaScript. Wenn ein Browser kein JavaScript unterstützt oder es deaktiviert ist (je nach Untersuchung ist das bei bis zu 2 Prozent der Nutzer der Fall), sind all die schönen Ajax-Effekte nicht mehr sichtbar. Ebenfalls ist dies auch bei der automatischen Verarbeitung schwierig. Besonders Rich-Client-Anwendungen funktionieren ohne JavaScript nicht mehr. Um dies zu umgehen, müssen die Webdesigner dafür sorgen, dass die Seite trotzdem noch einigermaßen nutzbar ist. Dies ist zum Beispiel mit <noscript>-Tags machbar, die Anweisungen einbinden, die ausgeführt werden, wenn JavaScript deaktiviert ist.
  • Die Verwendung der Vor- und Zurück-Schaltflächen. Wenn Sie im Webbrowser normalerweise auf die Schaltflächen für Vor und Zurück klicken, wird zum nächsten beziehungsweise vorherigen Eintrag in der Browser-History (Verlaufsliste, Chronik) gesprungen. Doch ohne neuen URL, die in Ajax-Anwendungen ja nicht erzeugt wird, gibt es auch keine Möglichkeit vor- oder zurückzuspringen. Einige JavaScript-Frameworks bieten mittlerweile Lösungen für dieses Problem.
  • Setzen von Bookmarks. Das Setzen von Bookmarks (Lesezeichen, Favoriten) stößt auf ein ähnliches Problem: Wird der Inhalt einer Seite dynamisch geändert, ändert sich dadurch nicht die URL. Damit kann kein Bookmark gesetzt werden. Mit viel Handarbeit kann man jedoch die URL mit Ankern ausstatten oder unsichtbare IFrames einbinden. Auch einige Ajax-Frameworks bieten die Möglichkeit, die einzelnen Zustände von Ajax-Webseiten zu erfassen. Allerdings ist das bei vielen Applikationen sowieso nicht sinnvoll. Bei Google Suggest ist es gar nicht wünschenswert, dass alle möglichen Suchanfragen gespeichert werden.
  • Polling. Die Ajax-Engine muss ständig beim Server nachfragen, um die aktuellen Daten zu erhalten. Dieser Vorgang wird Polling genannt und führt zu einer eindeutig höheren Auslastung des Webservers.
  • Barrierefreiheit. Barrierefreiheit von Webseiten bedeutet, dass auch Menschen mit Behinderung diese bedienen können. Wenn Funktionen mit Ajax per Drag&Drop – auszuführen sind, sollten diese alternativ zur Maus auch mit der Tastatur zu bedienen sein. Außerdem haben manche Screenreader, die Sehbehinderten die Informationen einer Website vorlesen, Schwierigkeiten, mit ständig wechselnden Seiten umgehen.
  • Benutzerfreundlichkeit. Bisher war stets von dem gestiegenen Maß an Benutzerfreundlichkeit die Rede, das durch Ajax erreicht werden kann. Umgekehrt wird aber auch oft angeführt, dass das unerwartete Verhalten der Webseite den User verwirren könnte. Dies ist sicherlich so, wenn die oben genannten Fälle auftreten und der Anwender auf einmal weder die Zurück-Schaltfläche bedienen noch Bookmarks für eine bestimmte Seite ablegen kann. Bezüglich der Angleichung an Desktopapplikationen ist jedoch anzunehmen, dass die Gewöhnung wesentlich kürzer und angenehmer sein wird, da die Erwartungskonformität mit bekannten Elementen aus diesem Bereich gegeben ist. In Word gibt es in diesem Sinn keinen Zurück-, sondern einen Rückgängig-Button mit eigenen Regeln, der in Rich-Client-Applikationen einprogrammiert werden muss.
  • Persistierung von Daten und Offline-Nutzung. Je ähnlicher die Webapplikationen herkömmlichen Programmen werden, desto größer wird auch der Wunsch nach einer Offline-Nutzung. Dazu müssen die bearbeiteten Daten auch clientseitig speicherbar sein. HTML5 legt hier mit dem Local Storage die Grundlagen. Dennoch sind bisher die wenigsten komplexen Webseiten in der Lage, ordentlich mit Netzausfällen umzugehen.

Fazit

JavaScript hat sich in den letzten Jahren dank Ajax von einer kleinen Hilfssprache zu einer vollausgestatteten Programmiersprache gemausert. Die Komplexität der Programme, die dabei entstanden ist, und die Schwierigkeit, dieses komplexe Verhalten in unterschiedlichen Browsern gleich darzustellen, wird ein wenig gemildert durch Frameworks, die gängige Aufgaben vereinheitlichen und leicht programmierbar machen. Es ist sinnvoll, Ajax bei mehrseitigen Formularen, Umfragen, Tabellen und Datenverarbeitung, dynamischen Umgebungen oder Platzierung von Hinweisen einzusetzen, also überall dort, wo ganz klar ein Mehrwert für den User entsteht. Bei einfacheren Umsetzungen sind die traditionellen statischen Methoden vorzuziehen.

Im dritten Teil unserer Reihe geht es um die Schnittstellen des Webs: RSS, Web Services und Web-APIs.

Social Web CoverAuszug aus:
Anja Ebersbach, Markus Glaser, Richard Heigl:
Social Web,
3. überarbeitete Auflage,
UVK 2016.

Dies könnte Ihnen auch gefallen

Schreiben Sie einen Kommentar