Rozhodol som sa preto len z malej časti priblížiť prácu s touto technológiou a vyskúšať si na malom príklade, ako to celé funguje. Vytvoríme si jednoduchú webovú stránku, ktorá bude zobrazovať číslo, ktoré sa ukladá do textového súboru na webovom serveri a po stlačené na tlačidlo sa hodnota zväčší a opäť zapíše do toho istého súboru.
K dispozícii máme tieto súbory, ktoré som pripravil ako príklad:
Hlavný súbor: test_ajax.html
<HTML>
<HEAD>
<TITLE>AJAX Example</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<SCRIPT language='JavaScript' src='sarissa.js' type='text/javascript'></SCRIPT>
<SCRIPT language='JavaScript' type='text/javascript'>
function doincrement()
{
// Set up the request
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'test.php', true);
// The callback function
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.all.increment.value = xmlhttp.responseXML.getElementsByTagName('value')[0].firstChild.data;
}
}
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(null);
}
</SCRIPT>
</HEAD>
<BODY>
Value <INPUT type="text" name="increment">
<INPUT type="button" onclick="doincrement();" value="Increment">
</BODY>
</HTML>
Tu je dôležitá funkcia doincrement(), v ktorej je naprogramovaná asynchrónna komunikácia s webovým serverom - spúšťanie súboru test.php. Po spustení funkcie sa vykoná tzv. "call back" - spätne volaná funkcia, ktorá sa vyvolá asynchronne podľa času ukončenia spracovania súboru test.php na webovom serveri.
Voľne stiahnuteľný v javascripte napísaný súbor: sarissa.js Tento súbor obsahuje rozšírenie o pár metód triedy XMLHttpRequest(). Trieda XMLHttpRequest je jadro technológie AJAX, ktorú budeme v našom webe využívať.
Výkonný súbor, ktorý je vyvolávaný užívateľom z klientského PC pomocou objektu xmlhttp: test.php . V tomto súbore je vyvolaná akcia priamo na serveri. Samozrejme, že tu je možné vykonávať ľubovoľnú akciu ako napr. čítanie alebo zápis dát do databáz a podobne. V našom prípade tam len čítame hodnotu premennej "value" zo súboru test.txt, ktorú zväčšujeme po každom volaní súboru pomocou objektu xmlhttp a potom jej zväčšenú hodnotu zapisujeme naspäť do súboru test.txt. Isteže takýto jednoduchý úkon je možné naprogramovať priamo v javascripte nech sa vykonáva priamo u klienta na webovej stránke, ale pre čo najjednoduchšiu ilustráciu som zvolil takýto triviálny príklad.
Súbor test.txt v ktorom sa ukladá naša inkrementovaná hodnota, celé číslo. Stačí všetky tieto súbory prekopírovať do spoločného adresára na webový server a naštartovať stránku test_ajax.html. Po štarte webovej stránky je možné si to vyskúšať na tlačidle "Increment", kde veľmi elegantným spôsobom - jednoduchým klikaním na tlačidlo sa komunikuje s webovým serverom.
Súbory sú uložené v prílohe ajax.zip.
S pozdravom
