Einführung in Ajax – Tutorial
Um uns mit den technischen Details der asynchronen Datenübertragung via JavaScript nicht lange aufhalten zu müssen, stellt uns cayou-media eine JavaScript-Klasse zur Verfügung die uns die meiste Arbeit abnimmt. Wie man diese Klasse richtig einsetzt schauen wir uns in diesem Tutorial an.
Zunächst laden wir die Klasse hier herunter und speichern sie in unserem Projektordner. Wir gehen in die HTML-Datei in welcher wir unser JavaScript hineinprogrammieren. Das geht wie folgt:
Nachdem das geschafft ist, kann es auch schon losgehen mit programmieren. Zunächst erstellen wir ein AjaxObject. Über dieses AjaxObject werden wir unsere Verbindung zum Server aufbauen. Im ersten Beispiel möchten wir ein paar Werte via GET an den Server senden. Das geht wie folgt:
var ajax = new AjaxObject();
// Wir erstellen ein Object, welches unsere zu sendenden Daten aufnimmt
var parameter = new Object();
// Wir speichern unsere Werte
parameter.wert1=“hallo“;
parameter.wert2=“welt“;
// und senden sie letztlich via GET an die datei url.php
ajax.get(‚url.php‘,parameter);
Soeben haben wir unsere ersten Daten via GET an den Server gesendet. Im zweiten Schritt wollen wir diese Daten via POST versenden. Hierfür ändern wie lediglich die letzte Zeile in:
Wie wir Daten senden können, wissen wir also jetzt, nun geht es darum Daten zu empfangen. Das ist ein kleines bisschen komplizierter, aber keine Angst, nur ein kleines bisschen. Schauen wir uns zunächst den Quellcode an, ich werde ihn anschließend genauer erläutern.
var ajax_xml=new AjaxObject():
ajax_txt.onComplete=function(req){
alert(reg.requestText);
}
ajax_xml.onComplete=function(req){
alert(reg.getElementsByTagName(‚halloWelt‘)[0]);
}
ajax_xml.get(‚url.xml‘);
ajax_txt.post(‚url.txt‘);
Ok, schauen wir uns an was hier passiert
var ajax_txt = new AjaxObject();
var ajax_xml=new AjaxObject():
Was in den ersten beiden Zeilen passiert ist nichts neues für uns.
alert(reg.responceText);
}
ajax_xml.onComplete=function(req){
var xml = reg.responceXML;
alert(xml.getElementsByTagName(‚halloWelt‘)[0]);
}
Hier wird für beide AjaxObjects eine onComplete-Methode definiert. Diese Methode wird ausgeführt, wenn die Daten vollständig geladen wurden. Doch was ist dieser Parameter req ? req war bis kurz vor Ausführung der onComplete-Methode für den kompletten Datentransfer zuständig. Nun stellt req uns das Ergebnis der Anfrage zur Verfügung. Wenn wir Text-Daten erwarten erhalten wir diese in req.responceText erwarten wir hingegen eine XML-Struktur werden wir diese in req.responceXML finden. In diesem Beispiel greifen wir mit Hilfe der Funktion getElementsById auf den XML-Knoten halloWelt zu und lesen dessen Wert aus.
ajax_txt.post(‚url.txt‘);
Was ist denn das? Fehlt da nicht jeweils ein Parameter? Da es uns in diesem Beispiel nur um das empfangen von Daten ging benötigen wir keine Parameter die versendet werden sollen. in diesem Fall brauchen wir keinen zweiten Parameter angeben.
Wir haben Daten via GET und POST gesendet und gelesen, doch eine sehr nützliche Funktion dieser tollen Klasse möchte ich Ihnen auf keinen Fall vorenthalten. Die Funktion des versendens kompletter Formulare. Keine Sorge, auch das ist nicht schwer. Hier der einfache Quellcode:
ajax.postForm(‚url.php‘,’formularname‘);
Was? Das wars schon? Ja! Mehr braucht es nicht. Einfach die Methode postForm gefolgt von der URL an die es gesendet werden soll und dem Namen des Formulars und das war es auch schon.