AJAX

Deze site geeft een mooie beknopte tutorial over AJAX.

Wat is AJAX eigenlijk? AJAX staat voor 'Asynchronous JavaScript and XML'.Het komt er op neer dat er een XMLHttpRequest geplaatst wordt. Bij een gewoon Http-Request wordt er een verzoek naar de server verzonden die daarop reageert door de gevraagde pagina naar de browser te sturen. Bij AJAX wordt er ook een request verstuurd maar nu niet op initiatief van de browser maar op initiatief van de webpagina zelf. Die doet dat doormiddel van JavaScript. Het resultaat is nu niet dat er een heel nieuwe pagina geladen wordt maar slechts wat losse data die door JavaScript worden 'opgevangen'. Meestal met het doel om deze ergens op de pagina te tonen. Die data worden dan gewoonlijk ingevoegd d.m.v. document.getElementById('id').innerHTML= datastring.

Hoe kunnen we deze mooie functionaliteit voor ons eigen doel gebruiken? Daarvoor instantieren we een object met 'new XMLHttpRequest()' of het IE<7-alternatief. Deze kunnen we b.v. pipo noemen. pipo = new XMLHttpRequest(); Nu moeten we van dit object nog aangeven wat er moet gebeuren met de data die binnen komt. Daarvoor hangen we een zelfgemaakte functie aan pipo. Dat is een gewone functie maar die wordt automatisch aangeroepen als er sprake is van een bepaalde gebeurtenis (event). Een functie die zo gebruikt wordt, wordt een eventhandler genoemd. Deze wordt gekoppeld aan het onreadystatechange-event van het XMLHttpRequest (of het IE-alternatief).Wij hadden ons AJAX-object 'pipo' genoemd dus krijgen we: pipo.onreadystatechange = DoeIets;(merk op geen () want het betreft slechts een verwijzing en niet een uitvoering. Als we dat hebben gedaan, kunnen we een verbinding openen en een verzoek plaatsen. Dan zijn we klaar. Nu is het wachten op het event en als dat plaatsvindt dan gaat onze zelfgemaakte eventhandler aan de slag. De ajaxroutine is dus niet een doorlopende serie handelingen waarbij data worden binnengeladen. Het bestaat uit twee losse delen: A. Het versturen van een aanvraag en B nadat de data zijn aangekomen deze verder verwerken bijvoorbeeld ergens op een HTML-pagina plaatsen. Daartussen zit niets en kan javascript gewoon doorgaan met eventuele andere taken. Javascript wordt pas weer actief als het onreadystatechange-event optreedt en dat gebeurt als de bestelde data binnenkomen. De data die ontvangen worden zitten in het objectproperty met de naam pipo.responseText. Soms wordt voor de eventhandler een anonieme functie gebruikt, dat is lekker compact. Meestal is het een aparte functie of zijn er meerdere functies die als eventhandler kunnen dienen.

Het kan gebeuren dat een pagina op meerdere plaatsen ajax-data ingevoegd krijgt. Hiervoor zijn dan verschillende eventhandlers nodig. Welke data opgehaald worden dat wordt bepaald door een URL in het request. Nu zou het een beetje ondoenlijk zijn om voor iedere aanvraag een aparte AJAX-functie te maken. Gelukkig kunnen we de URL als parameter doorgeven maar hoe doen we dat met de eventhandler? Hoe kunnen we er voor zorgen dat de data op de juiste plaats ingevoegd wordt als dat variabel is? Denk daar maar even over na. Misschien is het nog mogelijk om het id van het betreffende html-element als parameter door te geven aan een anonieme functie die de eventhandler kan zijn maar als die eventhandler meer doet dan data plaatsen dan kunnen ze onderling heel verschillend zijn. Dat los je niet op met een parameter. Er is daar een hele elegante oplossing voor die lang niet in alle programmeertalen mogelijk is: De callback-functie. Je maakt net zo veel eventhandlers als je nodig denkt te hebben en je geeft de naam van de betreffende functie als parameter door aan de AJAX-functie. Deze functie koppelt de handler aan het event en zo heb je dus complete controle over welke data op welke manier behandeld worden. we zien dat hier.

Net als bij het gewone Http-Request kunnen er data meegestuurd worden. Dit kan ook weer op de GET en POST manier.

In mijn slideshowprogramma maak ik gebruik van SJAX. Dat is net zo iets als AJAX maar dan synchroon. Dat wil zeggen dat het proces niet parallel aan de overige JavaScript routines loopt maar daarin opgenomen is. In dit geval moesten er data geladen worden waarvan de waarden toegekend werden aan javascript variabelen. De verdere uitvoering van het script was afhankelijk van die data. Meestal worden er slechts wat gegevens opgehaald om ergens in een div te zetten. AJAX is dan prima maar hier niet. Het script mocht namelijk niet verder gaan voordat die gegevens waren ontvangen. Met AJAX ging het fout omdat de variabelen geen waarde hadden. Het script ging gewoon in razend tempo verder zonder te wachten op de data die nog binnen moesten komen. Ik had natuurlijk ook het hele verdere script in de eventhandler op kunnen nemen. Daar was w.s. niets tegen geweest maar destijds ging dat wat tegen mijn intuïtie in. Met SJAX werkt het in iedere geval prima.

Met deze uitleg in het achterhoofd zijn de pagina's op w3schools hierover makkelijk te begrijpen.