AJAX Pattern: Multi-stage download
Misschien ken jij de tijden nog toen je een internetverbinding had met een 56kbps modem. In die tijden waren 'grote' websites een ergenis voor mij. De statusbar bleef maar halverwege hangen en het duurde eeuwen voordat je content zag. Tegenwoordig hebben we breedband internet, maar we willen nog steeds niet lang wachten op het laden van een pagina.
Er is wel een oplossing voor dit probleem. Maak je web pagina's kleiner! Ok, misschien is dat geen oplossing. Misschien een design pattern? Ja, in dit geval wel. In deze post zal ik de 'Multi-stage download' pattern behandelen, een oplossing voor ons probleem.
Het principe van dit "design pattern" is heel simpel. De belangrijkste functionaliteiten van een website worden als eerste geladen en pas daarna worden alle andere delen van de website geladen.
Een goed voorbeeld hiervan is Start.com. Wanneer je naar de website gaat, zie je eerst een input form voor het zoeken. Wanneer de pagina eenmaal is geladen, dan zie je nieuwe componenten verschijnen die de website compleet maken. Dit gebeurt natuurlijk allemaal achter de schermen.
Dit design-pattern heeft enkele voordelen. De gebruiker wacht nooit lang op het laden van de pagina. Diegene ziet de website in haar simpelste vorm en heeft gelijk het idee dat de website in ieder geval functioneert. Daarnaast kan het ook dataverkeer schelen. Wanneer een gebruiker naar een andere website gaat of de browser sluit voordat de overige componenten geladen zijn, scheelt je dat dataverkeer. Was dat niet een van de doelen van AJAX gebruik?
Je kunt dus ook zelf bepalen wat je als eerst wilt laden en welke andere componenten later moeten worden geladen en op welk tijdstip. De gebruiker is ook nooit geinteresseerd in alle content van de website. Stel dat je een website hebt dat headlines bevat van nieuws. Het is duidelijk dat het draait om de headlines en het artikel zelf. Alles wat daar omheen komt is mooi meegenomen.
Elk voordeel heeft zijn nadeel. De website moet kunnen functioneren wanneer er geen ondersteuning is voor AJAX technologie. Zorg dus dat de belangrijkste data als eerst laadt. Je website moet ook indexbaar zijn voor zoekbots, deze hebben vaak geen ondersteuning voor Javascript. Ook kunnen ze geen 'state' onthouden van AJAX web applicaties.
Laten we een voorbeeld van de nieuws site uitbreiden. Als voorbeeld nemen we Webwereld. Daar draait het natuurlijk om het de headlines en artikelen, die moeten dus als eerst geladen worden. Alles wat daarna wordt geladen is extra. De rechterzijde van de website kan later geladen geworden. Ook de footer met 'Internationaal nieuws', 'Verleden nieuws' en 'Statistieken' kan later geladen worden. De gebruiker ziet deze footer ook alleen als hij doorscrollt. Geen hoge prioriteit dus.
Wat hoge prioriteiten heeft zet je dus in de body. Alles wat daarna komt moet je pas laden nadat je body is geladen. We maken hier gebruik van de window object. Een andere mogelijkheid is met <body onload=functie()>.
-
<html>
-
<head>
-
<title>Scriptorama.nl!</title>
-
<script type="text/javascript">
-
<!--
-
-
if ( ajax_support )
-
{
-
window.onload = function() {
-
// Laad alle andere data
-
// Laad prioriteit 1
-
// Laad prioriteit 2
-
}
-
}
-
-->
-
</script>
-
</head>
-
<body>
-
Alle belangrijke content staat hier
-
</body>
-
</html>
De componenten die je gaat laden stop je dan in een div en geef je weer. Of via DOM de nieuwe elementen toevoegen. Het is wel nuttig om een tekst als "Loading..." of iets in die trant te plaatsen voordat je de componenten weergeeft. Dan weet de gebruiker dat er data aankomt.
Wanneer er geen ondersteuning is voor AJAX, dan heb je nog de kritieke functionaliteit. Vergeet niet dat je AJAX moet gebruiken voor betere web ervaring voor gebruikers, niet omdat het zo cool is.
Volg Scriptorama via RSS!
on 
on 
on 
on 
on
Reageer ook!
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>