AJAX III: Clientseitige Funktionen

Unterrichtseinheit

Der dritte und letzte Teil der Unterrichtsreihe befasst sich mit den clientseitigen Funktionen der Webanwendung. Diese Funktionen dienen dazu, Zustandsveränderungen des serverseitigen Modells auf die grafische Benutzeroberfläche abzubilden.

  • Informationstechnik
  • Sekundarstufe II
  • etwa 16 Unterrichtsstunden
  • entdeckendes Lernen, Ablaufplan
  • 3 Arbeitsmaterialien

Beschreibung der Unterrichtseinheit

Der dritte Teil der Unterrichtssequenz hat das Ziel, die clientseitigen Kommunikationskomponenten der Webanwendung (JavaScipt-Skripte) zu implementieren und zu einer funktionsfähigen AJAX-Webanwendung zu integrieren. Dabei handelt es sich um eine sehr anspruchsvolle Aufgabe, die die Lernenden mit vielen vermutlich neuen Aspekten der Sprache JavaScript konfrontiert.

Unterrichtsablauf

Inhalt
Sozial- / Aktionsform

Didaktisch-methodischer Kommentar

Architekturprinzip der Webanwendung Tic Tac Toe

Jeder serverseitigen Komponente, die in Form eines PHP-Skripts vorliegt, wird genau ein clientseitiger Partner in Form eines JavaScript-Skripts gegenübergestellt. Diese beiden Teilkomponenten kommunizieren via XMLHttpRequest miteinander, wenn eine Benutzeraktion dies erfordert. Die Integration der Komponenten erfolgt clientseitig mithilfe globaler Variablen. Eine Möglichkeit dies zu tun zeigt die Demoanwendung.

Funktionsweise

Wenn die Lernenden schließlich die grundsätzliche Funktionsweise der Client-Server-Kommunikation via XMLHttpRequest sowie eine mögliche Form der Umsetzung verstehen, kann die konkrete Implementierung der Komponenten und deren Integration in Angriff genommen werden. Dies soll von den Schülerinnen und Schülern selbstständig mithilfe der zur Verfügung gestellten Informationsquellen durchgeführt werden.

Didaktische Reduktion

Der Code zur Erzeugung des XMLHttpRequest-Objekts sowie die Methoden für die programmatische Benutzung dieses Objekts innerhalb der clientseitigen Kommunikationskomponenten werden den Lernenden in Form des ContentLoader-Objekts (Datei: contentloader.js) bereitgestellt. Dieses Objekt muss von den clientseitigen Komponenten erzeugt und seine Methoden auf geeignete Art und Weise aufgerufen werden. Als konkretes Beispiel dafür wird die Register-Komponente zur Registrierung neuer Benutzer ebenfalls vorgegeben (Datei: register.js).

Ablauf der Unterrichtseinheit

  • Das AJAX-Kommunikationsmodell
    In dieser Unterrichtsstunde erarbeiten die Schülerinnen und Schüler die Prinzipien der Client-Server-Kommunikation mit dem XMLHttpRequest-Objekt.
  • Implementierung der clientseitigen Komponenten
    In der letzten Stunde der dreiteiligen Unterrichtssequenz setzen die Schülerinnen und Schüler die AJAX-Webanwendung für das Spiel "Tic Tac Toe" komplett um.
Schon Premium-Mitglied?
Noch kein Premium-Mitglied? Jetzt informieren

Download

Vermittelte Kompetenzen

Fachkompetenz

Die Schülerinnen und Schüler sollen

  • JavaScript-Objekte mit geeigneten Event Handlern entwickeln, die mit den serverseitigen Komponenten via XMLHttpRequest kommunizieren.
  • die Komponenten clientseitig zu einer funktionierenden Anwendung integrieren.

Methodenkompetenz

Die Schülerinnen und Schüler sollen

  • Informationen in deutsch- und englischsprachigen Internetforen und -tutorien beschaffen, auswerten und für die Entwicklungsarbeit benutzen.
  • englischsprachige Fachtexte übersetzen und verstehen.
  • zur Verfügung gestellte JavaScript-Bibliotheken integrieren und benutzen.

Autor

Avatar
Dr. Ralf Seliger

Zum Profil

Lizenzinformation

Frei nutzbares Material
Die von Lehrer-Online angebotenen Materialien können frei für den Unterricht genutzt und an die eigene Zielgruppe angepasst werden.