von David Bongard
Durch die Möglichkeit des asynchronen Datenaustausches per XMLHttpRequest hat die Verwendung von JavaScript einen regelrechten Boom erfahren. Frameworks erfreuen sich derzeit einer besonders großen Popularität. Sie erweitern das Repertoire von Webdesignern um neue Möglichkeiten und erleichtern die clientseitige Programmierung durch die Bereitstellung von Schnittstellen zu häufig verwendeten Techniken wie AJAX und der Manipulation des Document-Object-Model (DOM).
jQuery ist ein besonders einfach zu verwendendes JavaScript-Framework und zeichnet sich durch seine geringe Größe und gute Performance aus. Die nur 19 Kilobyte große Datei schafft eine Vielfalt von Möglichkeiten und kann durch Plugins um zusätzliche Funktionen erweitert werden. Die aktive Entwicklergemeinschaft von jQuery entwickelt das Framework laufend weiter und die umfassende Dokumentation lässt nur wenige Fragen offen.
Sehen wir uns zunächst einige Grundlagen an, um dann ein eigenes, kurzes Script mit jQuery zu programmieren.
jQuery Syntax
jQuery benutzt ein eigenes Konzept, um die Programmierung besonders schnell und einfach zu machen. Die Grundlage bilden die sogenannten jQuery-Selektoren, eine Mischung aus CSS 1-3 und Xpath. Durch sie wird der Zugriff auf das DOM stark vereinfacht. Einige Beispiele:
/* Alle Absätze auswählen*/
$('p');
/* Nur den Ersten Absatz auswählen*/
$('p:first');
/* Alle Absätze auswählen, die einen Link enthalten */
$('p[a]');
/* Nur das DOM-Element mit der ID „test“ auswählen*/
$('#test');
Durch einfaches Anhängen können Methoden auf ein oder mehrere Objekte angewendet werden. Das nachfolgende Beispiel fügt allen im Dokument vorhandenen Absätzen eine neue CSS-Klasse hinzu:
$("p").addClass("newclass");
Durch die Verkettung solcher Methoden können auch mehrere Funktionen gleichzeitig zur Anwendung kommen. Komplexe DOM-Manipulationen werden dadurch besonders einfach.
$("p:first").addClass("newclass").html("Hallo Welt");
In diesem Beispiel wird dem ersten Absatz im Dokument die CSS-Klasse „newclass“ zugewiesen und sein Inhalt gleichzeitig durch den Wert „Hallo Welt“ ersetzt.
AJAX mit jQuery
Das Senden und Empfangen von AJAX-Requests ist mit jQuery fast genauso leicht, wie die schon dargestellte Manipulation des Document-Object-Models. Im Folgenden werden wir per Mausklick ein AJAX-Request aufrufen, das einen einfachen Text als Rückgabewert liefert. Diesen Text geben wir dann auf unserer Beispielseite aus und verschönern das Ganze abschließend durch eine kleine Animation.
jQuery einbinden und Dateien anlegen
Aus der Vielzahl der in jQuery verfügbaren AJAX-Methoden entscheiden wir uns in unserem Beispiel für $.get( url, params, callback ). Diese Methode sendet eine HTTP-GET-Anfrage an den Server und lässt uns per Callback-Funktion auf den Rückgabewert zugreifen.
Dazu brauchen wir zunächst natürlich noch eine HTML-Datei, von der aus die Anfrage gesendet wird und die wir für die Darstellung des Ergebnisses verwenden können.
Das Listing der HTML-Datei:
<html>
<head> <!-- jQuery einbinden -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// JavaScript-Code hier...
</script> </head>
<body>
<p>Bitte klicken Sie den Link, um den Text zu laden!</p>
<p><a href=“#“>Datei test.txt laden...</a></p> </body>
</html>
Als Datenquelle reicht uns in diesem Beispiel eine Textdatei mit einer einfachen Zeichenkette (zum Beispiel „Hallo Welt“), die wir im selben Verzeichnis mit der HTML-Datei ablegen. Die aktuelle Version von jQuery kann auf http://jquery.com heruntergeladen werden. Benennen Sie die Datei in jquery.js um und legen Sie diese in dasselbe Verzeichnis wie schon die beiden anderen Dateien.
Das AJAX-Script
Da unsere Textdatei statisch ist und wir ihr keine Parameter übergeben müssen, reicht für die grundlegende AJAX-Anfrage eigentlich schon der folgende Aufruf:
$.get("test.txt");
Um den Rückgabewert anzeigen zu können, erweitern wir diesen Einzeiler um eine Callback-Funktion mit einfacher Textausgabe:
$.get("test.txt", function(text){
alert("Text geladen: " + text);
});
Nun wird beim Laden der HTML-Seite automatisch die Datei test.txt angefragt und ihr Inhalt als Hinweisfenster ausgegeben.
Das macht so natürlich fast keinen Unterschied zu einem der „altmodischen“, synchronen Wege der Datenübertragung. Was wir jetzt noch benötigen, ist die Möglichkeit, den Zugriff auch nach dem Laden der Seite bequem auslösen zu können. Dazu weisen wir dem bereits angelegten Link ein onClick-Event zu. Unser AJAX-Request verschachteln wir wieder mittels einer Callback-Funktion:
$("a").click(function(){
$.get("test.txt", function(text){
alert("Text geladen: " + text);
});
});
Damit dieser Eventhandler auch zuverlässig funktionieren kann, müssen wir noch sicherstellen, dass das DOM bereits vollständig geladen ist, wenn das Event zugewiesen wird. Dazu verwenden wir das jQuery-typische Konstrukt:
$(document).ready(function() {
// ausführen, wenn das DOM bereit ist
});
Damit ist die grundlegenden Funktionalität unseres Scriptes eigentlich schon fertig. Durch das Anklicken eines Links wird die Anfrage an den Server gesendet und seine Antwort am Bildschirm ausgegeben.
Das verwendete Hinweisfenster ist allerdings eine etwas unschöne Lösung. Um eine schönere Darstellung zu erreichen, ersetzen wir die Alert-Funktion durch den folgenden Befehl:
$("p:first").html(text);
Der Inhalt des ersten Absatzes unserer HTML-Datei wird nun bei jedem geglückten Request durch dessen Rückgabewert „Hallo Welt“ ersetzt.
Um unser Arbeitsergebnis optisch noch etwas aufzufrischen und gleichzeitig die erfolgreiche Datenübertragung sichtbar zu machen, fügen wir dem Script einen Einblend-Effekt hinzu.
Hier das fertige Script:
$(document).ready(function() {
$("a").click(function(){ $.get("test.txt", function(text){ $("p:first").fadeOut('fast',function(){ $("p:first").html(text).fadeIn('normal'); });
});
});
});
Mehr Informationen und Beispiele zu jQuery gibt es auf der offiziellen jQuery-Homepage. Es gibt eine vollständige Dokumentation.
David Bongard ist Mitbegründer und Geschäftsführer der Wiener Internetagentur PinkOrange Websolutions. In seinem Weblog auf schreibt er regelmäßig zu den Themen CSS, PHP und Webdesign.
Das jQuery Framework ist wirklich weiterzuempfehlen.
Super Ansammlung von Funktionen…
Grüße aus KS
Ja, JQuery ist eine sehr schöne Sache.
Hoffentlich wird es hier bald neue Artikel und Tutorials geben.
Schönen Gruß aus Berlin.
Schönes, einfach erklärtes Beispiel wie man mittels jQuery eine AJAX Anfrage realisiert. Top.
Anstelle der Langform von
$(document).ready(function(){
//js code
});
existiert auch eine schöne kurzform
$(function(){
//js code
});
Wenn es nur darum geht Daten zu laden bietet sich auch die Methode ‘load()’ an
//Gruß
sehr schönes Tutorial. Endlich mal verständlich erklärt und aufs Wesentliche beschränkt, so kapiert man es auch.
Gruß
sehr gut erklärt gefällt mir sehr gut, und hat mir bei meinem problem geholfen :)
schön wäre auch mal ne komplette ajax doku auf deutsch. kennt jemand eine?
@Jacsick
In “Javascript und Ajax” vom Galileo-Verlag gibt es ein längeres Kapitel zu Ajax, vielleicht hilft das:
http://openbook.galileocomputing.de/javascript_ajax/18_ajax_001.htm
interressanter Link @Boris
thx
in der Regel reichts, wenn man sich einfach die Doku auf der jQuery Seite durchliest, da sind alle Funktionen ganz vernünftig erklärt. Mit ein weng Vorwissen kommt man so sicher zum Ziel
Aber eben auf Englisch und auch teilweise ein wenig sparsam erklärt. Ich bin froh, dass es Tutorials wie dieses hier gibt, und ich ibn kein Anfänger.