Wat is Ajax?
Een onderwerp waar ik al een tijdje over wil schrijven is Ajax (niet de Amsterdams voetbalclub, maar een van de grootste doorbraken op het internet van de afgelopen 5 jaar). Het is er nog niet van gekomen, want waar start je met Ajax?
Het is inmiddels een verzamelterm voor zoveel nieuwe features, dat een eenvoudige samenvatting moeilijk te geven is. Ik zal me er toch aan wagen. Heb je een betere suggestie? Laat het me weten!
Een voorbeeld: een artikel schrijven met WordPress
Terwijl ik dit bericht type zie ik een voorbeeld van Ajax in werking: WordPress (waarmee ik deze site maak) is zo gemaakt dat het – om de paar minuten – even verbinding maakt met de server en een voorlopige kopie maakt van het artikel waar je aan werkt. Mocht mijn browser om wat voor reden dan ook vastlopen, dan heb ik toch nog het grootste gedeelte van mijn tekst gered.
De functie die het doet valt onder Ajax: Asynchrone Javascript eXchange.
Wie gebruikte voor het eerst de term?
Jesse James Garrett van Adaptive Path was de eerste die deze term gebruikte voor een bestaande techniek. Garrett stelt zelf dat hij de naam om de volgende reden heeft bedacht:
Q. Why did you feel the need to give this a name?
A. I needed something shorter than “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest†to use when discussing this approach with clients.
Wat is Ajax precies?
Op zijn website geeft hij aan dat het eigenlijk een verzameling aan technieken is:
1) XHTML en CSS
2) interactie met het Document Object Model van browsers
3) data uitwisseling met XML en XSLT
4) asynchrone uitwisseling met XMLHTTPRequest
5) Javascript
Een korte toelichting op deze technieken:
ad 1) XHTML en CSS: het gebruik van valide HTML volgens XML standaarden. Dit betekent vooral dat je al je HTML tags afsluit. Voorheen kon je bijvoorbeeld een break met <br> maken. In XHTML moet dit <br/> zijn: je opent en sluit de BR tag tegelijkertijd. De opmaak regel je met CSS.
ad 2) Ajax kan bewerkingen uitvoeren op de DOM van je webpagina. De DOM is een schematische XML weergave van een XHTML pagina (het model). De rangorde van elementen in je pagina is in de DOM vastgelegd. Zie het als een familie: je hebt ouders, kinderen, kleinkinderen, etc. Alle elementen in je pagina zijn bijvoorbeeld kind van de body tag.
ad 3) Als er op je server XML documenten gemaakt kunnen worden, dan kunnen die door Ajax gebruikt worden als bron voor bewerkingen in je webpagina. XSLT is een taal die XML kan aanpassen en vooral op servers gebruikt wordt. Met XSLT kan je een XML bijvoorbeeld omzetten naar een XHTML document, een WordXML document, PDF, een ander XML document, etc.
ad 4) Met asynchrone uitwisseling wordt bedoeld dat de informatie die tussen de browser en de server wordt uitgewisseld onafhankelijk van pagina verversingen. Als ik het zou willen vergelijken met niet digitale communicatie is het hetzelfde als het verschil tussen een briefwisseling (wachten op antwoord en weer terugschrijven) en iemand face-to-face spreken. Voor Ajax moest je voor elk stukje nieuwe informatie je pagina verversen, nu kan dit terwijl je je pagina nog bekijkt. Een deel van je pagina kan met Ajax vervangen worden. Grote voordelen hiervan zijn dat je pagina's er veel dynamischer van worden, je minder bandbreedte nodig hebt, het sneller is, etc. Deze uitwisseling gebeurt met een Javascript object: XMLHTTPRequest.
ad 5) Javascript is de grote verbindende factor: hiermee kan je de data die je terugkrijgt van je server weer verwerken in je pagina.
© Adaptive Path
Wat kan je met Ajax?
Onnoemelijk veel. The sky is the limit. Een paar voorbeelden bij Google: Google suggest, Google maps, GMail, Google Calendar, etc. Je kunt wel stellen dat Google de grote doorbraak is geweest voor Ajax. Over andere voorbeelden die je in ej eigen website kunt gebruiken wil ik de komende tijd meer gaan schrijven.
Meer lezen?
Een weblog dat ik zelf in de gaten houd is Ajaxian.
