Edwin V.

byFly.net is al tijden mijn virtuele kindje. Nu hij zijn eerste stapjes in de grote mensen wereld gezet heeft, denk ik dat het tijd wordt om hem eens te leren voetballen zodat hij later misschien wat kan gaan doen bij AJAX.

Een van de trends binnen Web 2.0 is Rich User Experience. Door middel van alom bekende technieken is het nu plots mogelijk om de mooiste dingen te doen en de gebruiker een rijkere ervaring te geven. Verschillende JavaScript libraries maken je het op dit punt makkelijk, ze bieden je een uitbreiding van de standaard functies van JavaScript (Prototype), mooie effecten (Script.aculo.us) en AJAX functionaliteit (Prototype).

De opbouw van een pagina binnen byFly.net bestaat uit enkele containers die zijn vastgelegd in de sjabloon van de pagina. Binnen het systeem bepaal je welke inhoud deze containers moet hebben door er gegevensblokken aan toe te voegen. De inhoud van deze gegevensblokken is afkomstig van de verschillende modules en kunnen dus allerlei soorten inhoud bevatten.

Wanneer 2 pagina’s dezelfde sjablonen hebben, is het dus mogelijk om alleen de inhoud van de containers te vervangen met de nieuwe inhoud. We kunnen zelfs nog een stapje verder gaan: blokken die in beide pagina’s aanwezig zijn hoeven ook niet meer van de server gehaalt te worden. Via een simpele AJAX request halen we dus alleen de nieuwe blokken op en plaatsen die in de juiste containers in de pagina.

Een nadeel van deze manier van werken is de gebruiksvriendelijkheid voor minder validen. Daarbij denk ik voornamelijk aan de bezoekers die met een screenreader de website bekijken en soms geen JavaScript ondersteuning hebben. Een belangrijke eis is dus dat de pagina’s ook zonder JavaScript normaal hun werk doen. Daarnaast moet het systeem niet de handige features van de browser onbruikbaar maken, zoals de bookmark functie en de history knoppen.

De eerste eis is redelijk simpel te bereiken: zorg ervoor dat het systeem altijd een normaal bruikbare pagina oplevert en vervang in de browser pas de links naar pagina’s door links naar AJAX requests.

De tweede eis had wat meer voeten in de aarde. Bronnen die ik hiervoor gebruikt heb zijn:
* AJAX Tutorial: A Tale of Two IFrames
* Developing Ajax Applications That Preserve Standard Browser Functionality
* Fixing the Back Button and Enabling Bookmarking for AJAX Apps
* AJAX: How to Handle Bookmarks and Back Buttons

De oplossing ligt in het gebruiken van het hash element in een url. Door deze aan te passen zal er geen nieuwe request naar de server gaan, maar wordt in Firefox wel de history aangeroepen en is het mogelijk om een link op te slaan als bookmark.

De werking van het systeem zal globaal het volgende zijn:
# Na het laden van de pagina alle links op de pagina aanpassen en in plaats van ‘index.php?page=_pagename_’ de link te laten verwijzen naar ‘index.php#_pagename_’.
# Een inventarisatie maken van de huidige inhoud van de containers.
# Een observer aanmaken die door middel van polling kijkt of de hash in de url aangepast is doordat er op een link in de pagina geklikt is.
# Indien dit het geval is, de huidige toestand van de pagina opsturen naar een serverside script
# Dit script zal de structuur van de weer te geven pagina opsturen en alleen de gegevens die nog niet beschikbaar zijn in de browser meesturen
# De response van de AJAX request wordt verwerkt tot een aanpassing van de containers op de pagina met de nieuwe gegevens. Dit kan eventueel gebeuren met een mooi effectje.

Een eerste versie van dit systeem is hier te vinden.

De volgende punten moeten nog opgelost worden:
* Wat als een gebruiker zonder JavaScript van een gebruiker met JavaScript een url met een hash erin krijgt? Op dit moment wordt in JavaScript die hash uitgelezen en de pagina aangepast. Dit is zoiezo onzinnig, want dan wordt eerst een paginainhoud geladen die de gebruiker niet nodig heeft, om vervolgens deze direct te vervangen met de inhoud van de pagina van de hash.
* Zou niet van tevoren bekend moeten zijn of achter een link een pagina met een andere sjabloon zit? Hierdoor kan sneller ingespeelt worden op requests van pagina’s met een andere sjabloon door gelijk de complete pagina te verversen. Is dit de verantwoordelijkheid van het serverside script of kan dit ook opgelost worden met een AJAX request gelijk na het laden van de pagina?
* In Internet Explorer moet de history functie nog geïmplementeerd worden. Hiervoor moet gebruik gemaakt worden van een iframe.