Scriptorama.nl

Laatste tijd zie je steeds meer Javascript libraries verschijnen, ook AJAX frameworks. In dit artikel zal ik het populaire Javascript library Prototype introduceren, met de nadruk op haar AJAX functionaliteit. Wanneer je veel met het XMLHttpRequest object werkt, zie je vaak dezelfde code terugkomen. Het XHR object aanmaken, server-side script met parameters aanroepen en data uitlezen. Ongetwijfeld zul je al een eigen createXMLHttpRequestObject() functie hebben, maar het leidt tot allemaal losse functies hier en daar, verspreid over verschillende bestanden. Met Prototype kunnen we eleganter code schrijven. In Afhankelijke listboxes met PHP, MySQLi en Prototype gaf Mathieu al een korte introductie tot de AJAX functionaliteit van Prototype, met dit artikel gaan we er dieper op in.

Voordelen Prototype

Het gebruik van Prototype, of een ander goed Javascript library, heeft meerdere voordelen dan handmatig alles scripten. De notaties zijn vaak korter en daarmee kun je veel sneller code schrijven. Geef toe, document.getElementById('divje') is toch veel langer dan $('divje'). Scheelt weer een paar bytes. Een ander groot voordeel is dat je geen zorgen hoeft te maken over cross-browser compatabiliteit, met andere woorden zorgen dat het werkt onder verschillende browsers.

AJAX.Request

Met Prototype kunnen we ook met het XHR object werken. Prototype heeft namelijk een Ajax object, dat weer verschillende classes heeft. Zo heb je Ajax.Request, Ajax.Updater en Ajax.Responders. We zullen beginnen met een simpele call naar een server-side script. Hiervoor heb je Ajax.Request nodig.

Nu nog onze server-side script:

Wanneer je deze code uitvoert, zie je onmiddelijk de output:
id = 1337 en de uber coder is tri.

Laten we even de code ontleden. Ajax.Request verwacht als eerste parameter de URL naar je server-side script. In dit geval is dat 'mijn_server_side_script.php'. Als tweede argument gebruiken wij een anonymous object. In dit object geven we verschillende parameters door. We beginnen met de request methode, GET of POST, in dit geval willen wij een GET request uitvoeren. Daarna geven we parameters door aan de property 'parameters'. Als laatste geven we aan welke functie wordt geroepen nadat de XHR call succesvol is afgerond. We konden het ook korter schrijven op een regel:

Het argument aan je defineerde functie is het XHR object. Dus request in de functie mijn_functie is het XHR object. Hiermee kun je dus responseText of responseXML uitlezen.

Ajax.Request kan meer argumenten aan. Voor meer informatie, hier is een onofficiele documentatie te vinden. Sam Stephenson, ontwikkelaar van Prototype, had blijkbaar geen zin om documentatie te maken maar gelukkig hebben anderen dat wel gedaan.

AJAX.Updater

In ons voorbeeld deden we niet veel met de data die we terugkregen van onze server-side script. Je kunt bijvoorbeeld JSON data uitpakken of andere transformaties uitvoeren. Om nou voor elke XHR call een functie te schrijven die simpelweg alleen wat HTML in innerHTML inject, kunnen we Ajax.Updater gebruiken.

Deze code levert dezelfde functionaliteit als onze eerste voorbeeld, alleen dit keer wordt automatisch de inhoud van de div 'content' automatisch ge-update. Je hoeft alleen als eerste argument aangeven welke id je wilt gebruiken, de rest is hetzelfde behalve dat je dit keer geen onComplete property hoeft aan te geven. Simpel!

Ajax.PeriodicalUpdater

Af en toe heb wil je Ajax.Updater om de periode aanroepen. Dit kunnen we doen met Javascript's ingebouwde timer events, maar gelukkig heeft Prototype dit al ingebouwd, met Ajax.PeriodicalUpdater.

Met de frequency geef je aan om de hoeveel secondes een nieuwe request moet worden gemaakt. Een handig vernufje is de decay property. Het kan zijn dat je vaak dezelfde content ophaalt. Is dat het geval, dan vermenigvuldigt Prototype de frequentie met de waarde van decay totdat er nieuwe content is. Dus bij de tweede request controleert Prototype of de vorige content hetzelfde is. Is dat het geval dan duurt het 1 * 2 = 2 secondes voordat een nieuwe request wordt gemaakt. Is daarna de content weer hetzelfde, dan duurt het 2 * 2 = 4 secondes voordat een nieuwe request wordt gemaakt. Dit gaat dus door totdat er nieuwe content is, dan is de frequentie weer 1. Jaja, handig!

Ajax.Responders

Zoals je misschien al zag, konden we de callback handling defineren in het betreffende AJAX object. We hebben dit gedaan voor onComplete, maar konden het ook doen voor onCreate, onFailure en nog meer. We kunnen dit voor alle functies instellen met Ajax.Responders. Deze code heb ik letter overgenomen van de onofficiele documentatie.

Bij het maken van de XHR request verschijnt er een activity indicator (zooo web 2.0), iets wat ten sterkste aangeraden zodat de gebruiker weet dat er activiteit is. De onComplete callback wil je waarschijnlijk niet voor elke XHR call gelden, maar bijvoorbeeld onFailure wel.

Ik heb jullie laten zien dat AJAX niet moeilijk en saai hoeft te zijn met Prototype. Voor meer documentatie, hier is een overzicht.