Ajax ontrafeld

Ajax is hot. Het is momenteel een veel besproken begrip op het Internet. Met Ajax bedoel ik in dit verband niet de Amsterdamse voetbalclub of de Griekse held uit de Ilias. Het Ajax waar ik het in dit artikel over heb is een samensmelting van de woorden Asynchroon JavaScript en XML.

Met Google als lijstaanvoerder schieten de ajax toepassingen momenteel als paddestoelen uit de grond. Google Gmail¹, Google Maps² en Flickr³ hebben hun succes grotendeels te danken aan Ajax.

Modeketen Gap⁴ investeerde zelfs 10 miljoen dollar in een redesign van haar website⁵. Het doel was om het aantal klikken per bezoeker terug te brengen en zo het online winkelen op haar website makkelijker te maken. Vanuit technologisch en gebruiksvriendelijkheids perspectief is de site zijn concurrentie inmiddels mijlenver vooruit. Hoe men alles dit realiseerde? Met het wondermiddel Ajax natuurlijk!

Business 2.0 plaats Ajax zelfs bovenaan de lijst van zeven technologieën die de wereld zullen veranderen⁶.

Ajax de technologie

De term Ajax werd op 18 februari 2005 in het artikel “Ajax: A New Approach to Web Applications⁷” geïntroduceerd door Jesse James Garret. De nieuwe benadering houdt in dat webapplicaties steeds interactiever worden. De grens tussen desktop software en webapplicaties vervagen.

Als voorbeeld van een Ajax toepassing noemt Garret Google Suggest⁸. Terwijl je een zoekterm intikt krijg je tegelijkertijd een overzicht van andere interessante zoektermen.

Een ander voorbeeld dat hij noemt is Google Maps. Inzoomen, uitzoomen, naar links, rechts onder of boven alles gebeurt in een vloeiende beweging.

Volgens Garret maakt Ajax maakt gebruik van de volgende technieken:

XHTML en CSS voor de presentatie volgens de standaarden van het W3C;

Het Document Object Model voor het dynamisch tonen van informatie en voor interactie;

XML en XSLT voor de opslag, aanpassing en transport van gegevens;

Het XMLHttpRequest object⁹ voor asynchrone communicatie;

JavaScript om alles aan elkaar te binden.

Robin Good denkt dat het grote succes toch vooral te danken is aan het XMLHttpRequest object¹⁰.

Zonder XMLHttpRequest kan je echter ook de interactiviteit van Google Maps evenaren. De interactieve kaart van Zwitserland¹¹ is hiervan het mooiste voorbeeld. Qua interactiviteit evenaart het met gemak Google Maps. Het is echter volledig opgebouwd uit HTML en JavaScript¹².

En zo zijn er vele discussies gaande over wat nu wel en wat nu geen Ajax geen is.

Peter-Paul Koch tot slot komt in het artikel “Ajax, promise or Hype¹³” tot de conclusie dat XML en XMLHttpRequest niet persé nodig zijn voor het maken van interactieve webapplicaties. XSLT voegt helemaal weinig toe ten opzichte van JavaScript. Het enige dat dus overblijft zijn XHTML, CSS en DOM (JavaScript).

Het leuke is, deze technieken bestaan al sinds 1998¹⁴. In het boek “designing with web standards¹⁵” van Jeffrey Zeldman worden XHTML, CSS en DOM uitvoerig behandelt.

Volgens Zeldman kunnen we een webpagina opdelen in drie delen¹⁶:

Structuur;

Presentatie;

Behavior.

Structuur

Het eerste aspect van webontwikkeling is de structuur. Dit is de virtuele ruggengraat van een website. Alle verdere facetten zullen gebaseerd zijn op een stevige structuur. De structuur wordt vormgegeven met XHTML.

Presentatie

Het tweede belangrijke aspect van een website is de presentatie ervan. Hoewel de structuur minstens even belangrijk is, willen de meeste mensen naar een mooie esthetisch verantwoorde interface kijken. De presentatie kunnen we opmaken met CSS.

Behavior

Het laatste deel van een web document is hoe een website zich gedraagt. Een site kan aan de hand van een standaard object model (het W3C DOM) dynamische effecten genereren. Dit DOM werkt met CSS, XHTML en ECMAScript 262 – de standaard versie van JavaScript.

De waarde van webstandaarden

Omdat de structuur, de presentatie en behavior van elkaar gescheiden zijn is het mogelijk om één ervan te wijzigen zonder consequenties te veroorzaken voor de andere. Zo kan er eenvoudig nieuwe inhoud aan een pagina worden toegevoegd, zonder het risico dat de lay-out kan beschadigd raken.

Zo kan je ook de lay-out wijzigen zonder de inhoud te schaden. Zijn er lezers die klagen dat een bepaalde fontgrootte te klein is? Eenvoudig een regel wijzigen in het CSS bestand en de hele site reflecteert de verandering. Nood aan een printer vriendelijke versie? Dan kan er een aparte style sheet aangemaakt worden die ervoor zal zorgen dat je paginas prachtig zullen afgedrukt worden, hoe verschillend het resultaat op het scherm ook mag zijn.

Bron: Webstandaarden: scheiding van structuur en opmaak¹⁷

De waarde van webstandaarden is inmiddels wel aangetoond. Toch blijft het raar dat er pas nu aandacht voor is. De technieken bestaan immers als meer dan zeven jaar! Waarom is er dan nu pas aandacht voor? Een bevredigend antwoord op deze vraag is niet te geven.

Waarom nu pas aandacht voor Ajax?

Ik heb wel de volgende hypothese. Het Internet is een volwassen medium en bedrijven eisen steeds meer kwaliteit. Hierdoor is het kaf van het koren gescheiden. De hobbyisten hebben het veld geruimd voor de professionals. De groei van een op tabellen gebaseerde lay-out naar en op webstandaarden gebaseerde lay-out is vooral evolutionair van aard en heeft vooral te maken met natuurlijke selectie. Het leren van JavaScript is veel moeilijker dan het leren van XHTML en CSS, maar nu steeds meer ontwikkelaars deze laatste twee onder de knie hebben is het tijd voor een nieuwe uitdaging. Google Maps heeft voor vele ontwikkelaars de ogen geopend. Deze zijn druk aan het ontwikkelen gegaan wat momenteel resulteert in een wildgroei aan interactieve Internet toepassingen.

Ajax en gebruiksvriendelijkheid

Hoewel Ajax vanuit technologisch perspectief misschien niet de best mogelijke benaming is, blijven we dit begrip verder wel hanteren voor het gemak van de discussie.

Uiteindelijk zijn het de eindgebruikers die bepalen of een technologie slaagt of niet. Ajax is nu vooral nog iets voor de vernieuwers en de vroege aanvaarders, om maar even in de termen van Rogers¹⁸ te spreken. Of het echter geaccepteerd zal worden door de grote meerderheid is volledig afhankelijk van de uiteindelijke voordelen voor de gebruiker. Met andere woorden “wat schiet ik er mee op”

Het einde van World Wide Wait

Internet wordt wel eens gekscherend het World Wide Wait¹⁹ genoemd. Vaak is wachten, wachten, wachten ook wel een heel passende benaming. Dat dit leidt tot heel veel frustratie leidt blijkt maar weer eens uit een discussie over de traagheid van de onlangs gelanceerde postbank site²⁰.

De voorbeelden Google Gmail, Google Maps en Flickr hebben een ding met elkaar gemeen en dat is dat er van wachten haast geen sprake meer is. Dankzij Ajax lijkt er een einde te zijn gekomen aan dat eeuwige wachten²¹.

Traditioneel gezien kenmerkt Internet zich door haar start-stop-start-stop natuur van interactie. De gebruiker van een website voert een actie uit. Dit gaat naar de webserver toe en deze presenteert vervolgens het resultaat aan de bezoeker.

Ajax is als het ware een extra laag tussen de gebruiker en de server. Op een actie van de gebruiker vindt vrijwel onmiddellijk feedback plaats.

Foutenreductie dankzij Ajax

Allemaal hebben we wel eens een formulier ingevuld die, nadat we op de verzendknop klikten, ons vrolijk meedeelde dat we onze postcode niet juist hebben ingevoerd.

Waarom gebeurt dit? Vragen we ons af! Nu vullen we dit formulier weer in maar dan heeft de ontwikkelaar gebruik gemaakt van Ajax. We vullen weer onze postcode in maar voordat we op de verzend knop drukken waarschuwt de website ons al dat we een fout gemaakt hebben.

Dankzij de mogelijkheid van directe feedback kunnen fouten worden voorkomen.

Flow-ervaring dankzij Ajax

De zoekmachine A9.com²² is ook een mooi voorbeeld van wat allemaal mogelijk is. Door het eenvoudig aanvinken van een selectievakje zoek je in meerdere categorieën of laat je alle zoekresultaten van een categorie weg. De resultaten krijg je vrijwel onmiddellijk na het aanvinken van het selectievakje.

Het is de snelheid waarmee de website reageert op onze keuze dat Ajax zo geliefd bij de bezoekers maakt.

De Amerikaanse psycholoog Roger Miller stelde eens het volgende rijtje op²³:

0,1 seconde gebruikers hebben het gevoel dat het systeem onmiddellijk reageert;

1 seconde gebruikers zijn nog geconcentreerd;

10 seconden. gebruikers gaan andere dingen doen.

De interactie met de website gaat zo soepel dat we als het ware in gemakkelijk in een flow-ervaring²⁴ geraken. We vergeten onze omgeving en verliezen de tijd uit het oog. We gaan volledig op in het systeem. Het is gewoon leuk om met de website te spelen.

Het einde van Pogo-sticking

Het heen en weer gaan van de productenlijst en de detailpagina van het desbetreffende product wordt ook wel pogo-sticking genoemd. Jared Spool stuitte op dit fenomeen toen hij de invloed van productlijsten op de verkoop van van e-commerce sites onderzocht.

Dit heen-en-weer surfen doen mensen als de productenlijst niet voldoende informatie biedt. Ze moeten dan een stap verder de website in duiken. Als ze de gedetailleerde informatie hebben gevonden die ze zochten keren ze weer terug naar de productenlijst en kiezen een ander product uit zodat ze een vergelijking kunnen maken.

Bezoekers die op basis van de productlijst al voldoende informatie hebben gaan in 55% van de gevallen over tot aankoop. Bezoekers die heen-en-weer moeten surfen doen dit slechts in 11% van de gevallen²⁵.

Met Ajax-technologie is het mogelijk om per product meer informatie aan te bieden zonder dat de gebruiker daarvoor naar een heel nieuwe pagina hoeft te gaan.

Stel ik wil een broek kopen bij de Gap.com. Ik klik op Men en dan Jeans. Vervolgens krijg ik een overzicht spijkerbroeken. Ik zie eentje die ik op zich wel leuk vindt. Ik kan nu op de “quick look” button klikken. Vervolgens verschijnt er een pop-up scherm in mijn beeld en zie ik de spijkerbroek in het groot. Ik kan de kleur kiezen en zie een overzicht van de maten. Het is toch niet helemaal wat ik zocht. Ik sluit het pop-venster weer af en selecteer een andere spijkerbroek. Zo kan ik zeer snel alle producten even vergelijken voordat ik mijn keuze maak. Ajax maakt dus een einde aan pogo-sticking.

Ajax en toegankelijkheid

Een veel gehoord argument tegen Ajax is dat de website daardoor niet toegankelijk is. In het voorbeeld van Gap.com is dat ook het geval. Indien de browser geen JavaScript ondersteunt werkt de site niet. Maar dit is eerder een keuze van de bouwer dan van een beperking van de technologie.

Het mooiste voorbeeld is misschien nog wel Google Suggest. Je tikt een zoekterm in en krijgt een overzicht van allerlei andere interessante zoektermen. Schakel je echter JavaScript uit dan werkt de zoekmachine nog steeds alleen krijg je nu niet dat extra overzichtje.

Een perfect voorbeeld van hoe je Ajax moet zien. Het is die Jus waardoor het vlees net even lekkerder smaakt. Maar net zoals het vlees de basis is voor het gerecht zo is toegankelijkheid de basis voor een webapplicatie.

Bronnen

1. Google Gmail
2. Google Maps
3. Flickr
4. Gap.com
5. New Approach From Gap to Cut Down on Clicks
6. Seven Technologies That Change Everything
7. Ajax: A New Approach to Web Applications
8. Google Suggest
9. Dynamic HTML and XML: The XMLHttpRequest Object
10. What Is Ajax And What Is It Good For
11. Interactieve kaart Zwitserland
12. DHTML 05
13. Ajax, promise or hype?
14. History of the Web Standards Project
15. Amazon.com: Designing with Web Standards
16. Zeldman video keynote
17. Drievuldigheid van Webstandaarden
18. Innovatietheorie van Rogers
19. World Wide Wait: Information From Answers.com
20. Postbank lanceert nieuwe site
21. Ajax: How To Weave A Faster Web
22. A9.com Home Page
23. Response Times: The Three Important Limits
24. Flow (psychology) – Wikipedia, the free encyclopedia
25. Are the Product Lists on Your Site Reducing Sales? (Pas op PDF!)

Be Sociable, Share!

• 
•