AJAX – puust ja punaseks

Üsna palju räägitakse hetkel mõistest nimega AJAX. Tuuakse ilusti välja, et mis lehed seda tehnoloogiat kasutavad, mis definitsioon (Asünkroonne JavaScript ja XML) mõiste taga peitub ning muust taolisest. Üsna vähe aga on kijras sellest, et kuidas lõpuks asi üldse töötab. Niisiis parandame selle vea ja ehitame lihtsa mikrolinki kasutava JavaScripti rakenduse.

Mikrolink on Ajaxi versioon traditsioonilisest hüperlingist, kus selle asemel, et lehelt ära navigeerida, laetakse lingile vajutades vastus taustal ja sisestatakse see otse vanale lehele endale.

Käesolevas näites saab selleks olema tähekese pilt, mis on kas tühi (ainult raam) või täis (seest värvitud). Kui vajutada tühjale tähekesele, siis saadetakse päring serverile, server muudab hetke oleku ning saadab selle oleku brauserile tagasi, misjärel skript muudab siis tähekese pilti vastavalt sellele uuele olekule. Ei midagi keerulist.

Meie aplikatsioonis hakkab see välja nägema nii, et serveri poole peal on fail nimega “taheke.txt” mis sisaldab ainult ühte sümbolit. Võimalusi on kaks “0” või “1”. Kui failis on “0” siis on täheke tühi star_a ja kui on “1” siis on täheke värvitud star_b. Ning seda väärtust muudab siis PHP skript.

Probleemiks muidugi, et kui mitu inimest korraga seda tähekest enda brauseris klikivad, siis pole tulemus päris see, mida oodatakse, kuna identifikaatoreid on ainult üks. Kuid antud rakendus polegi koormuseks loodud, vaid ainult näiteks. Reaalses aplikatsioonis oleks mõttekam kasutada andmebaasi, kus iga kasutaja kohta on eraldi tähekese staatus või midagi sellist – kõik on koodikirjutaja enda teha.

Esiteks on siis vaja mainitud serveripoolset skripti faili muutmiseks, pikemalt sellel peatuma ei hakkaks, kuna põhifookus on JavaScripti osal ning allpool olevas pakis on näitefail ilusti olemas. Niipalju vaid, et skript kasutab siis ühte GET muutujat nimega $_GET[“vaheta”] – kui see on määratud, siis skript muudab failis mainitud numbri väärtust ja väljastab saadud tulemuse, kui aga too muutuja on seadmata, siis väljastab lihtsalt olemasoleva numbri (see on vajalik lehe laadimise ajaks, et saada ette õige seis).

Järgmiseks oleks vaja mingit teeki XMLHttpRequest välja kutsumise jaoks, kuna see on ise üsna keeruline töötavalt rakendada. Minule meeldib näiteks Ajaxify lehelt pärit AjaxCaller.js, mis on meeldivalt väike ja lubab lihtsalt erinevaid kutsungeid rakendada (get, post, plain text, xml jne). Sellest AjaxCaller.js-ist kasutame käsku ajaxCaller.get(), mis tellib läbi serveripoolse skripti (GET päring) välja määratud funktsiooni, plain text väljundiga. Serveripoolne skript annab siis vastuseks kas “0”, “1” või “error”. Viimane tekib, kui on mingi probleem failiga.

Järgmiseks teeme enda js faili. Seal on kolm funktsiooni: init_taheke(), mis laetakse lehe laadimisel body onload meetodi kaudu ja mis kutsub välja funktsiooni tahekeFunc(). Viimatimainitu on siis funktsioon, mis vahetab ära tähekese pildi vastavalt saadud vastusele serveripoolselt skriptilt. init_taheke() muutujat seisundi vahetamiseks kaasa ei anna ja seega väljastatakse tahekeFunc()-le hetke seis.

function init_taheke(){
    ajaxCaller.get("taheke.php", '', tahekeFunc, false,"");  
}

function vahetaTaheke(){
    ajaxCaller.get("taheke.php", {vaheta: 1}, tahekeFunc, false,"");
}

function tahekeFunc(text, headers, callingContext){
    var hetkel = parseInt(text);
    if(hetkel)
         document.getElementById(pildiID).src=pildiURL_b;
    else
         document.getElementById(pildiID).src=pildiURL_a;
}

Vahemärkuseks selline asi, et tegelikult läheb init_taheke() puhul skriptile küll üks muutuja kaasa, nimelt “juhuslik”. See kujutab endast javascripti poolt genereeritud juhuslikku arvu ning on vajalik IE cache tõttu. IE nimelt tahab taolise GET päringu puhul võtta vastust serveri poole pöördumata cachest. GET puhul pannakse muutujad ju URL-i otsa a la http://www.server.com/?muutuja1=a&muutuja2=b. Ja kui see on sama, mis eelmise päringu aeg, siis IE seda ei tunnista. Kui nüüd panna sinna ritta otsa see juhuslik muutuja &juhuslik=87237, siis on tegu juba IE jaoks erineva URL-iga ning seekord võetakse vastus serverilt.

Kolmandaks funktsiooniks on vahetaTaheke() ja nagu nimi ütleb, tellib tema serverilt tähekese seisundi vahetuse. Põhimõtteliselt on tegu täpselt sama funktsiooniga, mis init_taheke() – selle vahega, et nüüd antakse kaasa ka muutuja $_GET[“vaheta”].

Seejärel tuleb treida valmis vaid antud raknedusi kasutav HTML leht. Seal peab olema a)headeris sisse lingitud mainitud javascript failid b)pandud paika body onload meetod ning c)lehel olema id=”taheke” märgiga pilt, mis on lingitud aadressile javascript:vahetaTaheke(); Ja ongi kõik.

<html>
 <head>
  <script type="text/javascript" src="util.js" />
  <script type="text/javascript" src="ajaxCaller.js" />
  <script type="text/javascript" src="taheke.js" />
 </head>

 <body onload="init_taheke();">

  <a href="javascript:vahetaTaheke();">
  <img id="taheke" src="star_a.gif" />
  </a>

 </body>
</html>

Tulemust võib katsetada siin.

Alla võib laadida kogu paketi (paki ainult oma serveris lahti ja võid kohe käima panna) siit.

Loodan, et sellest jutust oli nüüd vähegi kasu asja selgitamisel ja demüstifitseerimisel. Tegelikult on asi üsnagi lihtne ning kergesti rakendatav ja ma ei näe üldse probleemi, et miks kõik ei võiks selliseid lisavõimalusi oma äranägemise järgi kasutada.

Äkki oli abi.

4 thoughts on “AJAX – puust ja punaseks”

  1. Igati tubli õpetuse. Just sobiv neile, kes on kuulnud buzzwordi AJAX ning tahavad teada saada, mis selle taga tegelikult on.

Kommenteerimine on suletud.