Anzeige
Tutorialbeschreibung

jQuery - Eine Ajax-Einführung

jQuery - Eine Ajax-Einführung

Im Zusammenhang mit JavaScript und jQuery darf ein Aspekt natürlich nicht fehlen: Ajax. Dieses Asynchronous JavaScript and XML ist – anders als oftmals angenommen – keine eigene Programmiersprache, sondern ein Konzept der asynchronen Datenübertragung zwischen Browser und Server. Mit jQuery lassen sich Ajax-Anwendungen vergleichsweise einfach umsetzen. In diesem und weiteren Tutorials wird gezeigt, wie sich Ajax innerhalb des jQuery-Frameworks nutzen lässt.


Keine Frage: Das lange Zeit totgesagte JavaScript hat durch Ajax ein fulminantes Comeback hingelegt. Nun ist die hinter Ajax steckende Technik aber nicht neu. Allerdings gelang ihr der Durchbruch unter dem wenig blumigen Namen XMLHttpRequest lange Zeit nicht. Erst mit dem Begriff Ajax und einem riesigen Marketing-Hype wurde eine breite Masse von Web-Entwicklern auf diese Technologie aufmerksam. Das soll es bereits an allgemeinen Dingen zum Thema Ajax gewesen sein. In diesem und den nächsten Tutorials dreht sich alles rund um das Zusammenspiel von jQuery und Ajax bzw. darum, wie man Ajax innerhalb von jQuery nutzen kann. Auf psd-tutorials.de finden Sie zahlreiche Tutorials, die zeigen, was Ajax eigentlich ist.

jQuery stellt zahlreiche Ajax-Funktionen und –Methoden zur Verfügung. Welche das sind, können Sie sich auf der Seite http://api.jquery.com/category/ajax/ ansehen.

Bilder



 
Bereits ein erster Blick auf diese Seite zeigt, dass die jQuery-Ajax-Methoden und –Funktionen sehr gut dokumentiert sind.

Bilder



 
Wie einfach sich Ajax in Verbindung mit jQuery nutzen lässt, wird zunächst anhand eines Beispiels gezeigt. In diesem Beispiel wird ein Ajax-Request mittels Mausklick aufgerufen. Dabei liefert dieses Request einen einfachen Text als Rückgabewert. Dieser Text wird anschließend auf der Webseite ausgegeben. Der Text selbst stammt dabei aus einer Textdatei und ersetzt den standardmäßig vorhandenen Text.

[Beispiel anzeigen]


Zunächst wird wie gewohnt das eigentliche jQuery-Framework eingebunden.
<script type="text/javascript" src="jquery.min.js"></script>



Diese Syntax kennen Sie bereits. Im nächsten Schritt definiert man den Inhalt des Dokuments. Im einfachsten Fall sieht der folgendermaßen aus:
 <p>Klick mich an!</p>
 <p><a href=“#“>Lade die Datei hallo.txt...</a></p>
 
Ein Hinweis noch in diesem Zusammenhang: Beachten Sie, dass die Ajax-Beispiele ausschließlich auf einer Serverumgebung funktionieren. Wer Ajax-Applikationen also lokal entwickeln und testen möchte, muss das ebenfalls innerhalb einer Serverumgebung tun. Im aktuellen Beispiel wird nach dem Anklicken des Hyperlinks der vorhandene Text ausgeblendet und durch den Inhalt der Datei hallo.txt ersetzt. Bei dieser Datei handelt es sich um eine normale Textdatei, in der Folgendes enthalten ist:

Bilder



 
Damit sind die Vorarbeiten abgeschlossen und es kann mit der Definition des eigentlichen Skripts begonnen werden. Wie bei jQuery üblich, wird zunächst festgelegt, durch was die gewünschte Ajax-Aktion eigentlich ausgelöst werden soll. Im aktuellen Beispiel wird dafür auf click() zurückgegriffen. Klickt man also den Hyperlink an, löst das die Aktion aus.

[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
 $("a").click(function(){    
 $.get("hallo.txt", function(text){      
 $("p:first").fadeOut('fast',function(){        
 $("p:first").html(text).fadeIn('normal'); });
     });
   });
 });
 /* ]]> */
</script>
Verwendet wird in dieser Syntax die get()-Methode von jQuery. Der Name ist hier übrigens Programm. Denn in der Tat werden bei get() die Daten über die GET-Methode übermittelt. (Einen kleinen Exkurs in die Unterschiede zwischen POST und GET gibt es übrigens noch im weiteren Verlauf dieses Tutorials). Diese Methode sendet also eine HTTP-GET-Anfrage an den Server. Eine entsprechende Anfrage könnte so aussehen:
welt.php?variable1=wert1



Auf den entsprechenden Rückgabewert kann mit einer Callback-Funktion zugegriffen werden. Die get()-Methode lässt sich im einfachsten Fall folgendermaßen nutzen:
$.get("hallo.text");


 
In diesem Beispiel wird davon ausgegangen, dass die Textdatei im gleichen Verzeichnis wie die eigentliche HTML-Datei liegt. Die Textinhalte kann man direkt innerhalb des Dokuments ausgeben, so wie es innerhalb des bereits gezeigten Beispiel gemacht wurde.

Bilder



 
Ebenso kann man die Ausgabe aber auch über ein alert()-Fenster realisieren. Eine entsprechende Anwendung sieht dann folgendermaßen aus:

[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
 $("a").click(function(){    
 $.get("hallo.txt", 
    function(data){
      alert("Inhalt: " + data);
    });
   });
 });
/* ]]> */
</script>



Und hier das Ergebnis:

Bilder



 
Im gezeigten Beispiel wurde eine Textdatei geladen. Das muss allerdings nicht sein. Ebenso – und das ist bei Weitem üblicher – kann man auch auf den Inhalt dynamischer Dokumente wie beispielsweise PHP- und ASP-Dateien zugreifen. Interessant ist das in erster Linie natürlich immer dann, wenn man POST- oder GET-Daten nutzen will. POST-Daten kommen dabei üblicherweise im Zusammenhang mit Formularen zum Einsatz. GET wird hingegen für die Darstellung spezifischer Seitenhalte genutzt.

Um den aus einer Datei stammenden Inhalt in ein DOM-Element einzufügen, greift man im einfachsten Fall auf load() zurück. Die allgemeine Syntax von load() sieht folgendermaßen aus:
$("element").load({
 url,
 data,
 callback
});
Dabei sind die beiden Parameter data und callback optional, müssen also nicht angegeben werden. Verzichtet man auf diese, erstellt jQuery einen einfachen Ajax-Request mit der GET-Methode.
Wie man laod() nutzen kann, lässt sich am besten anhand eines Beispiel zeigen. Dafür wird zunächst eine PHP-Datei mit folgendem Inhalt angelegt:                  
<?php
 if ($_GET) {
 echo $_GET["psd_get"];
 } else if ($_POST) {
 echo $_POST["psd_post"];
 } else {
 echo "Dieses Dokument wurde direkt aufgerufen."
 }
?>
Dieses Skript überprüft, ob POST- oder GET-Daten und entsprechende Variablen vorhanden sind. Ist das nicht der Fall, wird ein entsprechender Hinweistext ausgegeben, der besagt, dass das Dokument direkt aufgerufen wurde. Durch die folgende Syntax wird mittels load() auf die welt.php zugegriffen.
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
 $("a").click(function(){    
 $("#psd").load("welt.php");  
   });
 });
 /* ]]> */
</script>



 
Wird der innerhalb des Dokuments definierte Hyperlink angeklickt, lädt das die welt.php. Dabei wird der Hinweis Dieses Dokument wurde direkt aufgerufen ausgegeben. Dafür wird innerhalb des Dokuments zusätzlich der div-Bereich <div id="psd"></div> angelegt. Darin wird die entsprechende Meldung zu sehen sein.

[Beispiel anzeigen]

Bilder



Ebenso einfach lassen sich auch POST-Daten übermitteln. Sobald jQuery erkennt, dass es sich um POST-Daten handelt, wird automatisch auf die POST-Methode umgeschaltet.
$("a").click(function(){
 $("#psd").load(
 "welt.php",
 {
 psd_post: "Hier kommen POST-Daten"
 }
 );
});
Der dritte Parameter von load() lässt sich über drei Argumente ansprechen.
function (responseText, textStatus, XMLHttpRequest)



 
Hier ein Beispiel, wie sich die entsprechende Callback-Funktion nutzen lässt:
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
 $("a").click(function(){
      $("#psd").load(
         "welt.php",
           {
             psd_post: "Hier kommen POST-Daten"
           },
            function (responseText, textStatus, XMLHttpRequest){
              alert(
               responseText + ", " +
               textStatus + ", " +
               XMLHttpRequest
                  );
               }
             );
 });
 });
 /* ]]> */
 </script>
Die Ausgabe sieht folgendermaßen aus:

[Beispiel anzeigen]

Bilder



Fazit:
So groß der Hype um Ajax auch nach wie vor sein mag: Dank jQuery kann man recht entspannt die anstehenden Ajax-Aufgaben angehen. Allerdings kennt jQuery noch weitaus mehr Funktionen und Methoden auf dem Ajax-Gebiet. Exemplarisch seien hierfür ajax() und ajaxsend() genannt, die noch ausführlich in weiteren Tutorials vorgestellt werden.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von b0bf0x
  • 01.03.2011 - 09:16

Danke für das Tut, war hilfreich, aber ein bischen Mager...

Portrait von kollersen
  • 08.08.2010 - 16:33

hätte ich mir jetzt mehr versprochen.. etwas mager, diese "einführung"

Portrait von CP01
  • 07.07.2010 - 10:05

Super, kann ich sehr gut gebrauchen Danke.
;-)

Portrait von KyaraLulu
  • 19.06.2010 - 08:54

Perfekt, das Tut kam genau zum richtigen Zeitpunkt. Vielen Dank für die Einführungen. Ich, als absoluter Newbee kam damit echt gut zurecht.

Portrait von wuestenwind
  • 18.06.2010 - 13:55

Sehr schön, auch wenn nichts neues für mich ^^

Portrait von tfhsnak3
  • 17.06.2010 - 20:06

schickes tut... werd ich gleich mal testen ^^

x
×
×