Kleines AJAX Einsteiger Tutorial

AutoItBot auf Facebook - Gefällt mir

DarkE

-.-

(10)

Beiträge: 10

Freitag, 23. Oktober 2009, 17:23

Kleines AJAX Einsteiger Tutorial

Hiermit will ich euch eine kleine Einführung in AJAX geben.

Was ist AJAX überhaupt?
AJAX steht für "Asynchronous JavaScript and XML". Das heißt, um neue Daten vom Server herunterzuladen, muss die Seite nicht komplett neu geladen werden, und der komplette Vorgang geschieht im Hintergrund. Später werden die angeforderten Daten per JS und DOM in die aktuelle Seite eingefügt. Beispiele für Seiten, die AJAX benutzen, findet man viele:
Google:

Das XML lassen wir in diesem Tutorial weg, sondern wir übermitteln nur Text.

Eine Anfrage machen
AJAX leitet man in Firefox, Safari, Opera, ... von einem Objektes namens "XMLHTTPRequest" ab. Bei IE ist das ganze ein ActiveX Element, dass wieder von Version zu Version unterschiedlich heißt. *würg*
Hier einmal ein kommentierter Code zum erstellen soeines Objektes

Quellcode

var httpRequest; //Eine neue Globale Variable deklarieren, in der unser Request Object gespeichert wird
if (window.XMLHttpRequest) { //Exestiert das XMLHttpRequest also ist es Firefox, Safari, ...
    httpRequest = new XMLHttpRequest(); //Ein neuen XMLHttpRequest erstellen
} else if (window.ActiveXObject) { //Wenn ActiveX exestiert ist es IE
    try {
   	 httpRequest = ActiveXObject("Msxml2.XMLHTTP"); //Bei manchen IE Versionen ist es das Objekt
    } catch(e) {
   	 try {
   		 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //oder das
   	 } catch(e) {
   	 }
    }
}
if(!httpRequest) { //Wenn es nicht richtig initzalisiert wurde
    alert("Ihr Browser unterstützt leider noch kein AJAX"); //Ist der Browser zu alt ;(
}

Nachdem wir nun das Requestobjekt erstellt haben, können wir mit der Übertragung beginnen.

Um eine Anfrage an den Server zu senden brauchen wir 2 Methoden: open und send.

So versendet man mit POST:

	Quellcode
1 2	httpRequest.open("post", "speichern.php"); //Methode post) und Zieladresse httpRequest.send("vorname=Tim&nachname=mustermann"); //Parameter

Möchte man Parameter mit GET versenden dann macht man das so:

Quellcode

1
2

httpRequest.open("get", "speichern.php?vorname=Tim&nachname=mustermann"); //get, Zieladresse und Parameter einstellen
httpRequest.send(null); //Da bei GET die Parameter direkt in der URL stehen einfach null eintragen

Aber Achtung bei GET: Sollten die URLs nicht korrekt codiert sein, einfach noch die Funktion escape(); benutzen.

Jetzt wissen wir wie man Dateien auf dem Server anspricht, aber noch nicht wie wir die zurück erhaltenen Daten verarbeiten.

Dafür gibt es den Event-Handler onreadystatechange unsers XMLHttpRequest-Objektes. Diesem können wir eine Funktion zuweisen, die immer dann aufgerufen wird, wenn sich der Stratus der Übertragung ändert.
In dieser Funktion können wir dann mithilfe der readyState Eigenschaft prüfen, in welchem Status sich die Übertragung befindet:

Wert | Bedeutung
--|-------------------------------------------------------------------------
0 | Die Methode open wurde noch nicht aufgerufen.
1 | Die Anfrage wurde mit open vorbereitet, aber send noch nicht aufgerufen.
2 | Die Anfrage wurde mithilfe von send gesendet.
3 | Es werden Daten empfangen, aber die Datenübertragung läuft noch.
4 | Die Datenübertragung ist beendet.

Wie man sehen kann ist warscheinlich für die meisten nur der letzte Wert interessant.

Nun aber zum Synatx

	Quellcode
1	httpRequest.onreadystatechange = nameOfTheFunction;

wir können direkt eine Funktion so anknüpfen:

	Quellcode
1 2 3	httpRequest.onreadystatechange = function() { //Dieser Code wird dann ausgefüht... }

oder eine eigene Funktion erstellen:

	Quellcode
1 2 3 4 5	httpRequest.onreadystatechange = statehandler; function statehandler() { //Dieser Code wird dann ausgeführt... }

Ich hoffe ich habs nicht allzuschwer mit dem Event-Handler gemacht...

Um den bekommenden Text auszulesen gibt es die responseText Eigenschaft.

Beispiel:
Um es besser zu verstehen, hier noch ein Beispielcode um die akutelle Uhrzeit zu laden:

Quellcode

<html>
<head>
<script type="text/javascript">
var httpRequest; //Eine neue Globale Variable deklarieren, in der unser Request Object gespeichert wird
if (window.XMLHttpRequest) { //Exestiert das XMLHttpRequest also ist es Firefox, Safari, ...
    httpRequest = new XMLHttpRequest(); //Ein neuen XMLHttpRequest erstellen
} else if (window.ActiveXObject) { //Wenn ActiveX exestiert ist es IE
    try {
   	 httpRequest = ActiveXObject("Msxml2.XMLHTTP"); //Bei manchen IE Versionen ist es das Objekt
    } catch(e) {
   	 try {
   		 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //oder das
   	 } catch(e) {
   	 }
    }
}
if(!httpRequest) { //Wenn es nicht richtig initzalisiert wurde
    alert("Ihr Browser unterstützt leider noch kein AJAX"); //Ist der Browser zu alt ;(
}

function statehandler() { //Unsere Funktion, die immer ausgeführt wird, wenn sich der Status ändert
    if (httpRequest.readyState == 4) { //Wenn die Datenübertragung beendet ist, dann ...
   	 var daten = httpRequest.responseText; //Schreibe die empfangenen Daten in eine Variable
   	 document.getElementById("ajax_content").innerHTML = daten; //und schreibe sie in den div
    }
}

function getTime() { //Wir ausgefüht wenn man auf den Button klickt.
    httpRequest.onreadystatechange = statehandler //Keine ()! Event-Handler vorbereiten.
    httpRequest.open("get", "time.php"); //Wir brauchen keine Parameter, weil wir nur Text empfangen
    httpRequest.send(null);
}
</script>
<body>
<div id="ajax_content"></div>
<input type="button" onclick="getTime();" value="Zeit aktualisieren!" />
</body>

Für die "time.php":