WEB ontwikkeling & design BLOG

WEB ontwikkeling & design BLOG

Waarom ?

Deze blog biedt een platform om informatie te delen over HTML & CSS, JavaScript, PHP, (My)SQL, ... .
Niet alleen voor de cursisten en lesgevers uit de afdeling WEB ontwikkeling & design van het SCVO-ENCORA, Grote Steenweg 226 te Berchem - Antwerpen, maar met en door iedereen die geïnteresseerd is in de ontwikkeling van het internet

AJAX eenvoudiger kan het niet

JavaScriptGeplaatst door Micky 03 jun, 2016 14:52:11
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














  • Reacties(0)//www.webontwikkeling.info/#post15