Das Website Handbuch. Programmierung und Design C. WENZ T. HAUSER F. MAURICE

Transkript

1

2 Das Website Handbuch Programmierung und Design C. WENZ T. HAUSER F. MAURICE

3 DHTML-Praxisanwendungen function setzevariablen(e) { if (document.all) { x = event.clientx; y = event.clienty; else if (document.layers document.getelementbyid) { x = e.pagex; y = e.pagey; x -= 25; y -= 25; function bewege() { if (document.all) { document.all.kugel.style.posleft = x; document.all.kugel.style.postop = y; else if (document.layers) { document.kugel.left = x; document.kugel.top = y; else if (document.getelementbyid) { document.getelementbyid("kugel").style.left = x + "px"; document.getelementbyid("kugel").style.top = y + "px"; //--></script> </head> <body> <div id="kugel" style="position:absolute;"> <img src="kugel_klein.png" border="0" width="50" height="39" /> </div> </body> </html> Abbildung 5.49: Den Mauszeiger mit Bild bewegen 287

4 Kapitel 6 Ajax Kapitelübersicht» Ajax-Grundlagen» Glossar mit Ajax» Dojo» jquery JavaScript mit dem Server verbinden Ajax ist ein neues Schlagwort, das JavaScript wieder salonfähig gemacht hat und neue Formen der Nutzerführung für einige Webanwendungen erlauben soll. Ajax stand ursprünglich für Asynchronous JavaScript + XML, bezeichnet also die Kombination von JavaScript und XML. Geschaffen wurde dieses Schlagwort von Jesse James Garret in seinem Artikel»Ajax: A New Approach to Web Applications«( Der Artikel ist zwar interessant, aber Ajax ist an sich ein ziemlicher Marketingbegriff. Zum einen muss das Ganze nicht unbedingt mit XML ablaufen, zum anderen ist der Ansatz bei Weitem nicht neu. Google hat in seinen Beta-Projekten schon lange vor dem Ajax-Artikel echte Ajax-Anwendungen umgesetzt, und einige andere Firmen hatten ebenfalls eine Vorreiterrolle. Dennoch ist die Technologie dahinter interessant. Die Basis von Ajax bildet das XMLHttpRequest-Objekt. Ursprünglich eingeführt wurde dieses Objekt als ActiveX-Element im Internet Explorer. Der Urheber war die Arbeitsgruppe zum Outlook Web Access, der Internetschnittstelle für das Mail- und Arbeitsprogramm Outlook. Ähnliche Ansätze wie mit Ajax konnte man schon früher beispielsweise mit versteckten Frames oder speziellen Internet Explorer-Funktionen erreichen. Das XMLHttpRequest-Objekt ist allerdings etwas einfacher zu handhaben, und viele serverseitige Technologien bieten mittlerweile Bibliotheken, die das einfache Erstellen von Ajax-Anwendungen erlauben. 288

5 Ajax-Grundlagen Nach und nach wurde das XMLHttpRequest-Objekt auch für andere Browser implementiert, zuerst für das Mozilla-Projekt und damit für Firefox und Konsorten, anschließend auch für den Safari. Apple hat die Implementierung dann an das Konqueror-Projekt zurückgegeben. Und auch der Opera besitzt mittlerweile das für Ajax notwendige Objekt. Beleuchten wir nun etwas genauer, was eigentlich bei Ajax passiert: 1. Der Nutzer ruft per Link oder über die Adressleiste des Browsers eine URL auf. 2. Der Webserver liefert ihm daraufhin eine HTML-Seite mit ein wenig JavaScript. So weit handelt es sich um das klassische Client-Server-Modell des Web. Ob die HTML-Seite von einer serverseitigen Technologie wie PHP generiert wurde, spielt dabei keine Rolle. 3. Das JavaScript erzeugt auf dem Client das XMLHttpRequest-Objekt. 4. Das Objekt schickt bei einem beliebigen JavaScript-Ereignis eine Anforderung an ein serverseitiges Skript, das in einer beliebigen serverseitigen Technologie geschrieben ist oder auch ein XML-Dokument sein kann. 5. JavaScript erhält die Antwort vom serverseitigen Skript. Dieser Aufruf erfolgt ohne Neuladen der eigentlichen HTML-Seite. Die Arbeit erledigt JavaScript im Hintergrund. Das»asynchron«in der Abkürzung bedeutet dabei, dass das Skript weiter ausgeführt wird, während der Webserver noch antwortet. Eine Webanwendung kann beliebig viele solcher Ajax-Aufrufe durchführen die Schritte 4 und 5 können sich also beliebig wiederholen. Abbildung 6.1: Das Ajax-Modell (PHP als Beispiel für serverseitige Technologie) 6.1 Ajax-Grundlagen Um eine Ajax-Verbindung zu erhalten, erstellen Sie zuerst eine Variable für das XMLHttpRequest- Objekt: var xmlhttp = null; Anschließend müssen Sie sich um die unterschiedlichen Browser kümmern. Der Internet Explorer implementiert das Objekt als ActiveX-Objekt, alle anderen Browser als normales Objekt. Allerdings 289

6 Kapitel 6 Ajax kennt der Internet Explorer leider noch zwei unterschiedliche XML-Varianten. Mit einer Fallunterscheidung und den entsprechenden Browserobjekten werden Sie dem gerecht: if (window.activexobject) { try { xmlhttp= new ActiveXObject("Msxml2.XMLHTTP"); catch (e) { try { xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); catch (e) { else if (window.xmlhttprequest) { try { xmlhttp= new XMLHttpRequest(); catch (e) { Die Konstruktion mit try { und catch { dient dabei dazu, Fehler abzufangen. Im try-block steht der Code, den Sie»versuchen«möchten, also das potenzielle Fehlerrisiko. Im catch-block wird der Fehler abgefangen und steht als Objekt (e) zur Verfügung. Im vorliegenden Beispiel verarbeiten wir den Fehler nicht, sondern verhindern einfach, dass eine Fehlermeldung ausgegeben wird. Wenn das Objekt erfolgreich erstellt wurde, können Sie mit der Methode open(versandmethode, URL, Asynchron) auf das serverseitige Skript zugreifen, sprich die Ajax-Anfrage zusammenstellen. Als ersten Parameter geben Sie die Versandmethode an. Zur Wahl stehen die zwei HTTP-Versandmethoden, die auch für Formulare verwendet werden:» GET versendet Daten angehängt an die URL.» POST verwendet Daten unterhalb des HTTP-Headers. Mehr zu den Vor- und Nachteilen siehe Kapitel 11,»PHP«. Als zweiten Parameter geben Sie die URL des serverseitigen Skripts oder der XML-Datei an, die angefragt werden soll. Als dritter Parameter folgt ein Wahrheitswert, der angibt, ob asynchron oder synchron angefragt werden soll. Entsprechend der Ajax-Idee wird hier in der Praxis meist»asynchron«, sprich true zum Einsatz kommen. Nun müssen Sie noch auf die Antwort des Servers reagieren. Dafür gibt es ein Ereignis: onreadystatechange. Es tritt immer ein, wenn sich der Status der Ajax-Anfrage ändert. Diesem Ereignis weisen Sie eine Funktion zu, die sich um das Ereignis kümmert (einen sogenannten Event-Handler). Zum Schluss versenden Sie die Anfrage mit send(). if (xmlhttp) { xmlhttp.open("get", URL, true); xmlhttp.onreadystatechange = Handler; xmlhttp.send(null); Nun müssen Sie nur noch den Event-Handler für onreadystatechange schreiben. Hier verarbeiten Sie die Antworten des serverseitigen Skripts. Das sollte allerdings erst geschehen, wenn die Antwort komplett eingegangen ist. onreadystatechange kennt davor allerdings noch einige andere Status:» 0 Objekt ist nicht initialisiert» 1 Anfrage lädt 290

7 Glossar mit Ajax» 2 Anfrage ist geladen» 3 Anfrage wartet auf Nutzerinteraktion» 4 Anfrage ist komplett Im Regelfall wollen Sie im Event-Handler nur auf den letzten Fall reagieren. Mit der Eigenschaft readystate können Sie dies herausfiltern: function Handler() { if (xmlhttp.readystate == 4) { Anweisungsblock; Im Anweisungsblock können Sie natürlich auf das in der Antwort mitgelieferte XML oder den gelieferten Text zugreifen. Er steckt in der Eigenschaft responsexml bzw. responsetext des XMLHttpRequest- Objekts. Sie können es nun beispielsweise ausgeben: function Handler() { if (xmlhttp.readystate == 4) { alert(xmlhttp.responsetext); Bei der Übergabe von Daten verwendet die Ajax-Welt neben XML nicht nur normalen Text, sondern auch das JSON-Format ( Dabei handelt es sich um eine Kurzschreibweise für JavaScript-Arrays und Objekte als Zeichenketten. Die Zeichenkette mit den JavaScript-Arrays oder -Objekten kann dann mit dem JavaScript-Befehl eval() umgewandelt werden. Hier ein Beispiel: ["Element 1", "Element 2"] Dies ist ein Array mit zwei Elementen. Ein Objekt steht dagegen in geschweiften Klammern und besteht immer aus einem Name/Wert-Paar: var objekt = { Name: "Wert", Name2: "Wert2" ; JSON 6.2 Glossar mit Ajax Sie kennen aus dem letzten Abschnitt die Einzelteile einer Ajax-Anfrage. Nun setzen wir das Ganze zu einem Beispiel zusammen. Das Beispiel besteht aus einem Textfeld. Wenn der Nutzer dort einen Buchstaben eintippt, werden im serverseitigen Skript alle passenden Begriffe aus einem Glossar geholt und dank Ajax ohne Neuladen der Seite angezeigt. Praxisanwendung mit Ajax Um Ajax auf Ihrem Rechner ausprobieren zu können, benötigen Sie einen lokalen Webserver. Wie Sie diesen einrichten, erfahren Sie in Anhang A. Als serverseitige Technologie kommt hier PHP zum Einsatz. Im entsprechenden Kapitel 11 erfahren Sie die notwendigen Grundlagen und Details. Sie können alternativ auch jede andere Technologie verwenden und zum Testen einfach nur einen String zurückliefern. Den Anfang macht in der Beschreibung des serverseitigen PHP-Skripts: 291

8 Kapitel 6 Ajax Listing 6.1: Der Ajax-Server (ajax_server.php) <?php $schlagwoerter = array('ajax' => 'eine Technologie für asynchrone Aufrufe', 'JavaScript' => 'eine clientseitige Skriptsprache', 'Java' => 'eine Programmiersprache, die nichts mit JavaScript zu tun hat', 'PHP' => 'eine serverseitige Programmiersprache'); $ergebnisse = array(); $suchbegriff = (isset($_get["q"]) && is_string($_get["q"]))? $_GET['q'] : ''; foreach ($schlagwoerter as $schlagwort => $wert) { $teilstring = substr($schlagwort, 0, strlen($suchbegriff)); if ($teilstring == $suchbegriff) { $ergebnisse[] = $schlagwort. ': '. $wert; sort($ergebnisse); echo implode($ergebnisse, '<br />'); exit();?> Die Schlagwörter des Glossars sind hier der Einfachheit halber in einem Array versammelt. In der Praxis könnten sie auch aus einer Datenbank oder einer Datei ausgelesen werden. Der gesuchte Begriff wird von der Ajax-Anwendung als URL-Parameter übergeben. Deswegen liest ihn das serverseitige Skript mit $_GET['q'] aus. Anschließend sucht es die Schlagwörter des Glossars, die mit dem Suchbegriff übereinstimmen, und speichert diese in einem Array. Dieses Array wird mit implode() in einen String umgewandelt und ausgegeben. Diese Ausgabe ist es, was die Ajax-Anwendung als Antwort erhält. Nun zur Ajax-Anfrage in der HTML-Datei ajax.html. Das Ereignis onkeyup im Textfeld ruft jedes Mal, wenn der Nutzer einen Buchstaben eingibt, die Funktion glossar() auf und übergibt den Wert des Textfelds Letzterer wird dann zum Suchbegriff. <form> <input type="text" id="suchfeld" name="suchfeld" onkeyup="glossar(this.value)" /> <div id="output"></div> </form> Das Herzstück ist die Funktion glossar(). Hier wird zuerst, wie im letzten Abschnitt gezeigt, das XMLHttpRequest-Objekt initialisiert. Anschließend folgt die Ajax-Anfrage: if (xmlhttp) { xmlhttp.open('get', 'ajax_server.php?q=' + escape(wert), true); xmlhttp.onreadystatechange = daten; xmlhttp.send(null); Die URL, die angefragt wird, ist das serverseitige Skript. Wenn Sie eine relative Adresse verwenden, muss die HTML-Seite auch auf dem Webserver liegen. Zusätzlich wird als URL-Parameter der Wert des Textfelds sprich der Suchbegriff übergeben. Mit escape() wird er in ein URL-kompatibles Format umgewandelt. Damit weiß das serverseitige Skript, welchen Glossarbegriff es liefern soll. Um die Verarbeitung der Rückgabe kümmert sich die Funktion daten() als Event-Handler: function daten() { if (xmlhttp.readystate == 4) { text = 'Gefundene Begriffe: <br \/>' + xmlhttp.responsetext; document.getelementbyid('output').innerhtml = text; 292

9 Glossar mit Ajax Sie gibt die gefundenen Begriffe im <div>-element in der HTML-Seite aus. Hier das komplette Listing in der Übersicht: Listing 6.2: Die clientseitige Datei für das Ajax-Glossar (ajax.html) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>ajax</title> <script language="javascript" type="text/javascript"></script> </head> <body onload="javascript:glossar()"> <form> <input type="text" id="suchfeld" name="suchfeld" onkeyup="glossar(this.value)" /> <div id="output"></div> </form> </body> </html> 293

10 Kapitel 6 Ajax Abbildung 6.2: Der Nutzer tippt und erhält nach jedem Buchstaben... Abbildung 6.3:... die passenden Begriffe 6.3 Dojo Für einfache Ajax-Anwendungen, wie sie hier gezeigt wurden, sind an sich nur wenige Zeilen JavaScript-Code notwendig. Allerdings kann auch dies noch einmal vereinfacht werden, indem Sie eine serverseitige Bibliothek verwenden. Solche Bibliotheken oder Frameworks gibt es für PHP in Massen, aber auch für ASP.NET und viele andere Technologien finden sich Lösungen. Der Vorteil liegt auf der Hand: Sie programmieren ausschließlich oder hauptsächlich serverseitig und der JavaScript-Code wird generiert. Für PHP finden Sie eine entsprechende Lösung in Kapitel 13 und für ASP.NET in Kapitel 16. In diesem Kapitel kommen rein JavaScript-basierte Bibliotheken zum Einsatz, die keine direkte Anbindung an eine bestimmte serverseitige Technologie besitzt. Rein JavaScript-basierte Ajax-Bibliotheken haben sich meistens aus schon länger bestehenden JavaScript-Bibliotheken entwickelt. Beispiele dafür sind Prototype und MooTools. Und in diese Reihe gehört auch das bekannte Framework Dojo ( Aktuell ist es in verschiedenen Varianten verfügbar. Die Basis-Version enthält eine kompakte Variante mit den wichtigsten Inhalten sie enthält den kompletten Kern. Die erweiterte Toolkit-Version enthält noch sogenannte Widgets, vorgefertigte Elemente und Effekte, im Paket Dijit. DojoX ist schließlich ein Paket mit innovativen Neuerungen. Wenn Sie das Toolkit von der Website heruntergeladen haben, entpacken Sie es in einem Verzeichnis auf dem Webserver. Dojo besteht aus einem Verzeichnis mit einigen untergeordneten Verzeichnissen. 294

11 Dojo Abbildung 6.4: Die Dojo-Website Dojo besteht aus verschiedenen Teilen: Dazu gehören einfache clientseitige Komponenten z. B. für Register. Diese heißen wie erwähnt Dijit. Außerdem gibt es Objekte und Funktionen, um die JavaScript-Entwicklung zu vereinfachen. Wir konzentrieren uns hier auf die Unterstützung für Ajax. Die Basis für den Ajax-Austausch ist eine serverseitige Datei, die die Daten enthält. Im vorliegenden Fall reicht dafür eine einfache Textdatei aus: Listing 6.3: Eine Textdatei zur Kommunikation (dojo.txt) Ausgabe per Dojo-Ajax! Anschließend entsteht die HTML-Datei, in der per Ajax die Daten ausgelesen werden. Für den Dojo- Zugriff müssen Sie die Dojo-Bibliothek einbinden. <script type="text/javascript" src="dojo/dojo.js"></script> Der eigentliche Zugriff besteht dann aus drei Teilen:» Einem <div>-container für die Ausgabe der Daten» Eine Funktion ausgabe() startet den Aufruf mit der Dojo-Methode xhrget(). Sie steuert auch die Rückgabe in der Funktion load.» Der Aufruf der Funktion ausgabe() wird ebenfalls per Dojo-Methode gesteuert: addonload(). 295

12 Kapitel 6 Ajax Hier der vollständige Code: Listing 6.4: Der Ajax-Zugriff per Dojo (dojo.html) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>dojo</title> <script type="text/javascript" src="dojo/dojo.js"></script> <script type="text/javascript"> function ausgabe() { dojo.xhrget( { url: "dojo.txt", handleas: "text", timeout: 5000, load: function(response, ioargs) { dojo.byid("ausgabe").innerhtml = response; return response;, error: function(response, ioargs) { console.error("http Status Code: ", ioargs.xhr.status); return response; ); dojo.addonload(ausgabe); </script> </head> <body> <div id="ausgabe"></div> </body> </html> Abbildung 6.5: Eine erste Ausgabe per Dojo Einen guten Überblick über die Funktionen im Dojo-Framework erhalten Sie unter

13 Copyright Daten, Texte, Design und Grafiken dieses ebooks, sowie die eventuell angebotenen ebook-zusatzdaten sind urheberrechtlich geschützt. Dieses ebook stellen wir lediglich als persönliche Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses ebooks oder zugehöriger Materialien und Informationen, einschliesslich der Reproduktion, der Weitergabe, des Weitervertriebs, der Platzierung im Internet, in Intranets, in Extranets, der Veränderung, des Weiterverkaufs und der Veröffentlichung bedarf der schriftlichen Genehmigung des Verlags. Insbesondere ist die Entfernung oder Änderung des vom Verlag vergebenen Passwortschutzes ausdrücklich untersagt! Bei Fragen zu diesem Thema wenden Sie sich bitte an: Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf unseren Websites ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen. Hinweis Dieses und viele weitere ebooks können Sie rund um die Uhr und legal auf unserer Website herunterladen