De hype die AJAX heet
Sinds de start van internet is er gezocht naar naar asynchrone communicatie bij het weergeven van internet pagina's. Pas sinds de implementatie van het XMLHTTP JavaScript object is dit ook mogelijk en zo is AJAX geboren. Zoals met zoveel internet hypes wordt ook de techniek achter AJAX vaak moeilijker uitgelegd dan de werkelijkheid is. De basis is simpel; Lees met behulp van de JavaScript functie de inhoud van een pagina ergens op het internet en verwerk deze in je website met JavaScript zonder dat je de pagina in zijn volledigheid refresed.
Het wijzigen van de inhoud van een layer was al niet moeilijk, dit is mogelijk met
| document.getElementById('div_object_id').innerHTML = "Voorbeeld tekst"; |
Door gebruik te maken van XMLHTTP is het mogelijk om de inhoud van een bestand te lezen en deze door te geven. Hier een voorbeeld.
|
<script language='javascript'>
function getHTTPObject()
{
if (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
httpObject = getHTTPObject();
if (httpObject != null)
{
httpObject.open("GET", bestand, true);
httpObject.onreadystatechange = function()
{
if (httpObject.readyState == 4 && httpObject.status == 200)
{
document.getElementById('div_object_id').innerHTML = httpObject.responseText;
}
};
httpObject.send(null);
}
</script>
|
Het checken van de statussen is belangrijk om te checken of de functie al klaar is met lezen. Dit zorgt dus eigenlijk voor de 'asynchroniteit'. Er zijn een aantal statussen mogelijk:
- 200; (OK) Het opvragen van de pagina is gelukt
- 201; (Created) Het opvragen van de pagina is gelukt en de inhoud is in een nieuwe resource opgeslagen
- 202; (Accepted) Het opvragen van de pagina is geaccepteerd maar nog niet afgelopen
- 203; (Non-Authoritative Information) Het opvragen van een deel van de pagina is gelukt
- 204; (No Content) Het opvragen van de pagina is gelukt maar heeft geen inhoud
- 205; (Reset Content) Het opvragen van de pagina is gelukt en de server is klaar om de variabelen te schonen
- 206; (Partial Content)
ReadyState kent de waarde
- 0 = uninitialized
- 1 = loading
- 2 = loaded
- 3 = interactive
- 4 = complete
|
