Ajax is niet alleen een voetbal club maar ook een techniek om websites mee te (helpen) ontwikkelen. Misschien heb je er al eens over gehoord?Waar de herrie over is? Eigenlijk is Ajax al zo oud als Javascript. Het draait allemaal om één object in die programmeertaal. Ik leg in onderstaande artikel uit hoe het in den beginnne in elkaar zit.

Het maken van een Ajax based server request is niet zo moeilijk als het misschien lijkt. Aangezien het allemaal om één object draait waar je wat properties van in moet stellen is het allemaal best overzichtelijk. De structuur ervan is vrij makkelijk te begrijpen en toe te passen. Je moet gewoon een instantie maken van een XMLHttpRequest type, valideren dat deze aangemaakt is, aangeven waar het naar moet verwijzen, en waar het resultaat terrecht moet komen. En dan zorgen dat de code gestart wordt.

Om Ajax te kunnen begrijpen moeten we weten hoe een http protocol werkt.

Dit is hoe een browser een verzoek (Request) doet en een antwoord terugkrijgt van een webserver.

Er zijn dan verschillende acties die een webserver kan doen. En zal een code teruggeven.

Hieronder een paar van de belangrijkste (er zijn er vrij veel)

Er zijn verschillende verzoek methoden beschikbaar. GET en POST zullen het meest bekend voorkomen. Maar er zijn er dus meer.

Nu we een idee hebben hoe een request verstuurd word van een browser naar een server, en hoe een resopnse terugkomt, kunnen we makkelijker begrijpen hoe een XMLHttpRequest werkt. Het werkt ongeveer hetzelfde, alleen doet het op de achtergrond zonder een pagina te verversen.

Ajax is alleen maar een concept dat beschreven word om de interactie tussen een client-side XMLHttpRequest object en een server-based script.

Om een request te doen aan een server doormiddel van Ajax, zal een object aangemaakt moeten worden, die voor verschillende zaken gebruikt kan worden.

Belangrijk om te weten is dat het object op verschillende manieren aangemaakt word in verschillende browers. In Internet Explorer gebeurd dit in de vorm van een ActiveX object. Firefox en Safari gebruiken een basic javascript object. Dit is dus nogal belangrijk om browser onafhankelijke code te maken.

Als een instantie van een XMLHttpRequest object is aangemaakt, zijn er een aantal methoden beschikbaar voor de gebruiker. Afhankelijk van hoe je het object wil gebruiken, zal de ene methode belangrijker zijn dan de andere.

Abort ()

Hier kan je een timer aanhangen voor het geval het te lang duurt.

getAllResponseHeaders()

We kunnen dit gebruiken om alle informatie te verkrijgen van alle http headers die er verstuurd worden.

getResponseHeader(“headername”)

Op deze manier kan je de waarde krijgen van een specifiek header deel. De hele header is nogal lang en zo kan je alleen de informatie opvragen die nodig is. Bijvoorbeeld de grote van het bestand :

Call getResponseHeader(“Content-Length”)

Open(“method”,“URL”,“asunc”,“username”,“passw”,)

Deze methode word gebruikt om een connectie te openen naar een bepaald bestand op de server. Hier geef je aan welke methode gebruikt word, (GET of POST), en geef je aan hoe het bestand geopend dient te worden. Onthoudt dat niet alle argumenten noodzakelijk zijn en aangepast kunnen worden naar gelang de situatie.

setRequestHeader(“label”,”value”)

hiermee kan een header een label krijgen, door zowel een label als een waarde mee te geven.

Belangrijk: Kan alleen na de open() methode verstuurd worden.

Send(“content”)

Dit is de methode die daadwerkelijk het request naar de server stuurt. Als de request asynchroon word verstuurd, komt de response gelijk, zo niet dan komt het terug als de response ontvangen is. Optioneel kan er een input string meegestuurd worden als argument, welke handig kan zijn voor het verwerken van formulieren, omdat het de mogelijkheid heeft de waarde van form onderdelen door te geven..

Natuurlijk heeft het object ook properties die ingesteld kunnen worden om goed te kunnen werken. Ze zijn belangrijk als we straks wat geadvanceerde applicatie gaan maken.

Een tabel.

Onreadystatechange

Dit geeft de mogelijkheid om bepaalde blokken code of functies te starten. Het word gebruikt als een eventhandler. Als de status (waar het proces is op welk moment dan ook) veranderd. Bijvoorbeeld: als we een functie hebben die een bepaalde initialisatie doet dan, dan kunnen we main fuinctionaliteit laten draaien als de status naar “complete” veranderd.

Readystate

Deze property geeft een diepe beschrijving van het process van een status van een request. Dit is vooral handig voor error handling en kan belangrijk zijn voor het bepalen wanneer bepaalde acties moeten gebeuren. Er kunnen individuele acties aan gekoppeld worden op bepaalde punten tijdens een request. Bijvoorbeeld kan bepaalde code gestart worden wanneer de readyState loading is, en er mee stoppen als deze op complete komt.

Responsetext

Deze zal terug gegeven worden als een request klaar is, als we een request doen van een script, zal het resultaat van dit script via deze property terugkomen. Met dit in gedachte zullen de meeste scripts gebruik maken van deze property door het in een innerHTML property van een Element te dumpen, zodoende een script of document in een pagina element (bv: DIV) te laden.

ResponseXML

Hetzelfde als responsetext, maar is ideaal als we zeker weten dat de response in XML formaat terug zal komen.

Status

zie tabel.

StatusText

Zie tabel.

Browser onafhankelijk gebruik.

Omdat Internet explorer en andere browsers van een ander “merk” object gebruik maken om met Ajax te kunnen werken zullen we moeten testen met welke browser we te maken hebben. IE maakt gebruik van een ActiveX object, andere browsers als Firefox en Safari maken gebruik van het object van Javascript zelf.

Door gewoon het object proberen aan te maken zal er uiteindelijk een lukken. Onderstaande probeerd ze aan te maken en geeft een messagebox met welke variant gelukt is.

// JavaScript Document

var xmlHttp = false;

function InitializeRequestObject() {

// de moderne IE variant

try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

alert ("Tis IE");}catch(e){

}

// de oudere IE variant

if (!xmlHttp){

try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

alert ("Tis Oudere IE");}catch(e){}

}

// De FF variant

if (!xmlHttp){

try {xmlHttp = new XMLHttpRequest();

alert ("Tis FF");}catch(e){}

} return xmlHttp;

}

We hebben nu een XmlHttpRequest object aangemaakt waar we mee kunnen werken.

We kunnen nu een verzoek doen naar de server. We moeten wel beslissen hoe we het antwoord willen hebben. Dit kan op verschillende manieren. Ook moeten we beslissen of we gebruik willen maken van GET of POST. Als we gebruik maken van Ajax om de informatie van de server te halen, zullen we waarschijnlijk werken met de GET methode. Als we informatie naar de server versturen dan zullen we van POST gebruik maken. GET is namelijk niet gebouwd om grotere brokken informatie te versturen naar de server.

Om een request te kunnen versturen zullen we een aantal vragen moeten beantwoorden. We zullen moeten beslissen naar welke pagina of script we willen connecten. En waar we het resultaat van deze pagina of script in willen laden. Onderstaande functie code die als argument een pagina meekrijgt, en de Div of ander object waar we het resultaat in willen zien.

function makerequest(ServerPage, ToLoadIntoObj){

var obj = document.getElementById(ToLoadIntoObj);

xmlHttp = InitializeRequestObject();

xmlHttp.open("GET", ServerPage);

xmlHttp.onreadystatechange = function(){

if (xmlHttp.readyState == 4 && xmlHttp.status == 200){

obj.innerHTML = xmlHttp.responseText;

}

}