AJAX 1

SADRŽAJ:
AJAX-UVOD ........................................................................................................................................... 1
Primer – šablon po kome se šalje Ajax zahtev ........................................................................................... 2
Primer – ajax zahtevom se menja sadržaj taga infodiv ............................................................................. 3

Ajax-uvod
AJAX is a developer's dream, because you can:

 Read data from a web server - after the page has loaded
 Update a web page without reloading the page
 Send data to a web server - in the background

Ajax je bakronim od “Asinhroni JavaScript + XML”. A evo što to zapravo znači: pomoću ajax-a možemo
dinamički kreirati Web stranicu, ali ne moramo da učitavamo ponovo celu stranicu, već možemo da
osvežimo samo neki njen deo. Ideja na kojoj se zasniva Ajax jeste da se stranica na kojoj se odvija Web
aplikacija učita samo jednom, a da se svaka dalja komunikacija sa serverom izvršava asinhrono bez
blokiranja interfejsa (znači pošaljemo zahtev serveru i nastavimo da radimo, a ajax će nas obavestiti kad
rezultati budu raspoloživi) i bez ponovnog učitavanja čitave stranice. Kasnije ćemo objasniti kako to ajax
radi. Zanimljivo je i da ova prvobitna skraćenica više zapravo nije tačna, jer se danas koristi JSON umesto
XML, ali naziv je ipak ostao.
(JSON – java script object notation – je format za prenos podataka. Pomoću njega se podaci iz npr. nekog
objekta prepakuju tako da mogu da se upišu u fajl i tako lako prenose. Podaci se prenose kao parovi u
vitičastim zagradama, a između ključa i vrednosti je dvotačka. Ranije se za ovakvu namenu koristio XML, ali
se sad pokazalo da je JSON lakši, pa se danas uglavnom on koristi)

Korišćenjem AJAX-a poboljšavamo kvalitet interkativnosti sa korisnikom, uz želju da što više liči na desktop
aplikacije (prema brzini interakcije). Ajax nije bez mana, budući da se Ajax stranice dinamički generišu
najveći problem za sajtove je optimizacija za pretraživače. Pretraživači često ne mogu dobro da protumače
sajt, što dovodi do problema u indeksiranju sajtova. Sličan problem postoji i sa alatima za analizu
posećenosti stranica, jer korisnik može ceo dan da provede na jednoj Ajax stranici, a klasični alati za analizu
posećenosti će to protumačiti kao jedno prikazivanje stranice.

Sad ćemo pokazati na primeru kako se koristi ajax. Primer je urađen u čistom JavaScriptu. Isto može da se
uradi i preko Jquery-ja, sintaksa je onda malo drugačija i onda se mora u html ubaciti sledeći red:
http://api.jquery.com/jquery.ajax

Kada se želi neka promena na sajtu, treba napraviti XMLHttpRequest objekat, koji u pozadini šalje zahteve
serveru a prikazujući rezultate kada budu raspoloživi, dok korisnik u međuvremenu može da nastavi sa
radom.
Objekat klase XMLHttpRequest ima naravno svoje osobine i metode. Evo nekih važnih:
Osobine:
 status – true ako je zahtev uspešno izvršen
 readyState – ova osobina pokazuje trenutno stanje zahteva. Može da ima vredosti 0,1,2,3,i,4.
Vrednost 0 ima ako zahtev nije ni poslat. Vrednost 4 ima kad je odgovor od servera došao.
 responseText – ovde se smešta odgovor dobijen od servera
Metode:
 onreadystatechange – ova metoda se izvršava svaki put kada se menja osobina readyState. Obično
se realizuje kao anonimna funkcija. Česta primena: u njoj se ispituje da li je odgovor uspešno stigao,
pa se onda programira šta sa njim želimo da radimo (obično menjamo neki deo stranice)
AJAX 2

 open(“GET”, /*url*/, true) – metod kojim se priprema ajax zahtev. Treba dopisati url i po njemu se
vidi šta zapravo hoćemo od servera
 send() – metod kojim se šalje zahtev serveru, a nakon toga zahtev će čekati odgovor i kad i ako on
uspešno stigne izvršiće odgovarajuće isprogramirane akcije

Primer – šablon po kome se šalje Ajax zahtev

Ovo je neka vrsta šablona za korišćenje Ajax zahteva. Da bi se koristio ajax treba
 napraviti promenljivu i u nju smestiti novi objekt odgovaruće klase - XMLHttpRequest
 definisati onredystatechange metod za tu promenljivu, ona će raditi uvek kada se menja status
zahteva. Ali ovde se sve smešta u if koji je tačan samo kad je odgovor uspešno primljen.A odgovor
je uspešno primljen kad osobina readyState zahteva dobije vrednost 4 (to znači da je odgovor
stigao) i osobina status zahteva ima vrednost 200 (to znači da je zahtev uspešno izvršen)
 zatim treba kreirati, otvoriti zahtev metodom open, u kojoj postoji url na osnovu kojeg se vidi šta
zapravo želimo od servera.
 na kraju šaljemo zahtev metodom send.

napomena:U ovom šablonu se ne vidi, ali odgovor se nalazi u atributu responseText, u ovom slučaju to bi
bilo aj.responseText
AJAX 3

Primer – ajax zahtevom se menja sadržaj taga infodiv

 kreira se promenljiva ajax – po njenom tipu vidimo da je to ajax zahtev
 definišemo onreadyStatechange za tu promenljivu ovako: kad odgovor na zahtev bude uspešno
stigao pristupiće elementu stranice čiji je id=infodiv i promeniće njegov html, tako što će tu staviti
pristigli odgovor
 kreira se zahtev, a po njegovom drugom parametru, a to je url se vidi da želimo fajl čiji je naziv
smešten u promenljivoj name i na to se dodaje ekstenzija .html
 šalje se zahtev metodom send(). Kad odgovor uspešno stigne, a on se nalazi u ajax.responseText
izvršiće se procedura onreadystatechange i ovaj fajl će se smestiti u #infodiv tag

Da bi se u potpunosti razumelo šta radi ovaj kod gore, treba znati i neke stvari koje se ovde ne vide:
 Na stranici se u body najpre nalazi jedan div čiji je id=infodiv i on je prazan.
 Ispod se nalazi combo box sa imenima. Za combobox je stavljeno da je onchange
“cs50info(this.value)” što znači da će svaki put kad se odabere neko ime da se aktivira ova funkcija
gore, a kao argument će se preneti odabrano ime. Inače funkcija cs50info se nalazi u posebnom
ajax.js fajlu, koji je povezan preko
<script src=”js/ajax.js” type=”text/javascript></script>
 Od fajlova još postoje po jedan fajl za svako ime. Naziv fajla je isti kao to ime i ima ekstenziju.html.
U svakom tom fajlu se nalazi deo html koda, u jednom redu ime, u drugom zanimanje, u trećem
slika.

I sad evo kako sve to radi:

 kad se klikne na stavku iz cmbboksa, pozove se funkcija cs50info, kao argument se prenese
odabrano ime.
 Ova funkcija traži sa servera fajl koji se zove kao to ime i ima ekstenziju .html. ( to je definisano u
open metodu
 Kad se taj fajl preuzme on se ugrađuje u div čiji je id=infodiv. – to je definisano funkcijom u
onreadystatechange
 Tada će da se na stranici vide podaci o odabranoj osobi. Ako se odabere neka druga osoba, sve će
se ponovo uraditi i videće se podaci za novu osobu.