AJAX staat voor Asynchronous Javascript And XML. Dit betekent dat met gebruik van javascript en XML, asynchroom ( naast elkaar ) pagina’s opgevraagd kunnen worden. Een groot voordeel hiervan is dat je niet telkens de hele content van je pagina hoeft te vernieuwen, maar doelgericht dingen kunt vernieuwen. In dit voorbeeld wordt javascript gebruikt om een PHP pagina aan te roepen, die vervolgens een output geeft. De output van het PHP bestand wordt dan weer door javascript in de webpagina gezet.
In Javascript bestaat een object, genaamd XMLHttpRequest voor Mozilla en ActiveXObject voor MSIE. AJAX is volledig gebaseerd op dit object.
De code die je altijd nodig hebt als je AJAX wilt gebruiken volgt hieronder. Je kunt prima gebruik maken van AJAX zonder onderstaande code te begrijpen en daarom zal ik deze ook niet verder toelichten.
ajax.js:
var xmlHttp;
function GetXmlHttpObject( handler ) {
var objXmlHttp = null;
if (navigator.userAgent.indexOf("Opera") >= 0) {
alert ("Opera is not supported i guess... use FF");
return;
}
if (navigator.userAgent.indexOf("MSIE") >= 0) {
var strName = "Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5") >= 0) {
strName = "Microsoft.XMLHTTP";
}
try {
objXmlHttp = new ActiveXObject(strName)
objXmlHttp.onreadystatechange = handler;
return objXmlHttp;
} catch(e) {
alert("Error. Scripting for ActiveX might be disabled");
return;
}
}
if (navigator.userAgent.indexOf("Mozilla") >= 0 ) {
Ik raad je aan om bovenstaande code op te slaan in bijvoorbeeld ajax.js, aangezien dit de basis is van elke AJAX applicatie.
En nu?
Nu we de basis hebben van AJAX, kunnen we het dan ook daadwerkelijk gaan gebruiken.
Hieronder volgt een simpele HTML pagina waarin ajax.js is opgenomen en nog een tweetal javascript functies. De eerste functie is getLastname()’. De tweede functie genaamd ‘changeLastname()’ wordt gebruikt om de text die in myLastname.php ge-output wordt, op te vangen. Deze functie kun je elke naam geven die je wenst, zolang je in de regel:
xmlHttp = GetXmlHttpObject( changeLastname );
maar de naam van de functie die jij gekozen hebt meegeeft. Deze functie wordt aangeroepen zodra de AJAX request klaar is, en bevat dan de XML of plain tekst response van onze php pagina.
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Standaard Titel - Mijn eerste AJAX app =)</title>
<script type = "text/javascript" src = "ajax.js"></script>
<script type = "text/javascript">
function getLastname() {
//De echte ajax request
//dit is de url waar de request heen gaat. In ons geval heet het php bestand myLastname.php
//de Math.random() gebruik ik om te zorgen dat de url niet stiekem gecached wordt, en heeft verder geen cruciale functionaliteit.
var url = "myLastname.php?qrnd=" + Math.random() + '&sFirstname=' + document.getElementById('sFirstname').value;
//maak een nieuw AJAX object aan om de request te maken. De code uit ajax.js wordt hier gebruikt om een nieuwe object aan te maken
xmlHttp = GetXmlHttpObject( changeLastname );
//open een verbinding met als method ‘GET’ naar de url ‘url’. true betekent dat requests tegelijkertijd plaats kunnen vinden, en dit is bijna altijd wat je wenst als je gebruik maakt van AJAX.
xmlHttp.open("GET", url , true);
//bij een GET request moet je ‘null’ oversturen om de verbinding daadwerkelijk te maken, omdat er verder geen gegevens verstuurd worden
xmlHttp.send( null );
}
//de functie die aangeroepen wordt wanneer de ajax request klaar is
function changeLastname() {
//kijk of de request klaar is, readyState 4 == complete
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
//bekijk of de status van het object 200/OK is, wat betekent dat de request goed is gegaan ( html header's )
if ( xmlHttp.status == 200 ) {
//zet de response text van het php bestand in de span met id ‘sLastname’
document.getElementById('sLastname').innerHTML = xmlHttp.responseText;
//zoals je ziet wordt er hier nergens gebruik gemaakt van XML, maar van plain text
//zou je de php pagina zo opbouwen dat hij XML output, kan je xmlHttp.responseXML gebruiken.
//laat zien wat er fout gegaan is, als er iets fout gegaan is
} else alert ( xmlHttp.statusText );
}
}
</script>
</head>
<body>
<strong>Voer je voornaam in:</strong>
<br />
<input type = "text" id = "sFirstname" /><a href = "#" onclick = "getLastname()">Wat is mijn achternaam?</a>
<br /><br />
<strong>Je achternaam is:</strong>
<br />
<span id = "sLastname"> </span>
</body>
</html>
Dat was de code voor de HTML pagina en de javascript functie’s.
Nu de PHP pagina.
myLastname.php
<?php
#bekijk of de GET variabele sFirstname gezet is
if ( isset ( $_GET['sFirstname'] ) && ! empty ( $_GET['sFirstname'] ) ) {
#switch
Switch ( $_GET['sFirstname'] ) {
case 'naamA';
echo 'achternaamA';
break;
case 'naamB';
echo 'achternaamB';
break;
case 'naamC';
echo 'achternaamC';
break;
default:
echo 'Je achternaam is niet bekend';
}
} else echo 'Je moet wel een voornaam invullen';
?>
Ik ga ervan uit dat je een beetje PHP kent, en dan zal bovenstaande php code niet vreemd voor je zijn. Dit bestand slaan we op als myLastname.php
Mogelijkheden
De mogelijkheden van AJAX reiken natuurlijk veel verder dan dit simpele voorbeeld, je kunt met PHP immers een hoop doen. Deze inleiding AJAX is vooral bedoeld voor mensen die de link tussen PHP en javascript voorheen niet konden leggen.
Bestanden
Mocht je copy/pasten te moeilijk vinden ( lees: te lui zijn voor ), dan zijn de bovenstaande bestanden ook te downloaden:
(Log in om link te zien!)
