Your SlideShare is downloading. ×
Tutorial 7: Einführung in Ajax
Tutorial 7: Einführung in Ajax
Tutorial 7: Einführung in Ajax
Tutorial 7: Einführung in Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tutorial 7: Einführung in Ajax

732

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
732
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Tutorial 7: Einführung in Ajax Was ist Ajax? Ajax ist die Abkürzung für: • Asynchronous • JavaScript • And • XML Der Ausdruck wurde von Jesse James Garrett geprägt. Ajax bezeichnet ein Konzept der asynchronen Datenübertragung zwischen einem Server und dem Browser. Es ermöglicht innerhalb einer HTML- Seite eine HTTP-Anfrage (HTTP-Request) durchzuführen, ohne dabei die komplette Seite neu laden zu müssen. Die benötigten Daten werden, je nach Bedarf, nachgeladen, somit ist Ajax eine Schlüsseltechnik zur Realisierung des Web 2.0. Ajax ist keine einzelne, sondern besteht aus mehreren Technologien. Folgende Basis-Technologien werden in Ajax-Anwendungen eingesetzt: • (X)HTML und CSS • JavaScript – Herzstück des Codes für Ajax-Anwendungen • XMLHTTPRequest – Schnittstelle zum Datentransfer über HTTP-Protokoll • DHTML – Dynamisches HTML • DOM – Repräsentation von Daten bzw. Inhalten Welche Browser unterstützen Ajax? Folgende Webbrowser sind in der Lage Ajax-Anwendungen auszuführen: • Microsoft Internet Explorer (und IE-basierte Browser) ab Version 5.0 und höher • Mozilla Firefox (und Gecko-basierte Browser) ab Version 1.0 und höher • Opera ab Version 8.0 und höher • Apple Safari ab Version 1.2 und höher • Netscape ab Version 7.1 und höher • Konqueror ab Version 3.2 und höher Welche Vorteile hat die Verwendung von Ajax? • Zeitersparnis, es muss nicht immer die komplette Webseite neu geladen werden, sondern nur einzelne, benötigte Teile • Ajax verwendet freie Web-Technologien und ist somit kostenlos • Große Nutzergruppe, Ajax wird von vielen Nutzern weiterentwickelt, dadurch wird der Einsatz komfortabler und umfangreicher • Erhöhte Usability • Minderung der Serverlast • Im Gegensatz zu anderen Technologien, wie z.B. Shockwave oder Flash, kein zusätzliches Browser-Plugin nötig Welche Nachteile hat die Verwendung von Ajax? • Der „Zurück“-Button des Browsers funktioniert nicht mehr effektiv, da die dynamischen Ajax- Schritte nicht in der Historie des Browsers gespeichert werden • Ajax basiert auf JavaScript, was bei manchen Browsern deaktiviert ist, JavaScript muss aktiviert sein, um die Funktionen zu nutzen • Die Dynamik macht auch den Bookmarks zu schaffen - bestimmte Zustände können nicht als Bookmark abgespeichert werden • Fehlende Feedbacks - man muss selbst in seine Anwendungen visuelle Feedbacks für Ladezeiten integrieren, um die Usability zu erhöhen www.homepage.t-online.de 1
  • 2. Ein Beispielprogramm – „Hello World“ Das folgende kleine und sehr vereinfachte Beispiel zeigt Ihnen Ajax im Einsatz. Was benötigen Sie dazu? Erstellen Sie sich mit einem Editor drei Dateien. Sie können hierzu den Standard Windows Editor, welchen Sie im Windows Startmenü unter Programme/Zubehör/Editor finden, verwenden. Erstellen Sie zuerst eine Textdatei, deren Inhalt aus einem „span-Tag“ besteht. Im Tag steht nichts weiter als „Hello World!“. Das ist der Satz, der später im Browser angezeigt werden soll. Speichern Sie diese Datei, in diesem Beispiel wird sie mit „newcontent.txt“ bezeichnet. <span>Hello World!</span> Listing 1: Quelltext – newcontent.txt Die zweite Datei, die Sie erstellen, ist eine JavaScript-Datei. Verwenden Sie auch in diesem Fall einen Editor. Die JavaScript-Datei beinhaltet drei Funktionen. Die erste Funktion (createRequestObject) erzeugt nach der Abfrage, welcher Browser zum Einsatz kommt, eine Instanz der Klasse, die browserspezifisch die Funktionalität bietet, einen HTTP-Request an einen Server zu schicken. Die zweite Funktion löst die Ajax-Funktionalität getNewContent aus, die den Inhalt der erzeugten Textdatei newcontent.txt einliest. Mit der dritten und letzten Funktion updateNewContent wird das Ergebnis des XMLHTTPRequests überprüft. var http = createRequestObject(); function createRequestObject() { var objAjax; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ objAjax = new ActiveXObject("Microsoft.XMLHTTP"); }else{ objAjax = new XMLHttpRequest(); } return objAjax; } function getNewContent(){ http.open('get','newcontent.txt'); http.onreadystatechange = updateNewContent; http.send(null); return false; } function updateNewContent(){ if(http.readyState == 4){ document.getElementById('mySentence').innerHTML = http.responseText; } } Listing 2: Quelltext – ajax.js Diese JavaScript-Datei wird in die zu erstellende HTML-Datei (default.htm) eingebunden, die Sie ebenfalls mit dem Editor erstellen. Der Aufruf erfolgt durch das „script-Tag“. Wenn Sie die folgende HTML-Datei im Browser starten, erhalten Sie eine Seite, die über einen Link verfügt. Wenn Sie diesen Link anklicken, wird der gesamte Inhalt durch den Inhalt der newcontent.txt ersetzt. www.homepage.t-online.de 2
  • 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Hello World introduction to Ajax</title> <script type="text/javascript" src="ajax.js"></script> </head> <body> <p id="mySentence"><a href="#" onclick="javascript:getNewContent();">Click here to update the page</a>. When you click the link, this content will be replaced.</p> </body> </html> Listing 3: Quelltext – default.htm Die Startseite hat den im Screenshot angezeigten Inhalt. Durch Anklicken des Links wird die Funktion getNewContent aktiviert. Abbildung 1: Screenshot – Ajax – Startseite Der Inhalt der Startseite wird ersetzt, indem die Informationen aus der Textdatei newcontent.txt nachgeladen werden. Auf der folgenden Seite wird dann „Hello World!“ angezeigt. Abbildung 2: Screenshot – Ajax – Inhalt ersetzt www.homepage.t-online.de 3
  • 4. Quellen zum Nachlesen und Nachschlagen: Ressourcen im Internet • Das Buch „JavaScript und AJAX“ von Christian Wenz steht Ihnen unter: http://www.galileocomputing.de/openbook/javascript_ajax/ als eBook und als Download zur Verfügung • Auf http://www.oreilly.de/topics/ajax_about.html findet man eine Einführung zu Ajax und eine kommentierte Linkliste zu weiteren Seiten zu diesem Thema • Unter http://de.wikipedia.org/wiki/Ajax_(Programmierung) finden Sie eine Einleitung zu Ajax inklusive Hintergrundinformationen über die Entstehung • Die Liste der Webseiten, die eine Einführung in Ajax bieten, ist lang, hier ist eine kleine Auswahl daraus: o http://ajax.frozenfox.at/ o http://developer.mozilla.org/de/docs/AJAX:Getting_Started o http://webdesignblog.de/uncategorized/ajax-einfuhrung/ o http://www.admin-wissen.de/tutorials/eigene-tutorials/webentwicklung/ajax-tutorial/ • Auf der Seite: http://www.ajax-community.de/ kann mit anderen Usern über das Thema Ajax diskutiert und Erfahrungen können ausgetauscht werden • Eine Liste mit weiteren Seiten rund um das Thema Ajax finden Sie hier: http://www.drweb.de/weblog/weblog/?p=454 oder unter http://www.drweb.de/programmierung/ajax-tutorials.shtml • Hier finden Sie das „Hello World“ Beispiel aus diesem Tutorial, die Seite ist in englischer Sprache: http://www.openhosting.co.uk/articles/webdev/5899/ • Eine JavaScript Bibliothek mit deren Hilfe man Ajax-Funktionalität in eine Webseite einbinden kann, die Seite ist in englischer Sprache: http://jquery.com/ www.homepage.t-online.de 4

×