Produktinformation http://www.hanser.de/deckblatt/deckblatt1.asp?isbn=3-446-40920-3&style=leseprobe Seite 1 von 1 12.09.2006 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
2 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 Anwendungen 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 T heorie 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 unseremfall: 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 Zusammenspiel 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- 39
2 Cleveres JavaScript für die Clientseite zuschauen. Dort werden Tools gezeigt, die einem Programmierer das Leben sehr erleichtern. Bitte überspringen sie diesen wichtigen Teil nicht, denn wen n 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 geschaffen, 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 abzuwarten, 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 Clientbrowser 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 JavaScript 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 sehen, 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 40
2.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 <script> -Element innerhalb des -Elements zu schreiben. Betrachten Sie als Beispiel 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 I nhalt zu füllen: <title>ajax Foundations: JavaScript and DOM</title> <script type="text/javascript"> // neue Variablen deklarieren var date = new Date(); var hour = date.gethours(); // die if-anweisung wird demonstriert if (hour >= 22 hour <= 5) document.write("you should go to sleep."); else document.write("hello, world!"); </script> Die document.write -Befehle generieren Ausgabe, die dem -Element der Seite hinzugefügt wird, wenn das Skript läuft. Da dieser generierte Inhalt zu einem Teil des HTML-Codes der Seite wird, können Sie darin auch HTML-Tags hinzufügen, wenn Sie wollen. Wir raten Ihnen, nach Möglichkeit wohlgeformten und gültigen HTML-Code zu schreiben, denn das verbessert Ihre Chancen, dass die meisten Webbrowser Ihre Seiten auch morgen noch verarbeiten können. Ein guter Artikel über die Befolgung von Web-Standards liegt unter http://www.w3.org/qa/2002/04/web-quality. Eine nützliche Erklärung des DOCTYPE-Elements finden Sie unter http://www.alistapart.com/stories/doctype/. Die Standard-Debatte ist noch längst nicht abgeschlossen, wobei eine Gruppe mit Nachdruck eine strenge Befolgung der Standards fordert, während eine andere einfach nur möchte, dass ihre Webseiten auf den gängigen Browsern ordentlich dargestellt werden. 41
2 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 ver schiedenen Gründen all erdings 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 <script> hinzufügen: <script type="text/javascript" src="file.js"></script> Selbst wenn zwischen den Tags <script> und </script> überhaupt kein Code stehen sollte, verwenden Sie bitte nicht die Kurzform <script type="text/javascript" src="file.js" /> 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: <title>ajax Foundations: JavaScript and DOM</title> <script type="text/javascript" src="jsdom.js"></script> 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 hour <= 5) document.write("goodnight, world!"); else document.write("hello, world!"); 42
2.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 Grundgedanken 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 file:///c:/apache2/htdocs/ajax/foundations/jsdom/jsdom.html öffnen. Wenn Sie eine HTML-Seite mit JavaScript-Code von e inem lokalen Speicherort ( file://) statt eines Webservers (http:// ) öffnen, kann vom Internet Explorer die Warnung 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. Daher 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 kontrollieren können, wo die Ausgabe angezeigt wird. Hier wird die JavaScript-Ausgabe zu- 43
2 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 JavaScript-Funktionen einsetzen, die nur dann ausgeführt wer den, wenn bestimmte Ereignisse (beispielsweise ein Klick auf einen B utton) 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 <div> als Platzhalter benutzt, aber im Laufe dieses Buchs werden Sie noch andere Beispiele sehen. Betrachten Sie nun das folgende HTML-Dokument: <title>ajax Foundations: More JavaScript and DOM</title> Hello Dude! Here's a cool list of colors for you: <br/> <ul> <li>black</li> <li>orange</li> <li>pink</li> </ul> Angenommen, Sie möchten, dass alles in dem <ul>-element dynamisch generiert wird. In einer AJAX-Anwendung setzt man hierfür ein benanntes, leeres <div> -Element an die Stelle, wo etwas dynamisch generiert werden soll: <title>ajax Foundations: More JavaScript and DOM</title> Hello Dude! Here's a cool list of colors for you: <br/> <div id="mydivelement"/> 44