AJAX –> Asynchroon JavaScript And XML

AJAX was voor mij altijd een wat troebele techniek, nuttig, maar ingewikkeld. Vele boeken over dit onderwerp maakten het mysterie groter zonder de essentie te verklaren.

Hier ga ik proberen om een eenvoudige uitleg te geven over het gebruik van AJAX voor Web-applicaties.

Doel: ververs/verander een deel van je pagina zonder dat je de hele pagina moet inladen.

code

function AJAXFunctie()

{

xmlhttp=new XMLHttpRequest();

setTimeout(function() {xhttp.abort() },40000);

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“naam”).value=xmlhttp.responseText;

}

}

xmlhttp.open(“GET”,”gemeenteNaam.php?p=”+postcode,true);

xmlhttp.send();

}

HOE WERKT HET


xmlhttp=new XMLHttpRequest();

• Het
XMLHttpRequest object
wordt gebruikt om data uit te wisselen “achter de schermen”

• Dit
maakt het mogelijk om slechts een deel van een pagina aan te passen i.p.v. de
hele pagina terug in te laden

à
xmlhttp.open(“Method”, “URL”,Async);

• Method

– GET

– POST

• URL

– Locatie
op de server

• Async

– True à
Asynchroon

– False
à
synchroon

_ xmlhttp.send(string);

• Verstuurt
het request naar de server

• String
à enkel bij method
“POST”

xmlhttp.open(“GET“,”gemeenteNaam.php?
p=12&a=13”,true);

xmlhttp.send();

xmlhttp.open(“POST“,”gemeenteNaam.php”,true);

xmlhttp.setRequestHeader(“Content-type”,”application/ x-www-form-urlencoded”);

xmlhttp.send(“p=12&a=13”);

à
document.getElementById(“info”).innerHTML=xmlhttp.responseText

responseText

– “response
data” als een string

responseXML

– “response
data” als een XML geformateerde data

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4
&& xmlhttp.status==200)

{

document.getElementById(“myDiv”).innerHTML=

xmlhttp.responseText;

}

}

à
onreadystatechange

• We
willen een actie uitvoeren op basis van het antwoord van de server

• Het
onreadystatechange event is triggered elke keer de readyState veranderd

• Het
readyState property geeft de status van thet XMLHttpRequest.

readyState

0: request not initialized

1: server connection established

2: request received

3: processing request

4: request finished and response
is ready

status

200:
“OK”

404: Page not
found