Kurzes Tutorial zu Ajax, eine kleine Einführung

Ajax in 10 Minuten verständlich erklärt auf einer DIN-A4-Seite

Zweckbestimmung und Ablauf

Asynchron, also unabhängig vom Laden der darunterliegenden Seite, ist es möglich, einen oder mehrere HTTP-Requests zu senden und innerhalb einer Callbackfunktion die HTTP-Response ins DOM zu rendern. JavaScript benötigt dafür ein Objekt:

var xhr = (window.XMLHttpRequest) ?
    new XMLHttpRequest() :
    new ActiveXObject("Microsoft.XMLHTTP");

Mit diesem Objekt bzw. mittels der diesem Objekt zur Verfügung stehenden Methoden wird der Request wie folgt vorbereitet:

xhr.open("GET", '/ajaxintro.html?x=y;foo=bar', true);
    ODER
xhr.open("POST", '/ajaxintro.html', true);

Und schließlich wird der Request gefeuert:

xhr.send(null);          // GET
    ODER
xhr.send('x=y;foo=bar'); // POST

So ist der Ablauf stets in dieser Reihenfolge, was wir noch brauchen, ist die Anbindung einer Callback-Funktion:

xhr.onreadystatechange = rx;

function rx(){
    if(xhr.readyState == 4 && xhr.status == 200){
        callback_function(xhr.response);
    }
    else{ /*Fehlerbehandlung*/ }
}

Die Callback-Funktion mit dem Namen callback_function() bekommt die HTTP-Response direkt übergeben.

Der Datentype für die Response

Moderne Browser verstehen anstatt xhr.responseText ganz allgemein xhr.response wobei hierfür der Typ für die zu erwartende Response festgelegt werden muss:

xhr.responseType = 'arraybuffer';
/*
    'text' ist der Default
    'json', 'xml' sind weitere Typen
*/

Anmerkung: Der Content-Type-Header einer Response ist für die Ajax-Callbackfunktion ohne Bedeutung, weil mit xhr.responseType der Typ festgelegt wurde.

Daten senden: Parameter im Request

Üblich sind Sequenzen von Schlüssel-Werte-Paaren, wobei mehrere gleichnamige Schlüssel ein Array bilden:

    /* Seperator entweder ; oder & */
    foo=bar;num=1;num=2;num=3
    $data = {
        foo =>  'bar',
        num => [1,2,3]
    };

Wobei auf die Werte das Percent-Encoding anzuwenden ist value = encodeURIComponent('äöü;='); Die so erzeugte Sequenz wird entweder an den URL gehängt als QUERY_STRING oder direkt als Message-Body in einem POST-Request gesendet, siehe obenstehende Syntax bzw. Anordnung zur xhr.send()-Methode.

Daten empfangen: Deserialize

Wie bereits dargelegt, bekommt die Callbackfunktion eine Response direkt übergeben, die Sequenz kann sowohl einzelne Werte auflösen als auch komplexere Datenstrukturen. Üblich sind JSON oder XML-Sequenzen, zum Deserialisieren gibt es Libraries, z.B. JSON.parse();

AJAX ist ereignisgesteuert

Typische Ereignisse (Event) sind das Laden einer Seite oder das Klicken auf einen Button. Die Callbackfunktion hingegen wird aufgerufen, wenn die Antwort vom Server eintrifft.

Request Content-Type Header

Das ist der Default: application/x-www-form-urlencoded und dieser lässt sich über das XHR-Objekt natürlich auch anders festtlegen:

xhr.setRequestHeader("Content-Type", "application/json");
    ODER
xhr.setRequestHeader("Content-Type", "application/xml");

Der Content-Type ist erforderlich, damit der serverseitige Parser die gesendete Daten/Parameter korrekt wiederherstellen kann. Gut zu wissen: Das XHR-Objekt sorgt spontan dafür, dass im Fehlfall der o.g. Default-Content-Type gesendet wird.

Ebenso erwarten die meisten serverseitig eingesetzten Parser vorrangig den Content-Type: application/x-www-form-urlencoded (GET, POST) und für Datei-Uploads den Content-Type: multipart/form-data (nur POST). Der Request-Content-Type ist gleichbedeutend mit der im <form>-Attribute Enctype="..." getroffenen Festlegung. Auch hier gilt für den Enctype der Default: application/x-www-form-urlencoded.

Parameter parsen mit Perl

I.d.R. wird dafür die Methode param('Parametername'); genutzt, sie liefert entweder eine Liste mit den gewünschten Werten oder einen Einzelwert. Speziell in meinem Framework liefert param() einheitlich dieselben Ergebnisse auch bei application/json oder application/xml, wobei sich auch hier die Wichtigkeit äußert, beim Request den Content-Type anzugeben. Der in meinem Framework eingesetzte Parser lädt dann automatisch die zuständige Subklasse für den Deserializer.

Finessen

Allgemein bekannt und beliebt ist jQuery, das gibt kurze Wege auch bei Ajax. Je nach serverseitig verfügbaren Parsern sind auch JSON/XML-Sequenzen im Request möglich. Relativ neu ist das JavaScript-Objekt FormData, womit File-Upload möglich wird. Des Weiteren bringt jQuery eine Serialize-Funktion mit, was das Auslesen von Formularen sehr vereinfacht.

Datenschutzerklärung: Diese Seite dient rein privaten Zwecken. Auf den für diese Domäne installierten Seiten werden grundsätzlich keine personenbezogenen Daten erhoben. Das Loggen der Zugriffe mit Ihrer Remote Adresse erfolgt beim Provider soweit das technisch erforderlich ist. sos@rolfrost.de.