AJAX voor beginners

AJAX is een voetbalclub, je kan er mee schoonmaken, het is een figuur uit de Griekse mythologie én het is een afkorting van Asynchronous JavaScript and XML. Het zal duidelijk zijn dat dit artikel over de laatste betekenis gaat. AJAX is een verzamelnaam voor een aantal technologieën waarmee de browser van de bezoeker met de server kan communiceren, zonder dat er een pagina refresh nodig is.

Wat kun je met AJAX?

Omdat voorbeelden vaak meer spreken, noem ik er een paar:

  • Bij een registratieformulier vult een bezoeker een gebruikersnaam in. Zodra de bezoeker de hele gebruikersnaam heeft ingevoerd en Tab gebruikt om het veld te verlaten, controleert een script of deze gebruikersnaam al bestaat. Zo nee, dan is er niks aan de hand. Zo ja, dan komt er keurig in het rood een melding van een dubbele gebruikersnaam en wordt de submit button van het formulier op disabled gezet.
  • Bij een applicatie waarmee mensen zelf foto?s kunnen uploaden, wordt een progressiebalkje weergegeven waarmee real time aangegeven wordt hoeveel procent van de foto al is geupload. Op deze manier weet een bezoeker hoe lang hij nog moet wachten tot de upload voltooid is.
  • Bij een zoekapplicatie voor occasions, selecteer je in een dropdown box een automerk als Opel. Direct wordt een tweede dropdown gevuld met alle auto?s van deze fabrikant, zoals de Vectra, Astra en Omega. Op deze manier werkt het formulier zeer snel en gebruiksvriendelijk.

Google heeft trouwens veel AJAX applicaties ontwikkeld en zo een belangrijke bijdrage geleverd aan de populariteit van AJAX. Denk hierbij aan Google Maps, GMail en Google Suggest.

Wat is AJAX?

AJAX is in feite niet één techniek, maar een verzamelnaam voor meerdere technieken die interactie tussen de server en een browser bewerkstelligen. Dit opvragen van informatie op de server gebeurt asynchroon, wat betekent dat het niet ná elkaar gebeurt, maar tegelijk. Vroeger was het bijvoorbeeld zo dat je bij een registratieformulier deze stappen ondernam:

  1. je vulde je gegevens in
  2. je klikte op de submit button
  3. de server checkte of de gebruikersnaam al bestond
    1. zo nee, dan werd de database gevuld
    2. zo ja, dan werd je teruggestuurd naar het registratieformulier en kon je proberen om je met een andere gebruikersnaam te registreren

Als we een AJAX techniek zouden toepassen op datzelfde formulier, zou het stappenplan zoiets zijn:

  1. je vult je gebruikersnaam in en verlaat het tekstveld
  2. direct wordt er gekeken of de gebruikersnaam al bestaat
    1. zo nee, dan wordt er geen actie ondernomen
    2. zo ja, dan wordt de submit button van het formulier disabled en wordt je bijvoorbeeld door rode tekst van het probleem op de hoogte gesteld

Het zal duidelijk zijn dat een AJAX techniek als deze de gebruiksvriendelijkheid ten goede komt.

Onderliggende technieken

Hét geheim achter AJAX is het XMLHttpRequest. Dit is een Application Programming Interface (API) waarmee bijvoorbeeld Javascript data kan versturen naar de server via het http-protocol. Uiteraard kan er ook data worden terug gestuurd. Hoewel het protocol is ontwikkeld door Microsoft, wordt het tegenwoordig door (bijna) alle moderne browsers ondersteund. Naast het XMLHttpRequest, maakt AJAX ook gebruik van:

  • XHTML en CSS voor de presentatie van de output
  • Het Document Object Model (DOM) voor interactie en het tonen van informatie
  • XML en XSLT voor de opslag, aanpassing en transport van gegevens
  • JavaScript om alles aan elkaar te binden en events te triggeren

Event Handlers

Centraal in AJAX applicaties staan de event handlers. Als je bijvoorbeeld wil checken of een gebruikersnaam welke wordt ingevoerd al bestaat in de database, zul je nadat je het invoerveld verlaat een check moeten uitvoeren op de inhoud van het veld. In dit geval is dit het event onblur(), wat getriggered wordt als je het bewuste veld verlaat, bijvoorbeeld doordat je via Tab naar het volgende veld gaat. Hieronder volgt een beknopte lijst van de belangrijkste events:

  • onclick (wordt getriggered bij klikken)
  • ondblclick (wordt getriggered bij dubbelkikken)
  • onmousedown (wordt getriggered als je de muisknop induwt)
  • onmouseup (wordt getriggered als je de muisknop weer los laat)
  • onmouseover (wordt getriggered als je er met de cursor over het object gaat)
  • onmousemove (wordt getriggered als je muis over het object beweegt)
  • onmouseout (wordt getriggered als je muis het object verlaat)

Een eerste voorbeeld

Genoeg over de theorie voor nu. Het is niet de bedoeling in dit artikel een al te geniaal werkend voorbeeld te geven. Binnen een week zal er een tweede artikel komen waarin we een case study gaan langslopen. In die case study komt dus het nuttige werkende voorbeeld, maar een paar algemene opmerkingen over het schrijven van een AJAX applicatie zullen we hier wel maken.

Cross Browser

Allereerste moeten we zeggen dat niet elke browser op dezelfde manier met het XMLHttpRequest om gaat. Hieronder volgt dan ook een code die er voor zorgt dat een browser die juiste manier van het aanroepen van het protocol gebruikt.

var xmlhttp,alerted
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {
try {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
} catch (e) {
alert("Je browser moet Microsofts XML parsers beschikbaar hebben")
}
}
@else
alert("Je browser moet minimaal JavaScript 5 ondersteunen")
xmlhttp=false
alerted=true
@end @*/
if (!xmlhttp && !alerted) {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
alert("Je hebt een browser nodig die het XMLHttpRequest object ondersteunt.")
}
}

Allereerst wordt er gekeken of je browser JavaScript 5 ondersteunt. Als dat niet zo is, wordt de error ?Je browser moet minimaal JavaScript 5 ondersteunen? als output gegeven. Als de browser wel JavaScript 5 of hoger ondersteunt, wordt d.m.v. een try {} catch (e) {} methode gekeken of achtereenvolgens de Msxml2.XMLHTTP, de Microsoft.XMLHTTP of de XMLHttpRequest worden ondersteund. Dit zijn diverse protocollen, met aflopende leeftijd. De eerste die gevonden wordt, wordt gebruikt om een object aan te maken. Op deze manier wordt er een zo jong mogelijk protocol gebruikt.

Opvragen van data

Via een JavaScript functie kunnen we vervolgens een PHP-pagina opvragen die onze applicatie van data uit de database voorziet. Zo?n functie kan er als volgt uit zien:

function checkData(){
if (xmlhttp) {
xmlhttp.open("GET", "check.php?naam="+document.getElementById("naam").value, true);
xmlhttp.onreadystatechange=verwerkInput
xmlhttp.send(null)
}
}

function verwerkInput(){
if (xmlhttp.readyState===4){
// Doe iets met de data
alert(
}
}

Wat je hier allereerst ziet is een controle op de aanwezigheid van het xmlhttp-object. Indien deze niet false is, zou XMLHttpRequest moeten werken en kun je via xmlhttp.open() een PHP-script opvragen. Je ziet hier dat een parameter naam wordt meegegeven welke bepaald is door document.getElementById(?naam?).value. In HTML dien je dit form-element dan ook aan te geven via bijvoorbeeld:


Als er een onreadystatechange is, roepen we de functie verwerkInput () aan. De functie verwerkInput gebruikt een variabele xmlhttp.readyState. Deze variabele kan een paar waarden aannemen:

  1. 0 (niet begonnen met de taak)
  2. 1 (de taak wordt geladen)
  3. 2 (de taak geladen)
  4. 3 (het object is weer beschikbaar, maar nog niet voltooid met zijn taak)
  5. 4 (de taak is voltooid)

Op het moment dat de data helemaal geladen is (oftewel als de readyState 4 is), kunnen we iets doen met de data zoals deze naar het scherm schrijven. Tenslotte geven we aan dat we klaar zijn met onze AJAX-request met xmlhttp.send(null).

Het PHP script

Het PHP-script (of ASP, JSP of wat dan ook) wat wordt aangeroepen krijgt in dit geval als parameter $_GET['naam'] binnen. Deze variabele kan gebruikt worden om op te zoeken in de database of om er iets totaal anders mee te doen. Als het bijvoorbeeld belangrijk is dat de naam minimaal 3 karakters lang is, zou dit de PHP-code kunnen zijn:

if (strlen($_POST['naam']) >= 3){

echo “De naam is WEL minimaal 3 karakters lang.”;

}else{

echo “De naam is NIET minimaal 3 karakters lang.”;

}
?>

HTML-event

Op het moment dat de gebruiker een naam invult, moet gekeken worden of de naam lang genoeg is. Dit zouden we na elke toetsaanslag kunnen bepalen, dus de applicatie zou bij elk onkeyup-event de AJAX applicatie moeten oproepen. Het HTML-formulier wordt dan iets als hieronder:


Voer je naam in:

Tot zo ver dit eerste artikel over AJAX. Eind deze week zal er een tweede artikel volgen met een iets intelligentere en minder irritante applicatie.

Wil je een stapje verder? Lees dan eens het artikel over AJAX, een object georiënteerde xml parser.