Ook al bestaat het al wat langer dan vandaag zien we tegenwoordig steeds vaker dat websites gebruik beginnen maken van AJAX technieken. AJAX staat voor “Asynchronous Javascript and XML” en stelt ons in staat snellere, efficiëntere en interactievere pagina’s te maken. Soms wordt er ook wel eens gebruik gemaakt van de term XHR, dat een afkorting is voor XMLHTTPrequest. Het concept draait voornamelijk rond de term asynchronous, wat betekent dat er achter de schermen informatie met de server wordt uitgewisseld. Via AJAX kunnen we simpel gesteld dus de inhoud van een pagina bijwerken zonder de hele pagina te moeten inladen of verversen.
Enkele bekende voorbeelden zijn zonder twijfel e-maildienst Gmail en reviewsite Yozo. Deze laatste maakt bijvoorbeeld gebruik van AJAX voor het pagineren van haar zoekresultaten. AJAX valt tegenwoordig ook veel eenvoudiger zelf te implementeren, door het gebruik van jQuery, een open-source Javascript framework. Voorheen moesten er toch redelijk wat ingewikkelde regels code voor geproduceerd worden, maar via jQuery kan dit ten eerste veel korter, maar ten tweede ook veel gestructureerder. Ik probeer het even te illustreren met een zo eenvoudig mogelijk codevoorbeeld.
$.ajax({
url: "pagina.php"
}).done(function(html) {
$("#tekstinhoud").html(html);
});
Dit klein stukje code laat toe om de inhoud van een pagina (in dit geval “pagina.php”) in te lezen zonder dat de gebruiker daarvoor naar een andere pagina moet worden geleid. De inhoud van die pagina wordt compleet in de achtergrond ingelezen en na afloop wordt de inhoud van het element “#tekstinhoud” bijgewerkt en vervangen door de nieuwe tekst.
Het goede hieraan is dat we enkel en alleen de tekst van de opgevraagde pagina opnieuw moeten inlezen en weergeven. De rest van de webpagina (die onder meer de afbeeldingen, DOM structuur en CSS-regels bevat) blijft gewoon behouden en hoeft dus niet herladen te worden. Dat dit bijdraagt tot snellere laadtijden behoeft natuurlijk geen betoog.
Natuurlijk blijft het inlezen via AJAX niet beperkt tot louter wat (statische) tekst inlezen. Zo kan men bijvoorbeeld ook GET of POST parameters meesturen, inhoud cachen, scripts in de achtergrond inlezen of ingevulde gegevens van een formulier ogenblikkelijk wegschrijven naar de server. De mogelijkheden zijn echt redelijk uitgebreid, en je maakt het natuurlijk zelf zo complex als je website vereist.
Hulp nodig bij AJAX of jQuery? Neem contact met ons op en we helpen je graag verder!
Geef een reactie