9 Inleiding tot AJAX
Alle moderne websites maken tegenwoordig gebruik van AJAX. Denk maar aan Gmail, Google Drive, Facebook en Twitter.
In tegenstelling tot een klassieke webpagina worden bij AJAX-gestuurde pagina's delen van de pagina ververst zonder de volledige webpagina opnieuw in te laden. De pagina's worden hierdoor veel interactiever en intuïtiever. De gebruiker krijgt meer het gevoel dat hij in een desktopapplicatie werkt dan op een website. Websites die hoofdzakelijk gebruik maken van AJAX noemt men ook wel Rich Internet Applicaties of RIA's.
AJAX is geen technologie op zich, maar een algemene term voor het ontwerpen van interactieve pagina's waarbij gegevens uit een extern bestand worden opgehaald en vervolgens dynamisch worden getoond. Het grote voordeel van AJAX t.o.v. uitsluitend klassieke webpagina's is dat alle gegevens dynamisch in de browser worden geladen. Alle interactiviteit (sorteren, filteren, ...) gebeurt dus volledig binnen de browser zonder dat er een nieuwe connectie met de server nodig is.
De communicatie binnen een klassieke website gebeurt als volgt:
De browser laadt een pagina.
De gebruiker klikt op een link.
De browser vraagt een volledig nieuwe pagina op.
De webserver stuurt de nieuwe pagina naar de browser.
De browser toont de nieuwe pagina.
De communicatie met een AJAX-pagina verloopt als volgt:
De browser laadt een pagina.
De gebruiker klikt op een link.
De JavaScript engine verwerkt de aanvraag en stuurt de aanvraag in de achtergrond door naar een externe pagina.
De JavaScript engine ontvangt de gegevens en past het DOM aan.
De browser toont de nieuwe gegevens en hoeft daarvoor niet de volledige pagina te herladen.
Omdat de browser minder met de webserver communiceert en omdat de verwerking volledig lokaal gebeurt, krijgen we een zeer snelle respons en een snelle pagina update.
In dit hoofdstuk geven we een korte inleiding tot AJAX en verduidelijken we enkele begrippen. De oefeningen komen in de twee volgende hoofdstukken aan bod.
Een volledig overzicht van alle AJAX-methodes vindt u hier: http://api.jquery.com/category/ajax/
Last updated