Ajax und PHP Cristian Darie, Bogdan Brinzarea, Mihai Bucica, Filip Chereches
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Produktinformation Seite 1 von 1
Ajax und PHP
Cristian Darie, Bogdan Brinzarea, Mihai
Bucica, Filip Chereches
Interaktive Webanwendungen für das Web 2.0 erstellen
ISBN 3-446-40920-3
Leseprobe
Weitere Informationen oder Bestellungen unter
http://www.hanser.de/3-446-40920-3 sowie im Buchhandel
http://www.hanser.de/deckblatt/deckblatt1.asp?isbn=3-446-40920-3&style=Leseprobe 12.09.20062
2 Cleveres JavaScript für die
Clientseite
Ein Bild sagt mehr als tausend Worte. Und so ist es auch mit einem gut geschriebenen
Stück Code. In diesem und dem nächsten Kapitel werden Sie von beiden eine Menge zu
sehen bekommen, wenn die Grundlagen für Ihre zukünftigen AJAX-fähigen Anwendun-
gen gelegt werden.
Hoffentlich hat das erste Kapitel Ihr Interesse an AJAX so sehr geweckt, dass Sie nun ein
zweites, eher theorielastiges Kapitel auf sich nehmen können. Andererseits: Wenn die
Übung im ersten Kapitel noch etwas zu schwierig war, werden Sie sich vielleicht freuen,
dass dieses Mal etwas langsamer vorwärts geht. Wir werden die Theorie Stück für Stück
mit vielen kurzen Beispielen aufbauen. In diesem Kapitel lernen Sie die AJAX-
Technologien für den Client kennen:
JavaScript
Das JavaScript-DOM
Cascading Style Sheets (CSS)
Das XMLHttpRequest-Objekt
Extensible Markup Language (XML)
Sie werden diese Komponenten so integrieren, dass sie reibungslos zusammenarbeiten,
und eine solide Grundlage für Ihre zukünftigen AJAX-Anwendungen legen. Sie erfahren,
wie man eine wirkungsvolle Fehlerbehandlung implementiert und Code effizient anlegt. In
Kapitel 3 werden die Grundlagen abgeschlossen, indem die serverseitigen Technologien
erläutert werden, das heißt in unserem Fall: PHP, MySQL und andere mehr.
Um ein guter AJAX-Entwickler zu werden, müssen Sie genau wissen, wie die einzelnen
Bausteine separat funktionieren, und in einem zweiten Schritt lernen, wie Sie ein Zusam-
menspiel dieser Komponenten bewirken können. Wir setzen voraus, dass Sie einiges an
Erfahrung mit zumindest einem Teil dieser Technologien mitbringen.
Je nach Ihrem Vorwissen sollten Sie sich vor, während oder nach der Lektüre von Kapitel
2 und 3 ein wenig Zeit nehmen, um Anhang B unter http://ajaxphp.packtpub.com an-
392 Cleveres JavaScript für die Clientseite
zuschauen. Dort werden Tools gezeigt, die einem Programmierer das Leben sehr erleich-
tern. Bitte überspringen sie diesen wichtigen Teil nicht, denn wenn die richtigen Tools
richtig genutzt werden, kann dies einen gewaltigen Unterschied machen.
Alle Beispielanwendungen dieses Buchs finden Sie online unter http://ajaxphp.packt
pub.com/.
2.1 JavaScript und das Document Object Model
Wie bereits in Kapitel 1 erwähnt, ist JavaScript das Herz von AJAX. JavaScript hat eine
ähnliche Syntax wie das gute alte C. JavaScript ist eine geparste Sprache (also keine
kompilierte) und besitzt einige Fähigkeiten für die objektorientierte Programmierung
(OOP). JavaScript wurde ursprünglich nicht für große, mächtige Anwendungen geschaf-
fen, sondern zum Schreiben einfacher Skripten, um die clientseitige Funktionalität einer
Webanwendung zu implementieren oder zu ergänzen. (Es gibt allerdings einen neuen
Trend, JavaScript zu einer Sprache der Enterprise-Klasse auszubauen, doch es bleibt ab-
zuwarten, wie weit dies gehen wird).
JavaScript wird von der überwiegenden Mehrzahl der Webbrowser voll unterstützt. Zwar
ist es möglich, JavaScript-Skripten selbstständig auszuführen, aber normalerweise werden
sie zusammen mit dem HTML-Code, der ihre Funktionalität benötigt, auf den Clientbrow-
ser geladen. Dass der gesamte JavaScript-Code unverändert auf dem Client ankommen
muss, ist zugleich eine Stärke und eine Schwäche, und muss berücksichtigt werden, wenn
ein Framework für eine Web-Lösung geschrieben werden soll. Gute Einführungen in Ja-
vaScript finden Sie an folgenden Stellen:
http://www.echoecho.com/javascript.htm
http://www.devlearn.com/javascript/jsvars.html
http://www.w3schools.com/js/default.asp
Die Mächtigkeit von JavaScript auf der Clientseite beruht zum Teil auf seiner Fähigkeit,
das übergeordnete HTML-Dokument zu manipulieren, und zwar über die DOM-
Schnittstelle. Das DOM ist für eine Vielzahl von Sprachen und Technologien erhältlich,
darunter JavaScript, Java, PHP, C#, C++ und so weiter. In diesem Kapitel werden Sie se-
hen, wie das DOM mit JavaScript und PHP eingesetzt wird. DOM ist in der Lage XML-
ähnliche Dokumente zu manipulieren (erzeugen, modifizieren, parsen, durchsuchen usw.),
darunter auch HTML.
Auf der Clientseite werden DOM und JavaScript für folgende Aufgaben benutzt:
Um eine HTML-Seite zu manipulieren, während jemand auf ihr arbeitet
Um vom Server empfangene XML-Dokumente zu lesen und zu parsen
Um neue XML-Dokumente anzulegen
402.1 JavaScript und das Document Object Model
Auf der Serverseite dienen DOM und PHP zu folgenden Zwecken:
Um XML-Dokumente zu erstellen, normalerweise zur Übermittlung an den Client
Um XML-Dokumente zu lesen, die von verschiedenen Quellen empfangen werden
Zwei gute Einführungen in das DOM sind http://www.quirksmode.org/dom/
intro.html und http://www.javascriptkit.com/javatutors/dom.shtml. Ein schö-
nes Spiel mit DOM finden Sie unter: http://www.topxml.com/learning/games/b/
default.asp. Eine umfassende Referenz zum JavaScript-DOM gibt es unter
http://krook.org/jsdom/. Die Mozilla-Referenz zum JavaScript-DOM liegt unter
http://www.mozilla.org/docs/dom/reference/javascript.html.
Im ersten Beispiel dieses Kapitels wird das DOM von JavaScript eingesetzt, um das
HTML-Dokument zu manipulieren. Wenn Sie einer HTML-Datei JavaScript-Code in eine
HTML-Datei einbetten, so besteht eine Möglichkeit darin, den JavaScript-Code in ein
-Element innerhalb des -Elements zu schreiben. Betrachten Sie als Bei-
spiel die folgende HTML-Datei, die, wenn sie geladen wird, JavaScript-Code ausführt.
Beachten Sie das document-Objekt, ein Standardobjekt von JavaScript, das mit dem DOM
der HTML-Seite interagiert. Hier nutzen wir seine write-Methode, um die Seite mit Inhalt
zu füllen:
AJAX Foundations: JavaScript and DOM
// neue Variablen deklarieren
var date = new Date();
var hour = date.getHours();
// die if-Anweisung wird demonstriert
if (hour >= 22 || hour2 Cleveres JavaScript für die Clientseite
Die Beispiele in diesem Buch enthalten alle gültigen HTML-Code, mit Ausnahme einiger
weniger Fälle, in denen wir die Regeln ein wenig gebeugt haben, damit der Code leichter
zu verstehen ist. Tatsächlich halten sich aus verschiedenen Gründen allerdings nur sehr
wenige Online-Websites genau an die Standards.
Normalerweise sollte der JavaScript-Code in einer separaten .js-Datei angelegt sein, die
von der .html-Datei referenziert wird. So können Sie den HTML-Code sauber halten und
allen JavaScript-Code an einer einzigen Stelle zusammenfassen. Sie können eine Java-
Script-Datei im HTML-Code referenzieren, indem Sie dem -Element ein Child-
Element namens hinzufügen:
Selbst wenn zwischen den Tags und überhaupt kein Code stehen sollte,
verwenden Sie bitte nicht die Kurzform Diese verursacht nämlich Probleme mit dem Internet Explorer 6, der die
JavaScript-Seite in einem solchen Fall nicht laden würde.
Betrachten wir eine kurze Übung.
Showtime: JavaScript und das DOM
1. Legen Sie in Ihrem ajax-Ordner einen Unterordner namens foundations an. Dieser
wird für alle Beispiele in diesem und dem nächsten Kapitel gebraucht.
2. Im foundations-Ordner erstellen Sie einen Unterordner namens jsdom.
3. Im Ordner jsdom legen Sie eine Datei namens jsdom.html an, die folgenden Code
enthält:
AJAX Foundations: JavaScript and DOM
I love you!
4. In demselben Ordner erzeugen Sie nun eine Datei namens jsdom.js und speichern
darin folgenden Code:
// neue Variablen deklarieren
var date = new Date();
var hour = date.getHours();
// die if-Anweisung wird demonstriert
if (hour >= 22 || hour2.1 JavaScript und das Document Object Model
5. Laden Sie nun http://localhost/ajax/foundations/jsdom/jsdom.html in Ihren
Webbrowser. Wenn es noch nicht sehr spät ist, erscheint die Nachricht aus Abbildung
2.1 (wenn es 22.00 Uhr durch ist, kommt eine etwas andere, aber ebenso romantische
Nachricht).
Abbildung 2.1 Das Hello World-Beispiel mit JavaScript und dem DOM
Was ist passiert?
Der Code ist so einfach, dass man ihn nicht weiter erläutern muss. Folgende Grundgedan-
ken sind wichtig:
Da kein Skript auf der Serverseite (beispielsweise PHP) beteiligt ist, können Sie die
Datei lokal direkt von der Festplatte in Ihren Browser laden, anstatt sie von einem
HTTP-Webserver zu holen. Wenn Sie die Datei unmittelbar lokal ausführen, würde ein
Browser sie höchstwahrscheinlich automatisch an einer lokalen Adresse wie etwa fi-
le:///C:/Apache2/htdocs/ajax/foundations/jsdom/jsdom.html öffnen.
Wenn Sie eine HTML-Seite mit JavaScript-Code von einem lokalen Speicherort (fi-
le://) statt eines Webservers (http://) öffnen, kann vom Internet Explorer die War-
nung kommen, dass Sie sensiblen Code ausführen (mehr über Sicherheit in Kapitel 3).
Da in JavaScript Variablen nicht deklariert werden müssen, können Sie theoretisch
auch auf die var-Schlüsselwörter verzichten. Dies wird jedoch nicht empfohlen.
Das JavaScript-Skript läuft automatisch ab, wenn Sie die HTML-Datei öffnen. Sie
können den Code aber auch in JavaScript-Funktionen zusammenfassen, die nur dann
ausgeführt werden, wenn man sie explizit aufruft.
Der JavaScript-Code wird ausgeführt bevor der andere HTML-Code geparst wird. Da-
her wird auch seine Ausgabe vor der HTML-Ausgabe angezeigt. Beachten Sie, dass
"Hello World!" vor "I love you!" steht.
Ein Problem mit diesem Programm besteht darin, dass Sie im JavaScript-Code nicht kon-
trollieren können, wo die Ausgabe angezeigt wird. Hier wird die JavaScript-Ausgabe zu-
432 Cleveres JavaScript für die Clientseite
erst und der Inhalt des -Elements danach angezeigt. Dieses Szenario taugt natürlich
noch nicht einmal für die einfachsten Anwendungen.
Von ganz trivialen Fällen einmal abgesehen, reicht es nicht aus, einfach JavaScript-Code
so zu schreiben, dass er ohne Umschweife sofort ausgeführt wird, wenn die HTML-Seite
geladen wird. Normalerweise benötigen Sie mehr Kontrolle darüber, wann und wie Teile
des JavaScript-Codes ausgeführt werden. Das typischste Szenario läuft so ab, dass Sie Ja-
vaScript-Funktionen einsetzen, die nur dann ausgeführt werden, wenn bestimmte Ereignis-
se (beispielsweise ein Klick auf einen Button) auf der HTML-Seite ausgelöst werden.
2.2 JavaScript-Ereignisse und das DOM
In der folgenden Übung werden wir eine HTML-Struktur aus JavaScript-Code erzeugen.
Wenn Sie eine Webseite vorbereiten, die dynamisch generierte Teile enthält, müssen Sie
zuerst ein Template mit den statischen Teilen anlegen und dann für die dynamischen Teile
Platzhalter verwenden. Diese Platzhalter müssen eindeutig zu identifizierende HTML-
Elemente sein (also Elemente, bei denen das ID-Attribut gesetzt ist). Bisher haben wir das
Element als Platzhalter benutzt, aber im Laufe dieses Buchs werden Sie noch ande-
re Beispiele sehen.
Betrachten Sie nun das folgende HTML-Dokument:
AJAX Foundations: More JavaScript and DOM
Hello Dude! Here's a cool list of colors for you:
Black
Orange
Pink
Angenommen, Sie möchten, dass alles in dem -Element dynamisch generiert wird. In
einer AJAX-Anwendung setzt man hierfür ein benanntes, leeres -Element an die
Stelle, wo etwas dynamisch generiert werden soll:
AJAX Foundations: More JavaScript and DOM
Hello Dude! Here's a cool list of colors for you:
44Sie können auch lesen
