Webprojekt zum Login - Teil 3 mit AJAX

Ralph Steyer stellt sich vor und erzählt, wie er zu AJAX kam.

Der Autor begrüßt die Teilnehmer und beginnt mit einer kurzen Einführung. Erfahren Sie etwas über die Begriffsbedeutung AJAX als Verbindung von (X)HTML, XML, JavaScript und CSS.

Die Beispiele finden Sie im Rohmaterial-Ordner nach Kapiteln und Projekten sortiert. Bei umfangreicheren Beispielen oder Quelltexten mit bekannten Strukturen greift der Autor auf vorbereitete Listings zurück, die aber in allen relevanten Schritten besprochen werden. ...

Wer steckt hinter den Begriffen Web 2.0 und AJAX? Die Begriffserklärung dazu erfahren Sie in diesem Film.

Was ist das Web (in der "klassischen" Form) und wie kann man das Web 2.0 abgrenzen? Sehen Sie selbst.

TCP/IP und die Paketvermittlung dienen als Grundlage der Datenkommunikation des Webs. Welchen Beitrag dazu HTTP als zustandloses Dienstprotokoll leistet, erfahren Sie ebenfalls in diesem Video.

Was unterscheidet eine klassische Web-Applikation von einer AJAX-Applikation? Ein Vergleich anhand der klassischen Google-Suchmaske und Google suggest bringt in diesem Film Klarheit.

Ein Kalenderprogramm im Web auf Basis von AJAX ist Google Calendar. Sehen Sie selbst.

Weitere spannende AJAX-Applikationen von anderen Anbietern wie Microsoft und Yahoo sehen Sie in diesem Video.

AJAXWrite - mit AJAX kann man auch Office-Programme innerhalb von einem Browser ausführen. Sehen Sie selbst.

Der Autor stellt Ihnen hier einige kleinere AJAX-Beispiele vor, deren Grundfunktionalitäten überwiegend im Rahmen des Tutoriums nachprogrammiert werden.

Bei AJAX fordert man Daten über HTTP vom Webserver an. Der Film zeigt den Aufbau einer beispielhaften serverseitigen PHP-Datei.

Die erste AJAX-Applikation soll ausgeführt werden. Dazu muss sie auf einem Webserver bereitgestellt werden. Ein lokal leicht zu nutzender Webserver wird von Apache-Friends mittels XAMPP zur Verfügung gestellt. …

Mit Phase 5 wird ein einfacher, aber guter und leistungsfähiger HTML-Editor vorgestellt, der auch Unterstützung für JavaScript und CSS bietet.

Eine klare Empfehlung für eine kostenlose, aber extrem leistungsfähige IDE (integrierte Entwicklungsumgebung) für Web- und AJAX-Entwicklung ist Aptana, das auf Eclipse basiert. Sehen Sie hier die Vorstellung und Installation von Aptana als Web- und AJAX-IDE.

Am Beginn steht die Neuanlage eines Projekts. Wie Sie ein neues Projekt mit Aptana anlegen, erfahren Sie in diesem Video.

Der DOM Inspector als Erweiterung von Firefox gestattet die Analyse des tatsächlich im Browser verarbeiteten Codes - beginnend mit HTML und XHTML über CSS, JavaScript bis hin zu XML. Das ist insbesondere für den Fall von dynamisch per AJAX nachgeladenen Daten immens von Bedeutung.

Firebug und Live HTTP Headers sind so genannte Add-ons, die Firefox zu einem Schweizer Messer der Web-Entwicklung werden lassen. Dazu gibt es zahlreiche ergänzende Add-ons. Sehen Sie selbst.

Neben dem Internet Explorer und Firefox sollten Sie Opera sowie SeaMonkey, Mozilla oder den Navigator als Testbrowser verfügbar haben. Auch spezielle Linux-Browser wie der Konqueror sind zu empfehlen. Wozu das nötig ist, erfahren Sie in diesem Video.

Was ist HTML? Die Grundstruktur als Dokumentenbeschreibungssprache und das Prinzip der Fehlertoleranz ist Inhalt dieses Films.

Hier lernen Sie das Einbinden von Bildern in HTML als Beispiel für Referenzen in Webseiten und den Import von Ressourcen in Aptana kennen.

Die Aufgabe von HTML in modernen Webseiten ist im Wesentlichen auf die Strukturierung der Seite, die Verbindung zu anderen Ressourcen sowie Webformulare beschränkt. Mehr dazu erfahren Sie hier.

Mit HTML-Eventhandler rufen Sie JavaScript-Funktionen auf. Das sind Schlüsselworte, die als Attribute bei HTML-Tags notiert werden und beim Auftreten von einem bestimmten Ereignis eine nachfolgend notierte Funktion auslösen. …

In diesem Film sehen Sie die Fertigstellung unserer zweiten eigenen AJAX-Applikation, die Zusatzinformationen in Form von Klartextdateien vom Webserver anfordert und in der Webseite anzeigt. Aptana bringt auch einen eigenen Webserver mit, mit dem sich aus der IDE heraus die AJAX-Applikation testen lässt.

Ein Webformular besteht aus dem <form>-Container und enthaltenen Tags zur Spezifizierung der Eingabeelemente. Innerhalb des <form>-Tags werden in der Regel einige Angaben gemacht, die Sie auch zum Teil bei den Funktionen im AJAX-Umfeld wieder finden - sehen Sie selbst.

Das Webformular im Beispiel zeigt eine einfache Registrierungsmöglichkeit mit UserID und Passworteingabe. Die Benutzereingaben werden zum Webserver geschickt und dort mit einem einfachen PHP-Skript überprüft. In Abhängigkeit davon, ob die Daten korrekt sind oder nicht, erhält der Anwender eine neue Webseite mit einer spezifischen Antwort.

Erweitern Sie die Webseite um ein weiteres Webformular, dessen Daten aber beim Login nicht zum Server geschickt werden sollen. Die neue Webseite vom Server eliminiert alle dort im Client vorhandenen Informationen. Sehen Sie hier mehr dazu.

Das W3C standardisiert fast alle relevanten Techniken im Web wie HTML, XML, CSS, HTTP etc., aber insbesondere die Browserhersteller haben sich in den vergangen Jahre oft nur unzureichend um die Vorgaben des W3C gekümmert. Sehen Sie selbst.

Mit dem HTML-Validator kann man den korrekten Aufbau einer Webseite (nach den Regeln des W3C) überprüfen. Sie werden aber feststellen, dass nahezu alle modernen Webseiten Fehler in Bezug auf die strengen W3C-Standards machen müssen, um überhaupt zu funktionieren - ebenfalls so im AJAX-Umfeld.

Style Sheets bestehen allgemein aus verschiedenen Regeln zur Formatierung von Elementen einer Webseite. Um Style Sheets in einer Webseite zu verwenden, müssen Sie diese einer HTML-, XHTML- oder XML-Seite hinzufügen. Wie Sie dabei vorgehen, erfahren Sie in diesem Video.

Was bedeutet eine kaskadierende Wirkung von CSS? Lernen Sie in diesem Film diese Bedeutung kennen.

Selektoren einer Regel bezeichnen die Elemente, auf die die nachfolgend in den geschweiften Klammern definierten Stilvereinbarungen angewendet werden sollen. Dabei gibt es verschiedene Formen an Selektoren. Sehen Sie selbst.

Das AJAX-Projekt zur Anzeige von ergänzenden Bildinformationen erweitern Sie durch Positionierung von Elementen und der optischen Gestaltung des Anzeigebereichs. Sehen Sie hier die Vorgehensweise dazu.

Das erste AJAX-Projekt zum Nachladen der Landeshauptstädte wird durch Positionierung des Ausgabebereichs und eine Gestaltung der Schrift optimiert. …

Das AJAX-Formular zum Verifizieren eines Logins gestalten Sie gemeinsam mit dem Autor mittels CSS-Klassen, IDs und Elementselektoren etwas aufwändiger.

Viele Kritiker sehen in AJAX sowieso nichts anderes als eine Erweiterung von JavaScript. Unbestritten ist, dass JavaScript in AJAX die absolut zentrale Technologie ist. Der offizielle JavaScript-Standard nennt sich ECMAScript. Weitere Details zu JavaScript erfahren Sie in diesem Video.

In diesem Film erfahren Sie etwas zum Einsatzzweck von JavaScript und wie sich JavaScript im Vergleich mit anderen Technologien der Webprogrammierung positioniert.

Es gibt nun zur Verbindung von JavaScript mit einem Gerüst aus (X)HTML verschiedenen Möglichkeiten. Entweder werden JavaScript-Anweisungen innerhalb eines <script>-Containers in die entsprechende (X)HTML-Datei als Klartext geschrieben. Oder eine externe Datei wird in der Webseite referenziert. ...

Hier erhalten Sie einen sehr kompakten Überblick zu den Grundstrukturen, die JavaScript auszeichnen - von der losen Typisierung über Anweisungen hin zu Funktionen.

Der Aufruf von JavaScript-Funktionen und -Anweisungen ist von elementarer Bedeutung. Dazu kommen in der Regel Eventhandler zum Einsatz. Es gibt nun neben HTML-Eventhandlern auch JavaScript-Eventhandler. Was Sie damit erreichen, erfahren Sie in diesem Film.

Ein Objekt kennzeichnen seine Eigenschaften, Fähigkeiten und sein Zustand. Jede grafische Benutzeroberfläche arbeitet mit Symbolen für einen Zugriff auf Objekte. In einem Quelltext greifen Sie über einen Namen oder Stellvertreterbegriff auf ein Objekt zu. Lernen Sie hier mehr über Objekte.

DOM aus Sicht von JavaScript und die Visualisierung der Eigenschaften und Methoden der Webseitenstruktur mit Firebug ist Inhalt dieses Videos.

Eine Beschreibung der wichtigsten DOM-Objekte und der Objekte, die in JavaScript über eingebaute Klassen erzeugt werden können, bekommen Sie hier.

Objekte in JavaScript verwenden Sie entweder über einen Namen, der automatisch zur Verfügung steht, oder indem man Sie mit einem Konstruktor und dem Schlüsselwort new erzeugt. Sehen Sie selbst.

Ist JavaScript bei einem Besucher Ihrer Webseite nicht aktiviert, können Sie auch AJAX vergessen. Ein kurzer Test auf die Unterstützung von JavaScript bei einem Besucher ist aber leicht. Welche Aktion Sie dafür nutzen, zeigt Ihnen der Autor in diesem Video.

Um ein eignes Objekt anzulegen, müssen Sie in JavaScript selbst eine spezielle Funktion definieren, die als Deklaration des Objekts fungiert. Die Konstruktormethode enthält nur Eigenschaften und Funktkionsreferenzen, die in der Konstruktormethode verankert werden. Lernen Sie hier mehr dazu.

Um DOM-Objekte für den Zugriff auf Elemente der Webseite aus JavaScript zu nutzen, stellt das DOM-Konzept standardisierte Methoden sowie Eigenschaften bereit, über die Sie auf dem DOM-Baum navigieren und auch den DOM-Baum selbst manipulieren können. Lernen Sie hier, wie Sie diese verfügbar machen.

Nicht jede Situation im Ablauf eines Programms beziehungsweise Skripts ist vollkommen planbar. Es können Probleme auftauchen, die aber zu handhaben sind, wenn geeignete Gegenmaßnahmen ergriffen werden, die das Skript am Leben halten und sinnvoll weiter laufen lassen. Mehr dazu erfahren Sie hier.

Sie sehen hier, wie Sie eine universell einsetzbare Funktion zum Erzeugen eines XMLHttpRequest-Objekts erstellen und in einer eigenständigen Bibliothek verfügbar machen.

Hier sehen Sie die Anwendung der universell einsetzbaren Funktion zum Erzeugen eines XMLHttpRequest-Objekts, indem die Qualität von dem Login-AJAX-Beispiel verbessert wird.

Ein event-Objekt beinhaltet Informationen über ein aufgetretenes Ereignis in einer Webseite samt den Randbedingungen, welche dabei eine Rolle gespielt haben. Dieses Objekt wird dann an einen Mechanismus zum Behandeln von event-Objekten in Form einer so genannten Message weitergereicht. ...

Zur Reaktion auf ein Ereignis registrieren Sie einen Listener - im offiziellen DOM-Konzept mit addEventListener(). Diese Methode unterstützt der Internet Explorer jedoch nicht. Welche Alternative es dazu gibt, zeigt Ihnen der Autor in diesem Film.

Im Netscape-Ereignismodell verwenden Sie am besten einen Eventhandler als Funktionsreferenz, bei der Sie in der referenzierte Funktion gezielt und global das event-Objekt überwachen. Hier sehen Sie, wie Sie einen Tastaturcode per AJAX an den Server weiterreichen und verarbeiten.

Das event-Objekt stellt diverse Eigenschaften zur Verfügung. Hier sehen Sie, wie man Mausereignisse abfragt und per AJAX an den Server schickt (Netscape-Modell).

Im Microsoft-Eventmodell implementieren Sie mit einer speziellen Variante des <script>-Elements eine globale Ereignisbehandlung. In dem Beispiel schicken Sie Mausereignisse per AJAX zum Server.

Eine universelle Ereignisfunktion, die das korrekte Eventhandling für die jeweiligen Browser automatisch auswählt, ist Inhalt dieses Videos.

Bei HTTP tauschen der Webserver und der Client Informationen über HTTP-Header aus, die man mit einem Sniffer beobachten und in einer AJAX-Applikation verwerten kann. Sehen Sie hier mehr dazu.

Die Meldungen eines Webservers und der Bezug zur Eigenschaft readyState vom XMLHttpRequest-Objekt ist Inhalt dieses Films.

Für die asynchrone Kommunikation zwischen Browser und Webserver erlaubt das XMLHttpRequest-Objekt zum Einen die Registrierung von Callback-Funktionen, zum Anderen kann auf alle Header-Felder von Anfrage und Antwort zugegriffen werden.

Allgemein dürfen AJAX-Anfragen aus Sicherheitsgründen nur Daten von der gleichen Domain angefordert werden, von der die anfordernde Webseite stammt (Sandkastenprinzip). Allerdings können Anwender mancher Browser die Sandbox deaktivieren und die Nachforderung von anderen Domains gestatten. ...

Eine AJAX-Anfrage kann sich zwar in diversen Details unterscheiden, folgt aber in der Regel immer dem gleichen Schema. Sehen Sie selbst.

Sie sehen hier ein praktisches AJAX-Beispiel mit Auswertung der HTTP-Header, das umfangreich die Eigenschaften und Methoden eines XMLHttpRequest-Objekts nutzt.

Bilder in der Webseite können einfach über das Senden eines spezifischen <img>-Tags ausgetauscht werden. Sehen Sie hier, wie Sie dabei vorgehen.

Über DOM hat man alternativ Zugriff auf die Bilder einer Webseite. Hier sehen Sie, wie Sie bei einer Verzögerung einer AJAX-Anfrage dies durch Anzeigen eines informellen Bildes deutlich machen.

Über DOM ändern Sie dynamisch CSS-Eigenschaften eines Elements der Webseite und machen damit auch die Verzögerung einer AJAX-Anfrage deutlich. Ein Beispiel zeigt diese Variante der Benutzerführung.

Ein AJAX-Beispiel mit Fortschrittsbalken durch die dynamische Veränderung von CSS-Eigenschaften mit einem rekursiven Funktionsaufruf sehen Sie hier.

XML ist in der Abkürzung AJAX explizit enthalten. Zwar bewertet dies die Bedeutung von XML für AJAX deutlich zu hoch, aber XML ist dennoch wichtig für AJAX. Hier sehen Sie wichtige Grundlagen zu dieser Dokumentenbeschreibungssprache.

Lernen Sie hier das gezielte Ansprechen und Formatieren von XML-Daten, die mit AJAX angefordert wurden.

XPath und die Lokalisierung von Inhalten und Elementen in einer XML-Datei erklärt der Autor in diesem Video.

Das Selektieren von Knoten einer XML-Antwort im Client sollten Sie über getElementById() oder getElementsByTagName() vornehmen. Andere Zugriffswege können in unterschiedlichen Browsern zu Inkonsistenzen führen. …

Die Unterschiede und Gemeinsamkeiten zwischen serverseitiger und clientseitiger Programmierung sowie die Voraussetzungen zur Ausführung von serverseitigen Skripten und Programmen sind Inhalt dieses Videos.

In diesem Film lernen Sie die Grundlagen zu Webdatenbanken und Datenbankmanagementsystemen (DBMS) an Hand von MySQL sowie die Verwaltung mit phpMyAdmin kennen.

PHP bietet umfangreiche Standardfunktionen für den Zugriff auf MySQL. Wie Sie diese Funktionen einsetzen, erfahren Sie in diesem Film.

Wie sieht die MySQL-Datenbank zur Benutzerverwaltung aus und wie kommt man an das DBMS? Hier erfahren Sie mehr dazu.

Der Aufbau der Webseite, JavaScript-Datei und CSS-Datei sowie der grundsätzliche Zugriff aus PHP auf MySQL anhand der Datenbank zur Userverwaltung ist Inhalt dieses Videos.

Die MySQL-Datenbank unterstützt Sie über phpMyAdmin beim Erstellen von SQL-Anweisungen und erlaubt das Exportieren und Importieren von Daten. In diesem Film wird die Datenbank für das Beispiel vorbereitet.

Hier können Sie sehen, dass ein Anwender in einem Formular Zeichen eingibt und daraufhin eine Liste mit Übereinstimmungen angezeigt bekommt. Je genauer die Eingabe wird, desto kleiner wird die Treffermenge.

Die grundsätzliche Struktur der Applikation mit den Elementen, die bisher schon aus anderen Applikationen bekannt sind, fasst der Autor in diesem Film zusammen.

Hier sehen Sie, wie Sie die Antwort des Webservers aus den Datenbankwerten zu einem JSON-String zusammensetzen.

Aus dem serverseitig generierten JSON-String erzeugen Sie mit der JavaScript-Funktion eval() im Client ein JSON-Objekt, das dann mit den üblichen JavaScript-Techniken gezielt und zuverlässig verarbeitet werden kann. Sehen Sie selbst.

Firebug erlaubt das Analysieren der AJAX-Daten und der dynamischen generiereten Struktur der Webseite sowie das Debuggen im Fall von einem Fehler. …