Das Entwicklerbuch für das Web 2.0 ADDISON-WESLEY. An imprint of Pearson Education

Transkript

1 Dave Crane, Eric Pascarello, Darren James in action Das Entwicklerbuch für das Web 2.0 ADDISON-WESLEY An imprint of Pearson Education München Boston San Francisco Harlow, England Don Mills, Ontario Sydney Mexico City Madrid Amsterdam

2 Vorwort 19 Ober dieses Buch 21 Zielgruppe 21 Der Inhalt im Überblick 22 Codeschreibweise 25 Codebeispiele zum Herunterladen 25 Das Author-Online-Forum 25 Teil I Ein neuer Blick auf Webanwendungen 27 1 Ein neues Design für das Web Wozu Rieh Clients mit Ajax? Vergleich des Benutzereindrucks Netzwerklatenz Asynchrone Interaktionen Muster der vorherrschenden und nebensächlichen Verwendung Das Web mit anderen Augen sehen Die vier Grundprinzipien von Ajax Der Browser beherbergt eine Anwendung, keinen Inhalt Der Server übermittelt Daten, keinen Inhalt Die Interaktion von Benutzer und Anwendung kann flüssig ablaufen Ajax erfordert Programmierarbeit und Disziplin Rieh Clients mit Ajax in der Praxis Pioniere Google Maps Alternativen zu Ajax Lösungen mit Macromedia Flash Java Web Start und verwandte Technologien Zusammenfassung Quellen 55 2 Erste Schritte mit Ajax Die Schlüsselelemente von Ajax Den Eindruck mit JavaScript steuern 60

3 2.3 Das Erscheinungsbild mit CSS festlegen CSS-Selektoren Eigenschaften von CSS-Stilen Die Ansicht mit dem DOM gliedern JavaScript für die Arbeit mit dem DOM Einen DOM-Knoten finden Einen DOM-Knoten erstellen Stile zu einem Dokument hinzufügen Kleine Abkürzung: Die Eigenschaft innerhtml Daten mit XML asynchron laden Iframes Die Objekte XmlDocument und XMLHttpRequest Eine Anfrage an den Server senden Callback-Funktionen zur Überwachung von Anfragen Der gesamte Lebenszyklus Was Ajax auszeichnet Zusammenfassung Quellen 95 Ordnung schaffen Ordnung in das Chaos Muster: Ein gemeinsames Vokabular anlegen Refactoring und Ajax Maß halten Refactoring in der Praxis Fallstudien zum Refactoring Browserinkonsistenzen: Die Muster Fassade und Adapter Ereignishandler: Das Muster Beobachter Handler von Benutzeraktionen wiederverwenden: Das Muster Befehl Nur jeweils ein Verweis auf eine Ressource: Das Muster Singleton Modell-Präsentation-Steuerung Webserver-MPS Die Ajax-Webserverschicht ohne Muster Refactgfing des Modells für den Geschäftsbereich Inhalt und Darstellung trennen

4 3.5 Bibliotheken und Frameworks von Drittanbietern Browserübergreifende Bibliotheken Komponenten und Komponentensammlungen Anwendungs-Frameworks Zusammenfassung Quellen 144 Teil II Kerntechniken Die Seite als Anwendung Eine andere Art von MPS Das Muster in verschiedenen Maßstäben wiederholen MPS im Browser anwenden Die Präsentation in einer Ajax-Anwendung Die Logik von der Präsentation fern halten Die Präsentation von der Logik fern halten Die Steuerung in einer Ajax-Anwendung Klassische JavaScript-Ereignishandler Das Ereignismodell des W3C Ein flexibles Ereignismodell in JavaScript umsetzen Modelle in einer Ajax-Anwendung Den Geschäftsbereich mit JavaScript modellieren Serverinteraktion Die Präsentation aus dem Modell gewinnen Reflection für ein JavaScript-Objekt Arrays und Objekte Eine Steuerung hinzufügen Zusammenfassung Quellen Die Rolle des Servers Umgang mit der Serverseite Serverseitige Programmierung Verbreitete Implementierungssprachen N-schichtige Architekturen Client- und serverseitige Geschäftsbereichsmodelle

5 5.3 Der Überblick: Übliche serverseitige Designs Einfache Webserverkodierung ohne Framework Model2-Arbeitsfluss-Frameworks Komponentengestützte Frameworks Dienstorientierte Architekturen Die Einzelheiten: Daten austauschen Auf den Client beschränkte Interaktionen Einführung in das Beispielprojekt des Planetenbrowsers Die Webseite im Mittelpunkt: Inhaltsbezogene Interaktionen Das Plug-in im Mittelpunkt: Skriptbezogene Interaktionen Die Anwendung im Mittelpunkt: Datenbezogene Interaktionen Auf den Server schreiben HTML-Formulare Das XMLHttpRequest-Objekt Wirkungsvoller Umgang mit Benutzeraktualisierungen Zusammenfassung Quellen 239 Teil III Ajax für Profis Der Eindruck auf den Benutzer Hochwertige Anwendungen erstellen Antwortbereitschaft Stabilität Konsistenz Einfachheit Umsetzung Den Benutzer auf dem Laufenden halten Antworten auf eigene Anfragen handhaben Aktualisierungen von anderen Benutzern handhaben Ein Benachrichtigungssystem für Ajax entwerfen Benachrichtigungen modellieren Die Anforderungen an die Benutzerschnittstelle festlegen Ein Benachrichtigungs-Framework implementieren Symbole in der Statusleiste darstellen Ausführliche Benachrichtigungen ausgeben Das Puzzle zusammensetzen Das Framework für Anfragen im Netzwerk verwenden

6 6.6 Die Aktualität der Daten anzeigen Einen einfachen Hervorhebungsstil festlegen Hervorhebungen mit der Bibliothek Scriptaculous Effects Zusammenfassung : Quellen Sicherheit JavaScript und Browsersicherheit Einführung in die Richtlinie des»ursprungsservers« Wichtige Gesichtspunkte für Ajax Probleme bei Subdomänen Browserübergreifende Sicherheit Kommunikation mit Remotediensten Proxys für Remotedienste Webdienste Vertrauliche Daten schützen Man-in-the-middle-Angriffe Secure HTTP verwenden Daten in einfachen HTTP-Verbindungen mit JavaScript verschlüsseln Ajax-Datenströme schützen Eine sichere Webschicht entwerfen Den Zugriff auf Webdaten einschränken Zusammenfassung Quellen Leistung Was ist Leistung? Die Ausführungsgeschwindigkeit von JavaScript Zeitmessung auf die harte Tour Der Venkman-Profiler Die Ausführungsgeschwindigkeit für Ajax optimieren Speicherbedarf für JavaScript Speicherlecks vermeiden Besondere Gesichtspunkte für Ajax Leistungsorientiertes Design Den Speicherbedarf messen Ein einfaches Beispiel Ergebnisse: Speicherbedarf um das isofache verringern 356

7 8.5 Zusammenfassung Quellen 359 Teil IV Ajax in Beispielen Dynamische doppelte Auswahlliste Ein Skript für eine doppelte Auswahlliste Grenzen einer clientseitigen Lösung Grenzen einer serverseitigen Lösung Lösungen mit Ajax Die clientseitige Architektur Das Formular entwerfen Die Client/Server-Interaktion entwerfen Den Server implementieren: VB.NET Das XML-Antwortformat definieren Den serverseitigen Code schreiben Die Ergebnisse darstellen Das XML-Dokument durchsuchen Stylesheets anwenden Ergänzende Themen Abfragen mit Mehrfachauswahl Von der doppelten zur dreifachen Auswahlliste Refactoring Der neue und verbesserte net.contentloader Eine Komponente für doppelte Auswahllisten erstellen Zusammenfassung Auto-Vervollständigen Frameworks für Auto-Vervollständigen Übliche Funktionen für Auto-Vervollständigen Google Suggest Auto-Vervollständigen bei Ajax in Action Das serverseitige Framework: C# Der Server und die Datenbank Den serverseitigen Code testen Das clientseitige Framework Der HTML-Code Der JavaScript-Code Zugriff auf den Server 417

8 10.4 Erweiterte Funktionalität: Mehrere Elemente mit unterschiedlichen Abfragen Refactoring Tag: Den Plan für die Komponente TextSuggest entwickeln Tag: TextSuggest erstellen - sauber und konfigurierbar Tag: Ajax im Einsatz Tag: Ereignisse handhaben Tag: Das Popup-Menü für Vorschläge Nachbereitung Zusammenfassung Das verbesserte Ajax-Webportal Die Evolution der Portale Das klassische Portal Das Portal mit»intelligenter«oberfläche Ajax-Portalarchitektur mit Java Die Ajax-Anmeldung Die Benutzertabelle Der serverseitige Anmeldecode: Java Das clientseitige Anmelde-Framework DHTML-Fenster implementieren Die Datenbank der Portalfenster Der serverseitige Code des Portalfensters Die externe JS-Bibliothek hinzufügen Ajax-Funktionen für die automatische Speicherung Die Bibliothek anpassen Informationen automatisch in der Datenbank speichern Refactoring Den Konstruktor definieren Die Bibliothek AjaxWindows.js anpassen Die Portalbefehle festlegen, Die Ajax-Verarbeitung durchführen Nachbereitung Zusammenfassung Live-Suche mit XSLT Grundlagen zu Suchtechniken Die klassische Suche Die Nachteile der Frame- und Popup-Methoden 507

9 Live-Suche mit Ajax und XSLT Ergebnisse an den Client senden Der clientseitige Code Den Client einrichten ^ Den Vorgang auslösen Der serverseitige Code: PHP Das XML-Dokument erstellen Das XSLT-Dokument erstellen Das XSLT- und das XML-Dokument kombinieren Microsoft Internet Explorer Mozilla Die Suchfunktion vervollständigen Ein Stylesheet anwenden Die Suchfunktion verbessern Warum XSLT? Das Lesezeichen-Problem von Ajax umgehen Refactoring Das XSLTHelper-Objekt Eine Komponente für die Live-Suche Nachbereitung Zusammenfassung Eigenständige Anwendungen mit Ajax erstellen Informationen von außen lesen XML-Feeds im Einsatz Die RSS-Struktur Die intelligente Oberfläche erstellen Der Ablauf Das HTML-Framework ohne Tabellen Konforme CSS-Formatierung Die RSS-Feeds laden Globaler Gültigkeitsbereich Die Vorausladefunktion von Ajax Besondere Übergangseffekte hinzufügen Browserübergreifende Deckkraftregeln Überblendeffekte JavaScript-Timer integrieren

10 13.5 Erweiterte Funktionalität Zusätzliche Feeds einfügen Überspringen und Anhalten Die Einschränkungen überwinden Die Sicherheitseinschränkungen von Mozilla umgehen Den Anwendungsbereich erweitern Refactoring Das Modell des RSS-Readers Die Präsentation des RSS-Readers Die Steuerung des RSS-Readers Nachbereitung Zusammenfassung 597 Anhang 599 A Der Werkzeugkasten des Ajax-Profis 601 A.i Leichter arbeiten mit den richtigen Werkzeugen 601 A.1.1 Die richtigen Werkzeuge zusammenstellen 602 A.1.2 Eigene Werkzeuge erstellen 603 A.1.3 Den Werkzeugkasten pflegen 604 A.2 Editoren und Entwicklungsumgebungen 604 A.2.1 Was ein Code-Editor können muss 604 A.2.2 Das derzeitige Angebot 606 A.3 Debugger 611 A.3.1 Wozu Debugger? 611 A.3.2 JavaScript-Debugger 611 A.3.3 HTTP-Debugger 617 A.3.4 Eine eigene browserübergreifende Ausgabekonsole erstellen 619 A.4 DOM-Inspektoren 622 A.4.1 Der Mozilla DOM Inspector 623 A.4.2 DOM-Inspektoren für Internet Explorer 624 A.4.3 Der Safari-DOM-Inspektor für Mac OS X 625 A.5 Firefox-Erweiterungen installieren 626 A.6 Quellen 629

11 JavaScript für OO-Programmierer 631 B.i JavaScript ist nicht Java 631 B.2 Objekte in JavaScript 633 B.2.1 Ad-hoc-Objekte erstellen 633 ^ B.2.2 Konstruktorfunktionen, Klassen und Prototypen 638 B.2.3 Integrierte Klassen erweitern 641 B.2.4 Vererbung bei Prototypen 642 B.2.5 Reflection von JavaScript-Objekten 643 B.2.6 Interfaces und»duck Typing«645 B.3 Methoden und Funktionen 648 B.3.1 Funktionen als Bürger erster Klasse 648 B.3.2 Funktionen zu Objekten hinzufügen 650 B.3.3 Funktionen von anderen Objekten leihen 650 B.3.4 Die Ereignisbehandlung in Ajax und der Funktionskontext 652 B.3.5 Closures in JavaScript 657 B.3.6 Abschließende Gedanken 660 B.4 Quellen 661 Ajax-Frameworks und -Bibliotheken 663 Danksagungen 677 Stichwortverzeichnis