Mida teeb Ajax?

SISSEJUHATUS

Ajax tehnoloogia on huvipakkuv kõigile, kes tegelevad või plaanivad tegeleda aktiivsemalt veebipõhiste infosüsteemide arendamise ja juurutamisega. Valisin selle tema, sest olen ise juba pikemat aega tegelenud internetilehekülgede loomisega ja Ajax’i õppimine tõstis minu oskused uuele tasemele. Teema on hetkel aktuaalne, sest niinimetatud Web2.0 tulekuga seostatakse tihti just Ajax’t. Järgevalt püüan anda ülevaate, millega on täpsemalt tegu ning kuidas see tehnoloogia võib muuta tulevaste veebirakenduste nägu ja funktsionaalsust.

MIS ON AJAX

Sõna „AJAX” on tuletatav ingliskeelse fraasi „Asynchronous JavaScript And XML” esitähtedest ja ei märgigi ühte konkreetset tehnoloogiat, vaid viisi, kuidas tervet gruppi olemasolevaid lahendusi veebi arendamiseks kasutada. Nendeks tehnoloogiateks on:

  • (X)HTML ja CSS sisu esitamiseks ja disainimiseks
  • DOM (Document Object Model) genereeritud sisu lisamiseks ja muutmiseks
  • JavaScript skriptikeel serverile päringute tegemiseks ja veebirakenduse sisu uuendamiseks
  • XMLHttpRequest objekt reaalajas serveriga info vahetamiseks
  • XML või JSON formaat serveriga andmete vahetamise meediumina

Ajax tehnoloogia määratlemisel ongi põhiline tunnus XMLHttpRequest objekti kasutamine, mis võimaldab kõikides tänapäevastes brauserites teha reaalajas päringuid serverile ja sellest andmeid tagasi saada. Selle asemel on võimalik kasutada ka teisi võimalusi nagu näiteks peidetud IFRAME ja dünaamiliselt genereeritud SCRIPT elemente, kuid parem ja ka lihtsam on kasutada selleks spetsiaalselt mõeldud XMLHttpRequest objekti võimalusi, sest viimases on juba eos lahendatud mitmed probleemid, mida teisi lahendusi kimbutavad nagu näiteks korralik veahaldustugi.

ÕIGUSTUS AJAX TEHNOLOOGIA KASUTAMISELE

Veebi on algusaegadest saati vaevanud tema tehnoloogiast tulenev vajadus iga kasutajapoolse liigutuse järel kogu lehekülg serveris uuesti genereerida ja eemal asuvasse kasutaja brauserisse saata. Tulemuseks on võrdlemisi aeglane ja „hakkiv” kogemus, mille puhul peab kasutaja iga interaktsiooni järel ootama, kuni server uue sisu genereerib ja tagasi brauserisse saadab, mida saadab muu seas tülikas ekraani „vilkumine”. Näiteks on seni olnud võrdlemisi keeruline realiseerida failipuu kuvamise sarnaseid ülesandeid – selleks tuli kas kogu puu ette genereerida ja siis skriptikeele abil puud laiendades seni peidetud osa kuvada, mis võib suure puu puhul olla koormav serverile, või siis iga laiendamise/kitsendamise jaoks kogu leht uuesti laadida, mis on kasutajale tülikas ja ebaintuitiivne. Samuti on selline olukord arendajale keeruline, sest alati tuleb eelnev rakenduse seisund taastada – näiteks otsinguvormi sisestatud valikute taaskuvamine. Ajax tehnoloogia eesmärk ongi leida sellistele probleemidele lahendus, et ka veebirakendused käituksid intuitiivselt ja interaktiivselt, sarnaselt tavalistele kasutaja arvutis jooksvatele programmidele, kus andmed ja nende vaated on üksteisega tihedalt seotud.

KUIDAS AJAX TÖÖTAB

Tehnoloogia tööpõhimõte on teoorias ja ka rakendustes küllaltki lihtne. Kõigepealt genereerib server algse veebilehe koos disaini ja enamasti ka algse sisuga - nagu tavaliselt – ja saadab selle kasutaja brauserisse. Vahe ilmneb alles siis, kui kasutaja klikib mõnele lingile või kasutab mistahes lehekülje funktsionaalsust, mis eeldab andmevahetust serveriga. Selle asemel, et saata HTTP päring serverile, mis selle põhjal midagi teeb ja seejärel uuesti kogu lehekülje geneerib ja kasutajale tagasi saadab, luuakse skriptikeele, enamasti JavaScript abil väike päringuobjekt, mis saadetakse serverile, kasutades XMLHttpRequest objekti. Selle alusel server teeb midagi – näiteks lisab uue kirje külalisraamatusse ja saadab arendaja valitud formaadis, enamasti XML või JSON vormingus vastuse tagasi brauserile. Vastuses võib olla näiteks teade, et kirje on edukalt lisatud ja märge brauseripoolsele skriptikeeles süsteemile, et see võib uue kirje teiste järele lisada, või hoopis veateade, et sisestatud meiliaadress pole sobiv ja kasutaja peaks selle üle vaatama, kusjuures programmeerija ei pea juba sisestatud välju taastama nagu tavaliselt sellises situatsioonis. Et serveri vastus sisaldab vaid vajalikke andmeid ja enam mitte teisi elemente ja disaini, siis on sellised infovahetused reeglina oluliselt kiiremad kui kogu lehe uuesti laadimine. XML formaadi tugevus andmevahetuses on, et see on inimesele kergesti loetav ja brauseris ka küllaltki lihtsasti töödeldav. JSON ehk JavaScript Object Notation on oma olemuselt lihtsalt serialiseeritud JavaScript’i objekt, mis on serveripoolsetes süsteemides võrdlemisi kergesti antud keele andmestruktuuridest genereeritav ega sisalda mingit lisainformatsiooni, mistõttu kasutab veelgi väiksemat andmemahtu ning et et tegu on serialiseeritud objektiga, siis on võimalik brauseris sellest väga kergesti JavaScript’i objekti tagasi saada, nii et programmeerija pääseb XML’i parsimisest. Kokkuvõtvalt on AJAX’i tehnoloogiat kasutava veebirakenduse tööskeem laias laastus järgmine:

  1. Kasutaja tuleb esmakordselt lehele
  • Serveris tehakse vajalikud algväärtustesed, näiteks luuakse uus sessioon
  • Server geneerib algse lehe väljanägemise ja sisu, milles sisaldub muu seas vajalikud skriptid Ajax päringute tegemiseks ja nende vastustest arusaamiseks
  • Leht saadetakse üle võrgu kasutaja brauserisse, kus see kuvatakse ja algatatakse XmlHttpRequest objekt ja muu vajalik kliendipoolne skriptikeeles süsteem
  • Kui kasutaja brauseris on JavaScript keelatud või see ei toeta XMLHttpRequest võimalusi, siis on see avastatav ja võimalusel genereeritakse kasutajale tavalisi lahendusi kasutav veehileht või vähemalt teade, kuidas probleemist üle saada JavaScript’i lubamise või brauseri uuendamisega
  1. Kasutaja vajutab mingit linki või kasutab mõnd muud serveriga suhtlust eeldavat funktsionaalsust
  • Kutsutakse välja skriptikeele programmijupp, mis koostab ja saadab serverile arusaadavas formaadis tegevust kirjeldava päringu, lisaks võidakse kusagil kuvada lehe laadimist tähistav disainielement, et kasutajale oleks selge, et tema päringuga tegeletakse
  • Server püüab päringut mõista, teeb selle alusel midagi ning saadab XML või JSON formaadis ning vaid vajalikke muutusi hõlmavaid andmeid sisaldava vastuse
    • Kui ühendus ebaõnnestus või päring võtab liiga kaua aega – näiteks katkes vahepeal ühendus kliendi ja serveri vahel – siis XMLHttpRequest võimaldab seda tuvastada ja on võimalik kas antud päring uuesti saata või kasutajale teatada, et midagi läks valesti
  • Klientprogramm kasutaja brauseris saab vastuse ja teeb selle endale arusaadavaks parsides selleks XML vormingus ülestähenduse või muutes teksti kujul JavaScript’i JSON objekti uuesti kasutatavaks objektiks
  • Klientprogramm teeb vajalikud muudatused lehekülje sisus ja väljanägemises, kasutades selleks DOM võimalusi ja jääb ootama uut päringut

TEHNOLOOGIA PLUSSID

  • Võimaldab luua senisest interaktiivsemaid ja intuitiivsemaid veebirakendusi, mis sarnanevad rohkem harjumuspärastele täielikult kasutaja arvutis jooksvatele programmidele
  • Sisu laadimine on kiirem, sest vahetatakse vaid otseseid andmeid, mitte disaini ja brauseril pole tarvidust iga liigutuse järel kogu lehte uuesti renderdada
  • Väheneb serveri ja kasutajate vahel vahetatav andmehulk, mis vähendab koormust serveri ja kliendi internetiühendusele ja nõnda internetile tervikuna
  • Vähendab serveri koormust, sest iga kord ei tule genereerida kogu lehe kuvamiseks vajalikku, see võimaldab ühes serveril serveerida ka rohkem inimesi ja nõnda on kogu leht kõigile kasutajatele veelgi kiirem

TEHNOLOOGIA MIINUSED

  • Et lehte ei laeta iga kord reaalselt uuesti, siis lakkab toimimast harjumuspärane Back nupp, mis ei vii enam tagasi eelmisele lehe staatusele, vaid lehele, mis kogu keskkonnale viitas. Lahendusena saab kasutada dünaamilist lehe ankru (aadressis #-järel asuv osa) muutmist, mille järgi on võimalik lehe staatus taastada, ent see on küllaltki töömahukas ja mitte ideaalne lahendus
  • Et linkidele klikkides ei muudeta tavapäraselt lehe aadressi, siis on raskendatud mingi alalehe lemmikutesse lisamine, sest nõnda saab lisada vaid keskkonna avalehte. Võimalikuks lahenduseks on jällegi ankru dünaamiline muutmine
  • Et aeglase ühenduse puhul võib laadimine ikkagi omajagu aega võtta ja info uuendamisega ei kaasne tavapärane lehe „vilkumine”, siis võib kasutajal jääda mulje, et tema päringuga ei võetudki midagi ette. Selle vältimiseks on soovitav kuvada nähtaval kohal lehekülje laadimist tähistav graafikaelement
  • Otsingumootorid ei käivita Ajax tehnoloogiat kasutaval lehel navigeerimiseks vajalikku JavaScripti, mistõttu on sellised lingid nende jaoks nähtamatud, mis toob kaasa kehva esinemise otsingutulemustes. Probleemi mingil määral vältimiseks tuleks kusagil otsingumootoritele kättesaadavas kohas kuvada sisukaart tavaliste linkidena
  • Ajax’il põhinevad veebilehed sõltuvad tugevasti JavaScript’ist ja DOM mudelist, mis toimivad erinevates brauserites kohati erinevalt ja nõnda on vajadus kogu funktsionaalsust kõigis levinumates brauserites hoolega testida ja osa koodi käivitada erinevalt vastavalt mis brauserit hetkel kasutatakse

KOKKUVÕTE

Sellega on lõppenud minu ülevaade ühest võimalikust järgmise generatsiooni veebi tehnoloogiast, loodetavasti oli see huvitav ja äratas lugejais sügavamat huvi selle õppimise ja oma rakendustes kasutamise vastu.

KASUTATUD KIRJANDUS

  1. Ingliskeelne Wikipedia - http://en.wikipedia.org/wiki/AJAX
  2. Ajax.org veebileht - http://ajax.org
  3. Ajaxmatters.com - http://www.ajaxmatters.com

ROHKEM INFOT

Ajax tehnoloogi ja koodinäidetega saab lähemalt tutvuda näiteks http://ajax.org veebilehel või teistel minu kasutatud kirjanduse veebilehtedel. Alustada soovitan näiteks aadressil http://www.w3schools.com/AJAX/default.asp

edit