Kaufen

AJAX-Beispiel 2 - Google Maps

aus: AJAX Grundlagen

Das Video-Training: Ein Ausblick AJAX Grundlagen
AJAX-Beispiel 2 - Google Maps AJAX Grundlagen
Die erste AJAX-Applikation - HTML-Seite AJAX Grundlagen
Erweiterung mit einem Eventhandler AJAX Grundlagen
Der DOM Inspector AJAX Grundlagen

Über dieses Video

Google Maps - eine der bekanntesten AJAX-Applikationen mit einer optisch eindrucksvollen Interaktion zwischen Anwender und Webserver.

Mit diesem Videotraining erhalten angehende und erfahrene Webprogrammierer einen umfassenden Einstieg in die Grundlagen von AJAX. Ralph Steyer begleitet Sie bei den ersten Schritten bis hin zur kompletten, AJAX-basierten Webanwendung.

EUR 39,95

Kaufen

Ähnliche Video-Trainings

Bonusmaterial

Es gibt zu AJAX natürlich Alternativen, die man in gewissen Situationen durchaus in Betracht ziehen sollte. Sehen Sie selbst.

AJAX-Alternativen

02:55
XML-Dateninseln als Vorläufer von AJAX.

AJAX - Wer hat´s erfunden?

02:10
AJAX-APIs von Google am Beispiel von dem Google Maps API zeigt Ihnen der Autor in diesem Video.

AJAX-APIs von Google

04:06
Nvu ist der Nachfolger des Netscape Composers und ein sehr leistungsfähiger Webeditor mit integriertem CSS-Editor.

Nvu als Webeditor

02:04

In diesem einleitenden Abschnitt stellt Ihnen der Autor Ralph Steyer AJAX in einem kurzen Überblick vor, schafft die Voraussetzungen zum Erstellen und Ausführen von AJAX-Applikationen und spielt erste Beispiele durch.

AJAX - erster Kontakt
- Die Filme dieses Unterkapitels dienen der Begrüßung der Teilnehmer und der Heranführung an das Thema sowie der Erklärung, wie mit den Beispielen des Tutoriums umzugehen ist.
  
  Begrüßung
  - Ralph Steyer stellt sich vor und erzählt, wie er zu AJAX kam.
    
    Vorstellung des Autors
    
    02:23
  - 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.
    
    Einführung
    
    03:08
  - Hier skizziert der Autor die Themen dieses Tutoriums. Ein kurzer Abriss des Inhalts als Ausblick
    
    Das Video-Training: Ein Ausblick
    
    06:19
  - 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. ...
    
    Wie nutzen Sie das Video-Training?
    
    02:07
- In den Filmen dieses Unterkapitels erklärt Ihnen der Autor erste Grundlagen zu AJAX und Web 2.0.
  
  Grundlagen
  - Wer steckt hinter den Begriffen Web 2.0 und AJAX? Die Begriffserklärung dazu erfahren Sie in diesem Film.
    
    Web 2.0 und AJAX
    
    01:09
  - Was ist das Web (in der "klassischen" Form) und wie kann man das Web 2.0 abgrenzen? Sehen Sie selbst.
    
    Web vs. Web 2.0
    
    01:09
  - 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.
    
    TCP/IP und HTTP
    
    03:49
- In diesem Abschnitt sehen Sie wichtige AJAX-Referenzapplikationen aus der Praxis sowie einige fertige AJAX-Applikationen, die im Rahmen des Tutoriums programmiert werden.
  
  Verschiedene AJAX-Beispielapplikationen
  - 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.
    
    Klassische Web-Applikation versus AJAX
    
    04:47
  - Google Maps - eine der bekanntesten AJAX-Applikationen mit einer optisch eindrucksvollen Interaktion zwischen Anwender und Webserver.
    
    AJAX-Beispiel 2 - Google Maps
    
    04:06
  - Ein Kalenderprogramm im Web auf Basis von AJAX ist Google Calendar. Sehen Sie selbst.
    
    AJAX-Beispiel 3 - Google Calendar
    
    02:33
  - Weitere spannende AJAX-Applikationen von anderen Anbietern wie Microsoft und Yahoo sehen Sie in diesem Video.
    
    Weitere AJAX-Applikationen
    
    03:56
  - AJAXWrite - mit AJAX kann man auch Office-Programme innerhalb von einem Browser ausführen. Sehen Sie selbst.
    
    AJAXWrite
    
    02:09
  - Der Autor stellt Ihnen hier einige kleinere AJAX-Beispiele vor, deren Grundfunktionalitäten überwiegend im Rahmen des Tutoriums nachprogrammiert werden.
    
    AJAX-Applikationen des Video-Trainings
    
    03:38
- In diesem Abschnitt entwickeln Sie Ihre erste eigene AJAX-Applikation – seien Sie gespannt.
  
  Die erste eigene AJAX-Beispielapplikation
  - Der Sprung ins kalte Wasser - eine erste eigne AJAX-Applikation wird erstellt. Hier zeigt Ihnen der Autor die zu Grund liegende HTML-Datei.
    
    Die erste AJAX-Applikation - HTML-Seite
    
    07:30
  - Die HTML-Datei ergänzen Sie um einen Eventhandler zum Aufruf einer JavaScript-Funktion (onclick). Sehen Sie selbst.
    
    Erweiterung mit einem Eventhandler
    
    02:06
  - Die in der HTML-Seite referenzierte JavaScript-Datei erzeugt ein Kommunikationsobjekt vom Typ XMLHTTPRequest. Sehen Sie hier auch die Vorbereitung der Kommunikationsfunktion sndReq().
    
    XMLHttpRequest
    
    07:34
  - Die Kommunikationsfunktion sndReq() wird um die Schritte erweitert, die die konkrete AJAX-Kommunikation mit dem Webserver ausführen. Wie Sie dabei vorgehen, erfahren Sie in diesem Film.
    
    Die AJAX-Kommunikation
    
    05:14
  - Eine Reaktionsfunktion handleResponse() zum Anzeigen der Meldung des Webservers in der bereits geladenen Webseite erstellt der Autor in diesem Video. Sehen Sie ihm dabei zu.
    
    Die Behandlung der Antwort
    
    03:52
  - Bei AJAX fordert man Daten über HTTP vom Webserver an. Der Film zeigt den Aufbau einer beispielhaften serverseitigen PHP-Datei.
    
    Was auf dem Server abgeht
    
    03:31
  - 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.
    
    Server mit XAMPP
    
    08:12
- Der Autor bespricht in diesem Film einige wichtige Probleme im Umfeld von AJAX, wie Sicherheitsheitprobleme, das Aushebeln der Zurück-Schaltfläche und der Lesezeichen, etc.
  
  AJAX kritisch beleuchtet
  
  07:14
Eine AJAX-Applikation können Sie vollständig mit einem einfachen Klartexteditor erstellen. Aber ab einer gewissen Komplexität ist das extrem ineffektiv. In diesem Kapitel zeigt Ihnen der Autor wichtige Tools zum Erstellung und Testen einer AJAX-Applikation, die Ihnen den Umgang mit AJAX massiv erleichtern.

Die Programmier- und Testumgebung
- Die Filme dieses Unterkapitels zeigen verschiedene Editoren respektive IDEs, die sich zur Erstellung von AJAX-Applikationen eignen. Damit bauen Sie sich eine leistungsfähige Programmierumgebung für Web- und AJAX-Applikationen auf.
  
  Editoren
  - Mit Phase 5 wird ein einfacher, aber guter und leistungsfähiger HTML-Editor vorgestellt, der auch Unterstützung für JavaScript und CSS bietet.
    
    Phase 5
    
    02:38
  - 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.
    
    Aptana
    
    03:21
  - Am Beginn steht die Neuanlage eines Projekts. Wie Sie ein neues Projekt mit Aptana anlegen, erfahren Sie in diesem Video.
    
    Ein neues Aptana-Projekt
    
    04:33
- In den Filmen dieses Abschnitts sehen Sie, wie Sie verschiedene Browser installieren und so einrichten, dass diese Sie beim Testen und Entwickeln von Web- und AJAX-Applikationen perfekt unterstützen.
  
  Browser
  - Damit bei Firefox unter Windows auch der DOM Inspector zur Verfügung steht, müssen Sie Firefox in der benutzerdefinierten Version installieren. Sehen Sie selbst.
    
    Der DOM Inspector
    
    02:12
  - 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.
    
    Firefox-Add-ons
    
    01:18
  - 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.
    
    Firefox im Einsatz für Webentwicklung
    
    05:57
  - 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.
    
    Weitere Browser
    
    02:24
- Hier werfen Sie einen tiefergehenden Blick auf die Serverseite und betrachten Apache im Rahmen der XAMPP-Installation genauer.
  
  XAMPP und die Serverseite
  
  03:37
- Ein kurzer Ausblick auf weitere interessante Tools, die Sie im Rahmen von Web- und AJAX-Entwicklung benötigen können, bietet dieser Film.
  
  Weitere Tools
  
  02:45
Die Basis des WWW ist (X)HTML. Kenntnis zu HTML ist nicht nur Grundwissen - es ist für AJAX das absolut notwendige Fundament. In diesem Kapitel zeigt Ihnen der Autor kompakt die wichtigesten Grundlagen.

(X)HTML und DOM für AJAX-Programmierer
- Die Filme dieses Unterkapitels zeigen Ihnen kompakt elementare Grundlagen von HTML und XHTML und vertiefen den Umgang mit Aptana. Dazu gibt es ein zweites eigenes AJAX-Beispiel.
  
  Was ist HTML?
  - Was ist HTML? Die Grundstruktur als Dokumentenbeschreibungssprache und das Prinzip der Fehlertoleranz ist Inhalt dieses Films.
    
    Hintergründe zu HTML
    
    05:18
  - Hier lernen Sie das Einbinden von Bildern in HTML als Beispiel für Referenzen in Webseiten und den Import von Ressourcen in Aptana kennen.
    
    Referenzen in HTML
    
    03:13
  - 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.
    
    Strukturierung von Webseiten
    
    02:43
  - 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.
    
    HTML-Eventhandler
    
    01:52
  - 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.
    
    Das 2. AJAX-Beispiel und der Webserver von Aptana
    
    06:51
- Zentraler Aspekt von AJAX ist die Möglichkeit, die Benutzerinteraktion zu optimieren - und die Interaktion mit dem Benutzer erfolgt in den vielen Fällen über Webformulare. Eine AJAX-Datenanforderung fusst auf der gleichen Technik wie die von Webformularen. Mehr dazu erfahren Sie in diesem Abschnitt.
  
  Webformulare
  - 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.
    
    Details zu Webformularen
    
    05:46
  - 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.
    
    Webprojekt zum Login - Teil 1 ohne AJAX
    
    01:57
  - 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.
    
    Webprojekt zum Login - Teil 2 ohne AJAX
    
    02:59
  - Verwandeln Sie nun das Webformular in ein AJAX-Formular. Damit erhalten wir als drittes AJAX-Beispiel ein Login, ohne dass für die Antwort eine neue Webseite die alte Webseite beseitigt.
    
    Webprojekt zum Login - Teil 3 mit AJAX
    
    07:15
- Die Standardisierung der meisten Webtechniken erfolgt beim W3C. Wissenswertes dazu erfahren Sie in diesem Abschnitt.
  
  Das W3C
  - 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.
    
    Das W3C als Standardisierungsgremium
    
    02:38
  - 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.
    
    Der HTML-Validator
    
    05:51
- Das DOM-Konzept beschreibt ein Verfahren, bei dem ein Dokument nicht als statisch aufgebaute, fertige und nicht unterscheidbare Einheit, sondern als differenzierbare Struktur betrachtet wird. Deren einzelne Bestandteile sind Programmen und Skripten dynamisch zugänglich. ...
  
  DOM aus Sicht von HTML
  
  05:58
Moderne Webseiten reduzieren bei der Gestaltung der Seite die Bedeutung von HTML fast vollständig auf die reine Strukturierung der Seite, während das Layout gänzlich Style Sheets übertragen wird. In diesem Kapitel werden Ihne Grundlagen von Style Sheets näher gebracht und dabei unsere AJAX-Applikationen optisch verbessert.

CSS für AJAX
- Style Sheets im Web sollen den unterschiedlichen Interpretationen von Webseiten auf verschiedenen Plattformen einen Riegel vorschieben. Style Sheets eröffnen vor allem die Möglichkeit, eine klare Trennung von Struktur und Layout zu erreichen. Sehen Sie selbst.
  
  Warum CSS?
  
  04:04
- Die Filme dieses Unterkapitels zeigen Ihnen in kompakter Form elementare Grundlagen von CSS.
  
  Wichtige Grundlagen von CSS
  - 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.
    
    Einbindung von CSS in Webseiten
    
    06:36
  - Was bedeutet eine kaskadierende Wirkung von CSS? Lernen Sie in diesem Film diese Bedeutung kennen.
    
    Kaskadierung von CSS
    
    02:09
  - 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.
    
    Selektoren
    
    02:44
- In den Filmen dieses Unterkapitels werden unsere bisherigen AJAX-Applikationen mit CSS optisch gestaltet.
  
  Die AJAX-Applikationen mit CSS gestalten
  - 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.
    
    Layoutverbesserung AJAX-Projekt 2
    
    10:20
  - Das erste AJAX-Projekt zum Nachladen der Landeshauptstädte wird durch Positionierung des Ausgabebereichs und eine Gestaltung der Schrift optimiert.
    
    Layoutverbesserung AJAX-Projekt 1
    
    04:38
  - Das AJAX-Formular zum Verifizieren eines Logins gestalten Sie gemeinsam mit dem Autor mittels CSS-Klassen, IDs und Elementselektoren etwas aufwändiger.
    
    Layoutverbesserung AJAX-Projekt 3
    
    04:36
Die Grundlagen der optischen Seite einer AJAX-Applikation sind HTML bzw. XHTML sowie CSS. Die programmiertechnische Seite von AJAX ist in jedem Fall JavaScript. Das steckt ja schon in der Abkürzung AJAX explizit drin. Mehr Auskunft darüber erhalten Sie in diesem Kapitel.

JavaScript - der Kern von AJAX
- In diesem Unterkapitel behandelt der Autor die Hintergründe von JavaScript. Sehen Sie selbst.
  
  Was ist JavaScript?
  - 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.
    
    Details zu JavaScript
    
    05:55
  - In diesem Film erfahren Sie etwas zum Einsatzzweck von JavaScript und wie sich JavaScript im Vergleich mit anderen Technologien der Webprogrammierung positioniert.
    
    Einsatzzweck von JavaScript
    
    04:04
- Die Filme dieses Unterkapitels zeigen Ihnen in kompakter Form elementare Grundlagen von JavaScript.
  
  Wichtige Grundlagen von JavaScript
  - 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. ...
    
    Einbindung von JavaScript in Webseiten
    
    08:40
  - Hier erhalten Sie einen sehr kompakten Überblick zu den Grundstrukturen, die JavaScript auszeichnen - von der losen Typisierung über Anweisungen hin zu Funktionen.
    
    JavaScript-Grundstrukturen
    
    06:12
  - 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.
    
    JavaScript-Eventhandler
    
    08:36
- Objekte sind der wesentliche Kern der Anwendung eines JavaScripts. JavaScript ist eine objektbasierende Sprache. In diesem Abschnitt erklärt Ihnen der Autor die Grundlagen zu Objekten samt dem DOM und wie man in JavaScript damit umgeht.
  
  JavaScript und Objekte
  - 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.
    
    Was ist ein Objekt?
    
    04:57
  - DOM aus Sicht von JavaScript und die Visualisierung der Eigenschaften und Methoden der Webseitenstruktur mit Firebug ist Inhalt dieses Videos.
    
    DOM aus Sicht von JavaScript
    
    04:30
  - Eine Beschreibung der wichtigsten DOM-Objekte und der Objekte, die in JavaScript über eingebaute Klassen erzeugt werden können, bekommen Sie hier.
    
    DOM-Objekte
    
    04:23
  - 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.
    
    Anwenden von Objekten in JavaScript
    
    03:51
  - 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.
    
    JavaScript-Test
    
    02:40
  - 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.
    
    Anlegen eines eigenen Objekts
    
    04:15
  - 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.
    
    Zugriff auf DOM-Objekte
    
    08:49
- Insbesondere aus Sicht von AJAX ist die Ausnahmebehandlung in JavaScript wichtig. So genannte Exceptions bezeichnen Situationen zur Laufzeit eines Programms oder Skripts, die eine unmittelbare Reaktion erzwingen. Erfahren Sie in diesem Abschnitt, wie Sie damit selbst Funktionen erstellen.
  
  Ausnahmebehandlung und Funktion
  - 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.
    
    Ausnahmebehandlung
    
    07:04
  - Sie sehen hier, wie Sie eine universell einsetzbare Funktion zum Erzeugen eines XMLHttpRequest-Objekts erstellen und in einer eigenständigen Bibliothek verfügbar machen.
    
    Universelle Funktion erzeugen
    
    04:58
  - 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.
    
    Verbesserung des Login-AJAX-Beispiels
    
    02:36
- Die Reaktionsmöglichkeit auf Ereignisse per JavaScript basiert auf dem Auftreten eines Ereignisobjektes, das die Laufzeitumgebung von JavaScript generieren kann - das event-Objekt. Wie Sie mit diesem Mitteilungsobjekt umgehen, ist Inhalt dieses Abschnitts.
  
  Das event-Objekt
  - 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. ...
    
    Das Ereignisobjekt
    
    03:51
  - 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.
    
    Reaktion auf ein event-Objekt
    
    01:37
  - 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.
    
    Tastaturcode per AJAX weiterreichen
    
    03:57
  - 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).
    
    Mausereignisse abfragen
    
    02:58
  - 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.
    
    Ereignisbehandlung für Internet Explorer
    
    03:16
  - Eine universelle Ereignisfunktion, die das korrekte Eventhandling für die jeweiligen Browser automatisch auswählt, ist Inhalt dieses Videos.
    
    Eine universelle Ereignisfunktion
    
    03:26
Segen als auch Fluch des WWW ist HTTP, worüber die Kommunikation zwischen einem Webbrowser und einem Webserver erfolgt. Kenntnisse zu HTTP sind die Basis, um anspruchsvollere AJAX-Applikationen zu entwickeln. Mehr dazu lesen Sie in diesem Kapitel.

HTTP und die Interna von XMLHttpRequest
- In diesem Unterkapitel behandelt der Autor die Hintergründe von HTTP. Sehen Sie selbst.
  
  Hintergründe zu HTTP
  - 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.
    
    Details zu HTTP
    
    10:05
  - Die Meldungen eines Webservers und der Bezug zur Eigenschaft readyState vom XMLHttpRequest-Objekt ist Inhalt dieses Films.
    
    Die Meldungen eines Webservers
    
    03:52
- Moderne Browser bieten mit XMLHttpRequest eine eingebaute Schnittstelle zur Kontrolle von HTTP-Transaktionen aus clientseitigen Programmiersprachen. XMLHttpRequest-Objekte sind damit unmittelbar an dem internen Aufbau von HTTP orientiert und das Rückgrad jeder AJAX-Anfrage. ...
  
  Details zum XMLHttpRequest-Objekt
  - 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.
    
    Genauer Blick auf XMLHttpRequest
    
    07:22
  - 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. ...
    
    Sandbox und Cross-Domain-Zugriff
    
    02:04
  - Eine AJAX-Anfrage kann sich zwar in diversen Details unterscheiden, folgt aber in der Regel immer dem gleichen Schema. Sehen Sie selbst.
    
    Das Schema einer AJAX-Anfrage
    
    01:02
  - Sie sehen hier ein praktisches AJAX-Beispiel mit Auswertung der HTTP-Header, das umfangreich die Eigenschaften und Methoden eines XMLHttpRequest-Objekts nutzt.
    
    Beispiel zum Auswerten der HTTP-Header
    
    01:17
Die wesentlichen Vorteile einer AJAX-Anwendung basieren auf dem meist unbemerkten Nachladen und Austauschen von Informationen in einer bereits geladenen Seite. Diese neuen Informationen müssen dann aber in die Webseite integriert werden. Welches Verfahren sich dazu eignet, erfahren Sie in diesem Kapitel.

DHTML für AJAX
- Was ist DHTML und was nutzt DHTML bei einer AJAX-Applikation? Genau das erfahren Sie in diesem Film.
  
  Was ist DHTML?
  
  03:07
- Wie Sie Daten mit AJAX nachfordern und mit DHTML in die Webseite einbauen sowie DHTML-Effekte zur Benutzerführung verwenden, erfahren Sie in diesem Abschnitt.
  
  DHTML-Effekte für AJAX
  - Bilder in der Webseite können einfach über das Senden eines spezifischen <img>-Tags ausgetauscht werden. Sehen Sie hier, wie Sie dabei vorgehen.
    
    Bilder per AJAX nachladen oder tauschen
    
    04:58
  - Ü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.
    
    Verzögerungsanzeige einer AJAX-Anfrage
    
    03:36
  - Ü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.
    
    Rückmeldung durch Veränderung von CSS
    
    01:24
  - Ein AJAX-Beispiel mit Fortschrittsbalken durch die dynamische Veränderung von CSS-Eigenschaften mit einem rekursiven Funktionsaufruf sehen Sie hier.
    
    Ein Fortschrittsbalken
    
    04:45
Bei einer AJAX-Applikation fordern Sie vom Server Text an, der durch verschiedene Datenformate strukturiert sein kann. Je nach Datenformat hat haben Sie dann unterschiedliche Möglichkeiten, wobüber dieses Kapitel Auskunft gibt.

Das Datenaustauschformat
- Bei AJAX fordern Sie Daten in verschiedenen Formaten an, die alle spezifische Vor- und Nachteile haben. Sehen Sie in diesem Film die Unterschiede der Datenanforderung über Klartext, als JSON oder als XML.
  
  Welche Datenformate finden Verwendung?
  
  01:12
- In diesem Abschnitt erfahren Sie mehr über die Verwendung von XML in AJAX und welche Besonderheiten dabei zu berücksichtigen sind.
  
  XML
  - 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.
    
    Grundlagen von XML
    
    06:12
  - Lernen Sie hier das gezielte Ansprechen und Formatieren von XML-Daten, die mit AJAX angefordert wurden.
    
    Ansprechen von XML-Inhalten
    
    05:10
  - XPath und die Lokalisierung von Inhalten und Elementen in einer XML-Datei erklärt der Autor in diesem Video.
    
    XPath und Lokalisierung
    
    06:09
  - 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.
    
    Selektieren von Knoten einer XML-Antwort
    
    01:26
- JSON (JavaScript Object Notation) ist ein leichtgewichtiges strukturiertes Format, das als Alternative zu XML bei einer AJAX-Anfrage immer wichtiger wird. Sehen Sie selbst.
  
  JSON
  
  04:15
In den Filmen dieses Kapitels zeigt Ihnen der Autor, wie Sie für eine AJAX-Applikation auf Serverseite Geschäftslogik samt Datenbankanbindung programmieren können.

Die Serverseite
- Allgemeines Hintergrundwissen zu serverseitiger Webprogrammierung ist erforderlich. In diesem Abschnitt lernen Sie das Grundlagenwissen dazu kennen.
  
  Serverseitige Webprogrammierung
  - Die Unterschiede und Gemeinsamkeiten zwischen serverseitiger und clientseitiger Programmierung sowie die Voraussetzungen zur Ausführung von serverseitigen Skripten und Programmen sind Inhalt dieses Videos.
    
    Serverprogrammierung - Grundlagen
    
    06:57
  - In diesem Film lernen Sie die Grundlagen zu Webdatenbanken und Datenbankmanagementsystemen (DBMS) an Hand von MySQL sowie die Verwaltung mit phpMyAdmin kennen.
    
    Datenbankgrundlagen
    
    07:07
  - PHP bietet umfangreiche Standardfunktionen für den Zugriff auf MySQL. Wie Sie diese Funktionen einsetzen, erfahren Sie in diesem Film.
    
    PHP und MySQL
    
    03:29
- Das AJAX-Beispiel zur Userverwaltung wird in diesem Abschnitt um eine serverseitige Datenbank mit beliebig vielen Benutzern erweitert.
  
  Eine AJAX-Userverwaltung mit Datenbank
  - Wie sieht die MySQL-Datenbank zur Benutzerverwaltung aus und wie kommt man an das DBMS? Hier erfahren Sie mehr dazu.
    
    Die MySQL-Datenbank
    
    03:30
  - 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 PHP-Datei und die fertige Applikation
    
    09:20
- Hier sehen Sie, wie Sie Informationen in einer Datenbank nachschlagen, JSON zum Client schicken und dort gezielt auswerten.
  
  KFZ-Kennzeichen nachschlagen (JSON)
  - 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.
    
    Vorbereiten der Datenbank
    
    03:49
  - 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.
    
    So sieht die Applikation aus
    
    00:49
  - Die grundsätzliche Struktur der Applikation mit den Elementen, die bisher schon aus anderen Applikationen bekannt sind, fasst der Autor in diesem Film zusammen.
    
    Der grundsätzliche Aufbau
    
    03:01
  - Hier sehen Sie, wie Sie die Antwort des Webservers aus den Datenbankwerten zu einem JSON-String zusammensetzen.
    
    JSON auf derm Server generieren
    
    07:12
  - 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.
    
    JSON mit JavaScript verarbeiten
    
    04:51
  - Firebug erlaubt das Analysieren der AJAX-Daten und der dynamischen generiereten Struktur der Webseite sowie das Debuggen im Fall von einem Fehler.
    
    Mit Firebug die Applikation analysieren
    
    03:16

AJAX-Beispiel 2 - Google Maps

aus: AJAX Grundlagen

Über dieses Video

Auszug aus: AJAX Grundlagen

Bonusmaterial

Filminformationen