AJAX

Interaktive Applikationen für das Web 2.0

Woher kommt AJAX? Was steckt hinter dem Schlagwort? Welche Technologien kommen zum Einsatz? AJAX ("Asynchronous Javascript and XML") nennt man das Konzept der Datenübertragung zwischen Webserver und dem Browser des Clients, mit dem man Teile der Web-Seite bei Bedarf nachladen kann, ohne gleich die gesamte Seite neu aufbauen zu müssen. Mit diesem Videotraining erhalten angehende und erfahrene Webprogrammierer einen umfassenden Einstieg in AJAX. Die beiden Trainer führen Sie von den ersten Schritten bis zur kompletten, AJAX-basierten Webanwendung.

Ihr(e) Trainer: Helge Maus, Enrico Reinsdorf

ISBN-Nummer: 978-3-8273-6035-9

Erscheinungsdatum: 16.04.2006

Downloads

Auf die Merkliste Tell-A-Friend Feedback verfassen

Ähnliche Video-Trainings

Das Video beginnt mit der Positionsbestimmung von AJAX. Welche Komponenten betrifft AJAX, welche Änderungen erfährt das Internet dadurch und welche Vorteile hat der Benutzer? Die beiden Autoren stellen den Ablauf mit und ohne AJAX gegenüber und veranschaulichen das auch grafisch.

Was ist eigentlich AJAX?

07:05
Alles was über HTML hinausgeht, darf man getrost als 'Programmierung' bezeichnen. Dieses Kapitel steigt in die entsprechenden Basistechnologien von AJAX ein und beschreibt einige wesentlichen Komponenten: JavaScript, OOP, DOM, Events, XML.

Programmierung

ca. 320 min
- AJAX setzt intensiv auf client-seitiges Scripting mit JavaScript. Dieses Kapitel versucht Ihnen kompakt die wichtigsten JavaScript-Konzepte näherzubringen, die Sie in Ihrer täglichen Arbeit mit AJAX benötigen werden.
  
  JavaScript Crashkurs
  - In welchen Einsatzgebieten wird JavaScript heute verwendet, wer übernimmt die Interpretation dieser Befehle? Dieser Film präsentiert und erklärt die Antworten zu diesen Fragen!
    
    Einführung in JavaScript
    
    09:30
  - Dieser Film zeigt Ihnen das Einbinden von JavaScript in (X)HTML-Dateien, sowie das korrekte Angeben des MIME-Typs. Unter anderem können Sie den JavsScript-Code in eigene Dateien auslagern und später in mehreren Dateien einbinden.
    
    JavaScript in (X)HTML einbinden
    
    08:24
  - In dieser Zusammenfassung erlernen Sie das Deklarieren und Definieren von Variablen, die lose Typisierung. Sie erfahren aber auch die Regeln der Variablen-Benennung und lernen eine Kurzform der Zuweisung kennen.
    
    Variablen und Zuweisung
    
    09:07
  - Mit Hilfe von Arrays können in JavaScript mehrere Werte gemeinsam gespeichert werden. Diese verhalten sich dynamisch und bieten dem Programmierer eine Reihe von nützlichen Methoden zur Speicherung bzw. zur Nutzung der Arrayinhalte.
    
    Arrays und deren Methoden
    
    09:17
  - Um Benutzer zu informieren, zusätzliche Entscheidungen einzufordern oder freie Texteingaben anzunehmen, können Sie die verschiedenen eingebauten PopUp-Elemente in JavaScript nutzen.
    
    Benutzer-Interaktion mit PopUp-Elementen
    
    07:06
  - Um zur Laufzeit auf Benutzereingaben oder Ereignisse zu reagieren sind Abfragen wie if, else, sowie switch case wichtig. Lernen Sie die Einsatzmöglichkeiten kennen und auf welche verbreiteten Fehler Sie dabei achten müssen.
    
    Abfragen und Vergleiche
    
    14:29
  - Schleifen können zur Wiederholung von Codeblöcken verwendet werden. Beispielsweise können Sie gewisse Funktionen so lange durchführen, bis eine vorgegebene Bedingung erfüllt ist. Auch das automatische Auslesen von Array- und Objekt-Eigenschaften über Schleifen ist möglich.
    
    Schleifen und Wiederholungen
    
    13:23
  - Funktionen bilden mit den Kern vom AJAX-Framework und der professionellen Programmierung. In dieser Lektion lernen Sie die Definition von Funktionen samt Übergabe-Parametern und Rückgabewerten kennen und auch Tipps und Tricks.
    
    Funktionen und externe Bibliotheken
    
    13:33
  - In Webapplikationen können während der Laufzeit immer wieder Fehler auftreten. JavaScript bietet einige Techniken, um Fehler abzufangen oder diese gar selbst auszulösen. Lernen Sie in diesem Film, wie Sie mit diesen umgehen und darauf zur Laufzeit reagieren.
    
    Fehler abfangen / ExceptionHandling
    
    08:02
- AJAX setzt intensiv auf client-seitiges Scripting mit JavaScript. Dieses Kapitel vermittelt Ihnen in kompakter Form die wichtigsten JavaScript-Konzepte, die Sie in Ihrer täglichen Arbeit benötigen werden.
  
  Objektorientierte Programmierung
  - Der Sprung von der klassischen Programmierung zur objektorientierten Programmierung bringt nur wenige Neuerungen mit sich - und hat es trotzdem in sich! Der Umgang und vor allem der richtige Einsatz der Klassen, Instanzen, Methoden und Eigenschaften muss unbedingt erlernt werden.
    
    Objektorientierte Programmierung
    
    11:30
  - JavaScript kennt zwar Objekte, bietet aber kein Klassenkonzept. In diesem Film lernen Sie zwei Methoden kennen, Objekte zu erzeugen: Entweder definieren Sie einen Prototyp eines Object() oder Sie erzeugen eine Vorlage über eine Function().
    
    Objekte in JavaScript erzeugen
    
    08:54
  - Neben Eigenschaften besitzen Objekte auch spezielle Funktionalitäten, um die Eigenschaften zu bearbeiten: Methoden sind als Funktionen definierte Codeblöcke, über die alle Instanzen der betroffenen Objekte sofort verfügen können.
    
    Objektmethoden erzeugen
    
    04:13
  - Die Autoren demonstrieren anhand von drei Objekten, welche Methoden es geben kann, wie man dank selfhtml online Erklärungen dazu bekommt und wie schnell man damit ans Ziel kommt.
    
    Vordefinierte JS-Objekte
    
    08:38
  - Um Informationen über den Browser zu erhalten, stehen dem Programmierer einige Browser-Objekte zur Verfügung. Angefangen mit Informationen zum eingesetzten Browser und einigen Optionen über die horizontal und vertikal verwendbare Auflösung geht es bis zum Verlauf des Browsers.
    
    Browser-Objekte
    
    07:51
- Das DOM ist eine der wichtigsten Basistechnologien in AJAX, da es ermöglicht, HTML-Dokumente zur Laufzeit zu verändern. Lernen Sie die Grundbegriffe und den Umgang damit kennen - die Autoren führen Sie Schritt für Schritt tiefer in die Materie.
  
  Document Object Model (DOM)
  - Lernen Sie die Grundlagen des DOMs und das Node-Konzept kennen. Im Film nutzen die Autoren den DOM-Inspektor, um eine erste Übersicht zu erhalten und gehen danach auf die Auswahl und Veränderung einzelner Nodes ein.
    
    Einführung in das Document Object Model
    
    14:13
  - Mit Hilfe der 'document.getElementBy...'-Methoden können Sie mehrere nicht zusammenhängende Elemente selektieren. Dies ist wichtig, um diese in einer weiteren Schleife wie gefordert zu modifizieren.
    
    DOM-Elemente selektieren
    
    09:02
  - In diesem Film sehen Sie die Zusammenarbeit zwischen JavaScript, DOM und CSS: Ein bestimmter Absatz bekommt ein Stylesheet-Klasse zugewiesen, erste Einflüsse von AJAX werden bemerkbar!
    
    DOM-Elemente formatieren
    
    08:26
  - Eine der Hauptaufgaben von AJAX-Applikationen ist das Aktualisieren von Text-Inhalten. Dazu lernen Sie hier die Text-Node-Eigenschaft 'data' kennen, die im Beispiel dazu verwendet wird, deutschen gegen englischen Text auszutauschen.
    
    DOM Text-Knoten aktualisieren
    
    06:40
  - In diesem Film lernen Sie, DOM-Elemente wie Text- und Element-Nodes dynamisch zu erzeugen, an die passende Stelle Ihrer geöffneten Webseite zu bringen und gegebenenfalls auch zu löschen. Konkret ist es eine Aufzählung, die generiert wird.
    
    DOM Elemente hinzufügen + löschen
    
    10:26
  - Mit Hilfe der Methode 'insertBefore' können in einen bestehenden Dokumentenbaum gezielt zwischen Elementen neue Nodes eingefügt werden - wenn man aufpasst! Zudem wird auch das Zuweisen von Attributen besprochen.
    
    DOM-Elemente einfügen und Attribute
    
    09:30
  - Um zur Laufzeit Knoten auszutauschen, können Sie 'replaceChild' nutzen. Somit können Sie in Ihren AJAX-Applikationen Bilder und Texte beliebig austauschen - was die Autoren im Beispiel auch vorführen.
    
    DOM-Elemente ersetzen
    
    04:27
- Das Reagieren auf Ereignisse gehört zum 'guten Ton' moderner Anwendungen - erst recht trifft das auf Webapplikationen zu. Die Filme dieses Kapitels erklären die einzelnen Arten von Ereignissen und zeigen die leider unterschiedlichen Ansätze von Microsoft und W3C.
  
  Events in JavaScript
  - Der erste Film dieses Kapitels erklärt die Grundzüge der Event-Idee, warum diese bei grafischen Oberflächen eine so große Rolle spielt - und zeigt anhand eines MouseOver-Effekts die Umsetzung mit JavaScript.
    
    Einführung JavaScript Events
    
    09:03
  - Schon beim Öffnen einer Seite passiert der erste Event, den man sehr gut einsetzen kann: 'onload'. In einem Beispiel ersetzt der Autor automatisiert einen Text-Platzhalter durch die aktuellen Werte für Zeit/Datum. Und: Beim nächsten Reload sind diese Werte wieder auf dem neuesten Stand!
    
    Dokumenten-Events
    
    06:33
  - Nicht nur Grafiken kennen die Events 'onmouseover' und 'onmouseout' - auch bei rein textbasierten Hyperlinks werden diese ausgelöst. Zusätzlich gibt es noch 'onclick' und 'ondblclick', mit denen Sie einen Klick bzw. Doppelklick auf den Hyperlink behandeln können.
    
    Events von Hyperlinks
    
    06:10
  - Was mit CSS (noch) nicht reibungslos funktioniert, kann man sich mit AJAX recht schnell bauen: Events an bestimmte Tags binden, damit z. B. alle Hyperlinks einen MouseOver-Effekt aufweisen.
    
    Events auf Tags
    
    07:14
  - Am Beispiel eines Bestellformulars, in dem man Produkte aus einer Liste wählt, die gewünschte Anzahl eintippt und dann abschickt, demonstriert der Autor die Möglichkeiten und Vorteile, die man durch den raffinierten Einsatz von AJAX erreichen kann.
    
    Events in Formularen
    
    13:05
  - Leider gibt es bei den Events - wie so oft im Internet - nicht nur eine Art und Weise, sondern zwei zueinander inkompatible Methoden: W3C und Microsoft möchten ihrer eigenen Lösung zum Durchbruch verhelfen. Im Film erfahren Sie die Unterschiede, die Sie berücksichtigen können/müssen.
    
    Die Event-Modelle
    
    05:52
  - In diesem Film sehen Sie den Aufbau einer Serververbindung aus einem Mausklick heraus, wobei die unterschiedlichen Wege der verschiedenen Browser berücksichtigt werden (müssen). Lernen Sie, wie Sie den Status der Übertragung abfragen können.
    
    Datentransfer per XMLHttpRequest
    
    14:21
  - Eine Verbindung ohne XMLHttpRequest aufzubauen ist das Ziel dieses Films. Anhand einer Diashow zeigt der Autor, wie Sie XML-Daten verwenden können, ohne den Aufwand der Verbindungsaufnahme zu betreiben.
    
    Verbindung ohne XMLHttpRequest I
    
    07:12
  - Mit der Initialisierung eines Timers ist die Grundlage für einen regelmäßigen Austausch der Bilder gebildet. Die entsprechende Funktion verändert dafür einfach die src-Eigenschaft des Objekts.
    
    Verbindung ohne XMLHttpRequest II
    
    09:15
  - Die Vorbereitung für die nachfolgende XML-Verarbeitung ist Thema dieses Films. Die Serververbindung muss erst aufgebaut werden, bevor man die Knoten des XML-Objekts durchlaufen kann.
    
    XML-Dateien mit JavaScript I
    
    12:36
  - Das Auslesen der XML-Struktur mit seinen Knoten, Unterknoten und Eigenschaften wird von JavaScript inzwischen gut unterstützt. Erfahren Sie in diesem Film, wie auch Sie das einsetzen können.
    
    XML-Dateien mit JavaScript II
    
    12:53
  - In diesem Film können Sie Enrico Reinsdorf über die Schulter sehen, wie er Datensätze aus einer Datenbank übernimmt und in eine DOM-Struktur einbaut. Nach der Verbindungsaufnahme und der Datenanforderung übernimmt er die Daten in ein DOM-Objekt.
    
    Per PHP eine XML-Datei erzeugen I
    
    07:58
  - Wenn jedes Feld in der Struktur nur einmal vorkommen kann, ist der Aufwand gering. Was aber, wenn - wie im Beispiel - das Feld 'Autoren' möglicherweise mehrfach vorkommt?
    
    Per PHP eine XML-Datei erzeugen II
    
    08:23
Mit so genannten 'Frameworks' können Sie die Programmierarbeit anderer Entwickler für Ihre eigenen Projekte nutzen und so entweder schneller ans Ziel kommen oder höhere Ziele erreichen. Die Filme in diesem Kapitel stellen die wichtigsten Frameworks vor.

Frameworks

ca. 40 min
- Das Internet ist nicht nur das Ziel der AJAX-Entwickler, sondern auch Quelle für Frameworks, die hoffentlich die häufig verwendeten Funktionen beinhalten. Damit erspart sich der Entwickler die Zeit der Programmierung und des Tests - er oder sie kann sich auf die 'kreativen' Teile stürzen.
  
  Übersicht der aktuellen Frameworks
  
  14:10
- Mit dem ersten Framework 'prototype' realisiert der Autor einen eventgesteuerten Austausch von Seitenteilen. Die Einbindung der Bibliothek ist schnell geschehen, und dank der flexiblen Funktion 'Ajax.Updater' ist auch der Rest der Aufgabe bald gelöst!
  
  Ein kleines Prototype-Beispiel
  
  05:27
- Die Einbindung dieses Frameworks funktioniert genauso, und auch hier überrascht die Mächtigkeit der gebotenen Funktionen: Events werden nicht mehr 'anonym' in einem Array gesammelt, sondern selektiv an Tags gebunden.
  
  Fenstergröße ändern per Script.aculo.us
  
  04:41
- Bis Sie Layer per Drag & Drop verschieben können, haben Sie viele Zeilen Code geschrieben und einige Zeit beim Testen zugebracht. Genug damit - sehen Sie sich diesen Film an, in dem der Autor mit wenig Aufwand Rahmen verschiebbar macht und sich hinterher mit optischen Effekten auseinander setzt.
  
  Weitere Effekte mit Script.aculo.us
  
  08:06
- Ein Array bekommt eine Reihe von Bereichen, die mit IDs ansprechbar sind, und enthält die vorgesehenen Reaktionen auf diese Events. Danach muss nur noch eine Methode aus dem Framework diese Regeln registrieren - fertig! Im Beispiel entsteht so eine 'schlaue Liste'.
  
  CSS-Regel in Behaviour nutzen
  
  04:53
In umfangreichen Beispielen demonstriert der Autor die Zusammenarbeit von JavaScript und PHP. Die Suche in XML-Daten, die Texteinblendung zu Bildteilen und ein Chat-System auf AJAX-Basis machen Sie fit für die Praxis!

Workshops

ca. 65 min
- Das Beispiel beginnt mit der Suche nach einem vorgegebenen Zeichen in den Feldern Vorname und Nachname in einer XML-Datei. Der Autor übernimmt XML-Daten und durchsucht diese Knoten für Knoten. Und für jeden gefundenen Mitarbeiter erzeugt er eine neue Ausgabezeile. - Alles per PHP-Script!
  
  Das PHP-Script
  
  12:56
- Mit der Unterstützung des prototype-Frameworks definiert der Autor eine Suche, die sofort nach dem ersten eingetippten Buchstaben startet. Die Bearbeitung und Übergabe des Suchbegriffs aus dem Formular an den PHP-Server wird per prototype-Funktion stark verkürzt.
  
  Das AJAX-Script
  
  05:47
- Interaktivität pur: Ein Foto mit 10 Gesichtern soll so aufgewertet werden, dass mit dem Mauszeiger ein Gesicht selektiert wird und in einem frei verschiebbaren Fenster einige Textinfos zu dieser Person angezeigt werden.
  
  Interaktive Mitarbeiterinfos I
  
  08:14
- Einige Frameworks machen die interessante Lösung leichter, der MSIE wieder schwerer! Ein frei verschiebbares 'Fenster' ist dabei noch das kleinste Problem, die Generierung der Events für die einzelnen Bildbereiche verursacht Ärger ...
  
  Interaktive Mitarbeiterinfos II
  
  12:22
- Das letzte Beispiel ist ein Chat, der mit AJAX-Techniken 'betrieben' wird. Über einige Befehle aus den vorgestellten Frameworks kommt der Autor recht schnell dazu, den Server abzufragen und die sieben letzten Einträge in einem Feld auszugeben.
  
  Chat-System mit AJAX I
  
  10:24
- Das Absenden der Formulardaten an einen Server wird unterbunden, stattdessen übernehmen JavaScript, PHP und der Entwickler die Kontrolle. Die eingegebenen Daten werden 'escaped' und auf Inhalt überprüft, bevor sie auf den Server geschrieben werden.
  
  Chat-System mit AJAX II
  
  14:24

Dass AJAX seit 2005 derart viel Interesse entgegengebracht wird, hat sicher mit der Firma Google zu tun, die für ihre bekannten interaktiven Anwendungen Google Groups, Google Maps, Gmail und Google Finance AJAX einsetzt. Und dass die Rendering-Engine »Gecko« in Browsern wie Mozilla, Netscape, Firefox oder Camino die AJAX-Techniken gut unterstützt, hat sicherlich auch nicht geschadet.

AJAX-Anwendungen reagieren laufend auf Aktionen des Benutzers und nehmen wenn nötig auch Verbindung mit einem Server auf. Da das im Hintergrund geschieht, ist die Seite selbst nach wie vor benutzbar. Bei klassischen Web-Seiten ist es dagegen so, dass auf eine Anfrage (Formular senden, Hyperlink) hin die Seite neu geladen wird. Verzögert sich die Antwort des Servers, entstehen für den Benutzer unerwünschte Wartezeiten.

Dass nur die wirklich benötigten Daten vom Server geholt und viele Verarbeitungsschritteschon clientseitig behandelt werden, reduziert die übertragene Datenmenge und macht das Arbeiten mit AJAX-Seiten flüssiger. Der größte Vorzug von AJAX sind die geringen Anforderungen: Es ist betriebssystemunabhängig (solange JavaScript läuft), kommt mit allen Webservern zurecht und benötigt kein Browser-PlugIn.

Derzeit sind keine Rezensionen für dieses Produkt vorhanden...

Anne Morath

Wer einsteigen will in das Thema Ajax, der muss auch einsteigen in Javascript. Auf diesem Video hat man den Eindruck, es sei im Wesentlichen eine Einführung in sie Scriptsprache Java. Das Video ist auf jeden Fall den Leuten zu empfehlen, die noch nicht mit Ajax gearbeitet haben. Die sehr guten Beispiele auf dem Video können gleich modifiziert in die eigene Website eingebunden werden. Ich habe sie schon mehrfach auf anderen Webseiten wieder gefunden. Allein dafür lohnt es sich das Video zu kaufen

Ist O.K

Ludwig Astgottel

Hallo, also das Buch ist grandios.. Ein Javascript Crashkurs und zum schluss sollte man schon einen chat programmieren können .. SOLLTE... das ist hier das Stichwort.. , ich finde es werden dann einfach \Dinge\ verwendet die man vorher nicht kannte. Obwohl der Trainer das immer erklärt, finde ich das dann so \einfach mal nach dem Video 2 brain proggen \ zu wenig.. Aber ansonsten SEHR GUT !

Sehr Gut

Jonathan Moritz

Das Tutorial ist sehr gut gelungen und gefällt mir sehr gut. Es gibt einen guten Einstieg in die Javascriptwelt, sodass man die Ajax-Beispiele gut verstehen kann. Ich würde dieses Tutorial keinen Programmieranfängern empfehlen, da es schon auf bestimmte Grundkenntnisse aufbaut. Durch den Javascript Crashkurs gibt es halt nur ein kurzen Einstieg in den Syntax der Sprache, aber keine Anfänger-Programmierhilfe.

Kunden, die dieses Training gekauft haben, kauften auch

AJAX

Interaktive Applikationen für das Web 2.0

Derzeit sind keine Rezensionen für dieses Produkt vorhanden...

Filminformationen