Cursus Ajax : ajax in actie

Eenvoudig voorbeeld: ophalen van een tekstbestand

Klik in het volgende voorbeeld op het woord Ajax en de beschrijving verschijnt in de onderliggende divisie:

Een introductie tot Ajax

De beschrijving bevindt zich in een tekstbestand dat geladen wordt op het ogenblik dat je op het woord Ajax klikt.

Het voorbeeld uitgelegd

Het bestand ajax.txt is een doodeenvoudig tekstbesande en bevat volgende inhoud:

Ajax (Asynchronous Javascript And XML) is een term voor het ontwerp van interactieve webpagina's waarin asynchroon gevraagde gegevens worden opgehaald van de webserver. Daardoor hoeven dergelijke pagina's niet in hun geheel ververst te worden. Zo'n pagina is te vergelijken met een applicatie die in de browser draait. De term is op 18 februari 2005 door Jesse James Garrett gelanceerd en werd door grote spelers als Google en Amazon geadopteerd.

Op het kleine paginaatje puretekst.html vinden we de code om het woord Ajax aanklikbaar te maken:

Een introductie tot <span style="cursor:pointer;color:green" onclick="toonDetails()">Ajax</span>
<div style="border:solid;border-width:1px 0px 1px 0px;width:400px" id="introductie"></div>

In een script-blok vinden we de javascript-functie toonDetails:

function toonDetails()
{
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
      alert ("Browser does not support HTTP Request")
      return
    } 
    var url="ajax.txt"
	url=url+"?sid="+Math.random()


    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
}

Deze functie stockeert een XMLHTTPobject in de variabele xmlHttp met behulp van de functie GetXmlHttpObject, deze functie bespreken we straks.
We bouwen een url naar het tekstbestand op, gevolgd door een willekeurig nummer in de querystring (om caching door de browser te voorkomen).
Wanneer de status van het XMLHTTPobject veranderd zal een functie stateChanged worden aangeroepen (traditionele eventafhandeling), deze functie wordt straks besproken
We openen het XMLHTTP object met de gegeven url
We versturen het HTTP-request naar de server

De functie GetXmlHttpObject

function GetXmlHttpObject(handler)
{ 
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
      objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}

Hier proberen we een XMLHttpRequest-object te construeren, en doen dit cross-browser.

De functie stateChanged

function stateChanged() 
{ 
   if (xmlHttp.readyState==4)
   {
      if(xmlHttp.status == 200)
      { 
         document.getElementById("introductie").innerHTML=xmlHttp.responseText 
      } 
	  else
	  {
	  	alert("Probleem met het request!");
	  }
   }
}

Deze functie wordt uitgevoerd wanneer de readyState van het XMLHttpRequest-object veranderd.

xmlHttp.onreadystatechange=stateChanged

Mogelijke readystates:

0 (uninitialized)
1 (loading)
2 (loaded)
3 (interactive)
4 (complete)

We controleren ook de status van de XMLHttpRequest, is de informatie wel degelijk goed binnengekomen? Deze statuscode is 200 wanneer de server de informatie correct heeft kunnen versturen. (404 = file not found, 500 = interne serverfout, ...).
Doe deze laatste controle niet wanneer je lokaal deze testjes uitvoert (filesysteem ipv http), deze status is nu steeds gelijk aan 0.

Toon gegevens uit XML-bestand.

testfile.xml

<?xml version="1.0" ?>
<root>
    Ik ben een test
</root>

metxml.html

<html>
<head>
	<title>Ajax in actie</title>
<script>
function toonXML()
{
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
      alert ("Browser does not support HTTP Request")
      return
    } 
    var url="testfile.xml"
	url=url+"?sid="+Math.random()


    xmlHttp.onreadystatechange=haalXML 
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
}

function haalXML() 
{ 
   if (xmlHttp.readyState==4)
   {
      if(xmlHttp.status == 200)
      { 
	     var xmldoc = xmlHttp.responseXML;
         var root_node = xmldoc.getElementsByTagName('root').item(0);
         document.getElementById("xmltest").innerHTML = root_node.firstChild.data;
      } 
	  else
	  {
	  	alert("Probleem met het request!");
	  }
   }
}  


function GetXmlHttpObject()
{ 
    var objXMLHttp=null
    if (window.XMLHttpRequest)
    {
       objXMLHttp=new XMLHttpRequest()
    }
    else if (window.ActiveXObject)
    {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
    return objXMLHttp
} 
</script>
</head>

<body>
Toon gegevens uit <span style="cursor:pointer;color:green" onclick="toonXML()">XML</span>-bestand.
<div style="border:solid;border-width:1px 0px 1px 0px;width:400px"id="xmltest"></div>


</body>
</html>

Ajax: Ajax in actie

Basisprincipes

Eenvoudig voorbeeld: ophalen van een tekstbestand

Het voorbeeld uitgelegd

De functie GetXmlHttpObject

De functie stateChanged

Een XML-resultaat inlezen