[AJAX] Introductie

Properties van het XMLHttpRequest object

Het XMLHttpRequest object

Om gebruik te kunnen maken van de AJAX techniek moet er een XMLHttpRequest object zijn aangemaakt. Via dit object kunnen aanvragen verstuurd worden naar de server, maar bevat het ook de data die wordt teruggestuurd van de server. Het object kan op de volgende wijze worden aangemaakt:

var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
}

onreadystatechange property
Nadat het verzoek is verstuurd naar de server, is er een functie nodig die de data ontvangt van de server. De onreadystatechange property bevat de functie die de data (afkomstig van de server) verwerkt. De functie is opgeslagen in de property en wordt automatisch aangeroepen.

Voorbeeldcode:

xmlhttp.onreadystatechange=function()
{
// We are going to write some code here
}

The readyState property
De readyState property houdt de status van het antwoord van de server bij. Elke keer als de staus van de readyState property wijzigt wordt de onreadystatechangefunctie aangeroepen. Onderstaand tabel bevat de mogelijke waarden van de readyState property:

0 - De aanvraag is niet geinitialiseerd
1 - De aanvraag is opgezet
2 - De aanvraag is verzonden
3 - De aanvraag wordt verwerkt
4 - De aanvraag is verwerkt


Onderstaand stukje voorbeeldcode wordt uitgevoerd zodra de aanvraag verwerkt is:

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
// Get data from the server's response
}
}

The responseText property
De data die wordt teruggestuurd vanaf de server kan worden opgevangen met de responseText property. In onderstaand voorbeeldcode wordt de waarde die terug wordt gezonden door de server in een textbox gezet:

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.myForm.myInputBox.value=xmlhttp.responseText;
}
}

Een aanvraag versturen naar de server
Om een verzoek te versturen naar de server wordt gebruik gemaakt van de open() en send() functie.

De open() functie heeft drie parameters:

open(method : string, script : string, asynchroon : bool)

1. method: Get of Post.
2. script dat moet worden uitgevoerd op de server.
3. moet het script asynchroon worden uitgevoerd. Bij true wordt het script asynchroon uitgevoerd. Dit houdt in dat de browser niet blokkeert. Dit is namelijk wel het geval als false wordt meegegeven. De browser wacht op de data die wordt teruggestuurd van de server en tot die tijd wordt de browser geblokkeerd.
   

De send() functie verstuurd de aanvraag naar de server. De code om een aanvraag te versturen naar de server kan er als volgt uitzien:

xmlhttp.open("GET","time.asp?naam=Jan&achternaam=Muis",true);
xmlhttp.send(null);

In dit stukje voorbeeld code wordt gebruikt gemaakt van de GET methode. In de volgende code wordt er een POST aanvraag verstuurd:

xmlhttp.open("POST","time.asp",true);
xmlhttp.send("naam=Jan&achternaam=Muis");

De parameters worden nu verstuurd via de send functie en worden niet meegegeven in de Open functie. In de open functie wordt nu enkel aangegeven welk bestand er moet worden uitgevoerd.