AJAX

Home / Programmeren / Webapp / Werken met ajax

De hype van het moment is het gebruik van AJAX. AJAX staat voor Asynchronous Javascript And XML. Met deze techniek kun je informatie opvragen van andere webpagina's zonder dat de gebruiker de pagina opnieuw hoeft te laden. Het komt erop neer dat je (voor de gebruiker) supersnel databases kunt raadplegen.

Misschien zijn de beste voorbeelden wel de on-line routeplanners en Google Earth en dergelijke. Vroeger moest je altijd op een pijltje klikken om een stukje op te schuiven. Dat duurt lang, omdat de hele pagina opnieuw geladen moet worden. Met AJAX echter, wordt op het moment dat jij sleept de data opgehaald. Je kunt gewoon doorgaan met slepen, terwijl er data binnenkomt en nieuwe data wordt opgehaald. Dat werkt veel sneller dan telkens te moeten wachten tot alle data er is.

Daarnaast kan het voor sommige situaties nodig zijn. Misschien heb je het wel eens gezien op sommige pagina's (bijvoorbeeld de Engelstalige variant van Google) dat als je een woord half intypt er een aantal suggesties tevoorschijn komen. Als de gebruiker een letter intypt wil hij niet wachten tot de pagina opnieuw geladen is, hij wil meteen door typen. Dit kan niet met gewoon Javascript, omdat je een database moet raadplegen. Dat kun je veel beter met bijvoorbeeld PHP doen. Met AJAX kun je de kracht van talen zoals PHP en Javascript kunt bundelen.

Een voorbeeld

Via het zoekvak hieronder kun je in mijn woordenboek zoeken. Let goed op wat er gebeurd!

Zoals je ziet geeft dit een effect dat niet met Javascript of PHP alleen te bereiken is. (Technisch gezien kan het wel, maar het is niet makkelijk)

Aan de slag met AJAX!

Ok, nu we hebben laten zien wat de kracht van AJAX is kunnen we ermee aan de slag. Om hiermee te kunnen werken is het balangrijk om een server-sided scripttaal te kennen, zoals PHP, ASP, JSP of Ruby. Omdat we op ICER.nl werken met PHP zal ik deze gebruiken.

Het PHP script

In dit voorbeeld laten we het PHP-script een lijst met namen doorzoeken en bekijken welke naam overeenkomt met datgene wat al ingetypt is. Dit script ziet er zo uit:

<?php
$namenlijst=array("Jan","Piet","Klaas","Kees","Joost");
foreach($namenlijst as $naam){
if(substr($naam,0,strlen($_GET['naam']))==$_GET['naam']){
$mogelijkheden[]=$naam;
}
}

if(isset($mogelijkheden) AND count($mogelijkheden)==1){
echo $mogelijkheden[0];
}

?>

  1. $namenlijst=array(.....); maakt een array aan met een aantal namen
  2. Daarna begint een foreach-lus die de $namenlijst-array doorwerkt en telkens de actuele waarde in de variabele naam stopt.
  3. Dan controleert de if of het ingevoerde stukje overeenkomt met de huidige $naam uit de $namenlijst. Zo ja, dan stopt hij de naam in de array $mogelijkheden
  4. Als er 1 mogelijkheid is wordt deze weergegeven

Ok, hopelijk was dat nog te volgen. Dit PHP script krijgt bij het oproepen 1 variabele aangevoerd ($_GET['naam']) en als er wordt niets of een naam geantwoord.

De HTML en de Javascript

Ok, het PHP-script is klaar, nu de rest. We moeten een tekstinvoerveld hebben, een div-tag om gegevens uit te voeren en een Javascriptje die het PHP script aanroept. We beginnen met het stukje HTML:

<input type="text" onkeyup="naam_zoeken(this.value)" />
<div id="tekstuitvoer"></div>

Dan nu het moeilijkste: de Javascript. Bekijk de volgende code:

<script type="text/javascript">

var xmlHttp;
try { xmlHttp=new XMLHttpRequest(); } catch (e) {
try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {
try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {
alert("Your browser does not support AJAX!");
}}}


function naam_zoeken(zoek){
xmlHttp.onreadystatechange=status_wissel;
xmlHttp.open("GET","naamzoeken.php?naam="+zoek,true);
xmlHttp.send(null);
}

function status_wissel(){
if(xmlHttp.readyState==4){
document.getElementById('tekstuitvoer').innerHTML=xmlHttp.responseText;
}
}

</script>

  1. Als eerste zie je een blok met een aatnal try{ }catch{ } blokken. Deze zijn nodig om het xmlHttp object te maken. Het probleem is dat dit object in elke browser XMLHttpRequest heet, alleen in Internet Explorer heet het ActiveXObject. Dit blokje kun je gewoon overnemen, je hebt het elke keer dat je met AJAX werkt nodig.
  2. Daarna zie je de functie zoeken. Deze functie zorgt ervoor dat de AJAX aanvraag wordt gestart.
    1. Als eerste in de functie staat xmlHttp.onreadystatechange=status_wissel;. Dit zorgt ervoor dat de functie status_wissel() wordt gestart als de status van het xmlHttp-object veranderd. Je leest hier hieronder meer over.
    2. Daaronder staat xmlHttp.open(......); Dit geeft aan het xmlHttp-object door dat er straks een GET-aanvraag wordt gestart naar naamzoeken.php
    3. xmlHttp.send(null); start de aanvraag
  3. Daaronder staat de functie status_wissel. Deze functie wordt gestart als de status van het xmlHttp-object veranderd. Daar gaan we het zo nog over hebben.

Samen wordt dat

Zoals je kunt zien werkt alles prima! Het javascript start bij elke wijziging het PHP-script, en plaatst de uitvoer ervan op het scherm. Natuurlijk zou je dit ook met Javascript kunnen doen, maar je kunt je ook dingen bedenken die niet met javascript kunnen, zoals het ophalen of toevoegen van gegevens aan een database. Daarnaast kun je op deze manier ook real-time monitoring doen (webpagina's met gegevens die elke paar seconden veranderen) of services op het web activeren. (zoals het laten testen van de snelheid van je internetverbinding of het controleren van de bereikbaarheid van een webpagina)

De drie stappen van de aanvraag

Ik ga nu de drie stappen van de aanvraag in het voorbeeld hierboven verder toelichten. We hebben het nu over dit stukje Javascript:

xmlHttp.onreadystatechange=status_wissel;
xmlHttp.open("GET","naamzoeken.php?naam="+zoek,true);
xmlHttp.send(null);

  1. xmlHttp.onreadystatechange=status_wissel; zorgt ervoor dat de functie status_wissel() wordt gestart als de status van het xmlHttp object veranderd. Er zijn 5 statussen, status 0, 1, 2, 3 en 4. Hierbij is nu even alleen status 4 belangrijk, dit betekend dat de aanvraag klaar is en de data beschikbaar is.
  2. xmlHttp.open("GET","naamzoeken.php?naam="+zoek,true); geeft wat voor aanvraag het is (een GET-aanvraag) en waar die aanvraag naartoe gaat. ("naamzoeken.php?naam="+zoek) Je kunt de laatste waarde gewoon true laten, dat is nu niet belangrijk. Je kunt in de pagina-URL, "naamzoeken.php?naam="+zoek, ook $_GET-parameters voor het PHP-script doorgeven.
  3. xmlHttp.send(null); verstuurt de aanvraag

Nu nog de XML

We hebben het tot nu toe alleen gehad over asynchrone javascript, maar nog niet over de bijbehorende XML. Je zult ook snel merken dat je "AJAX" ook prima kunt gebruiken zonder XML, maar vaak is het handig om veel data tegelijkertijd aan te voeren of terug te geven. In dat geval is XML ideaal. Gelukkig zitten er in zowel Javascript als PHP functies om met XML te werken. Aan dit deel van de tutorial wordt nog gewerkt.