Curs 9 AJAX (Asynchronous JavaScript and XML)

Introducere
Receptivitatea unei pagini web este imbunatatita pe baza, a ceea ce in mod traditional
cunoastem ca, tehnici DHTML (dynamic HTML), ce se bazeaza pe ava!cript, D"M #$%
(document ob&ect model), '!! (cascading style sheets) precum si alte tehnologii pentru
crearea paginii web cu care un utilizator poate interactiona (ara a necesita re(resh) *ste in
natura tehnologiei www ca o pagina sa (ie redesenata de (iecare data cand receptioneaza un
raspuns)
#spectul cheie al tehnicii ##+ este de a utiliza un obiect XMLHttpRequest, ce a (ost
inventat de Microso(t) #cest obiect permite programului ava!cript sa trimita o cerere si sa
primeasca un raspuns de la server in asa (el incat sa nu necesite redesenarea intregii pagini)
,tilizari ale ##+-ului.
/alidari ale datelor in timp real. inseamna validari pe server ale datelor dintr-un
(ormular inainte ca acesta sa (ie trimis la server
#utocompletion. o portiune din datele a(late intr-un (ormular pot (i autocompletate
pe baza unor ghida&e o(erite de utilizator
Detalii despre operatiile principale. pe baza unui eveniment la nivelul clientului,
pagina HTML poate o(eri in(ormatii despre datele din pagina
'ontroale so(isticate la nivelul inter(etei utilizator. meniuri sau bare de progres
Reimprospatarea datelor de pe pagina. paginile HTML isi pot e0trage datele de pe
server pentru a le mentine actualizate
1oti(icari de la server. evenimentele de pe server pot crea mesa&e, reimprospatarea
datelor din pagina, redirectarea catre alte pagini, etc)
#tributele obiectului XMLHttpRequest sunt.
onreadystatechange, manipulator de evenimente pentru un eveniment ce se
declanseaza la orice modi(icare a starii
readyState, intregul de stare al obiectului, ce poate lua valorile.
o 0, neinitializat
o 1, se incarca
o 2, incarcat
o 3, interactiv
o 4, complet
responseText, string ce contine datele procesarii, returnat de server
responseXML, obiect compatibil D"M returnat in urma procesarii de catre server
status, codul numeric returnat de server (spre e0. 232 4 5not (ound6, 733 4 5"86)
statusText, mesa&ul te0t ce acompaniaza codul numeric
Metodele obiectului XMLHttpRequest sunt.
abort(, opreste cererea curenta
get!""ResponseHeaders(, returneaza un string ce contine multimea de headere
(etichete si valori)
get!""ResponseHeader(, returneaza un string cu valoare etichetei unui header
open(, ataseaza in(ormatii de cone0iune obiectului) $rima dintre ele este metoda
HTT$ (9*T, $"!T sau $,T)) #l doilea parametru este ,RL-ul destinatie) Restul
parametrilor sunt optionali) Daca parametrul async este true (valoarea de(ault)
procesarea scriptului continua si dupa apelul metodei send(, (ara a astepta raspunsul)
%n cazul in care are valoarea #a"se procesul este oprit pina ce se primeste raspunsul
sau e0pira timpul de prelucrare) $utem (olosi user$a%e si pass&ord pentru
autenti(icarea pe server
send(, trimite cererea impreuna un body optional in (orma de string, sir de octeti sau
obiect D"M +ML
setRequestHeader(, asigneaza o pereche eticheta:valoare headerului pentru a (i
trimisa impreuna cu cererea
/om prezenta, in continuare, modul in care #&a0 actioneaza pentru validarea unui camp al
unui (ormular) #vem urmatoarea diagrama.
$asii sunt urmatorii.
;) un eveniment la nivelul clientului este declansat, spre e0emplu tiparirea in campul de
editare, ce permite ##+
7) o (unctie ava!cript este apelata ca rezultat al evenimentului client) "biectul
XMLHttpRequest este creat, initializat si con(igurat
<) obiectul apeleaza metoda send( ceea ce determina ca interpretorul ava!cript sa
trimita o cerere HTT$ la server
2) cererea este procesata pe server, sa zicem de 'a"(dat(onSer)"et) Metoda de validare
veri(ica corectitudinea te0tului trimis, in cazul nostru veri(ica daca %D-ul userului se
a(la in baza de date
=) componenta de pe server returneaza datele de raspuns, care sunt plasate intr-un bu((er
client indicat de obiectul XMLHttpRequest
>) (unctia callbac? a obiectului XMLHttpRequest este invocata si rezultatul este procesat
@) pagina web este updatata cu rezultatele procesate (olosind D"M ava!cript #$%)
ava!cript poate re(eri orice element din pagina HTML si ii poate modi(ica atributele.
continutul elementului, schimba proprietatile de stil, modi(ica orice elemente
descendente, sterge sau adauga elemente

Java nu e JavaScript
1umele comun provine dintr-o intelegere de mar?eting dintre !un si 1etscape) ava!cript a
(ost cunoscuta si sub numele de Live!cript)
ava!cript nu este utilizata doar pentru pagini web) !pre e0emplu, ava!cript este engine-ul
de rulare pentru 9,%-ul (amiliei de browsere Mozilla)
Toate widget-urile din Mozilla, AireAo0, 'amino sau Lightning sunt implementate (olosind o
combinatie de ava!cript, '!!, RDA si alte tehnologii cuprinse intr-o structura +ML, numita
+,L)
Tehnologia ava.
este compilata pentru o masina virtuala
este puternic indreptata spre veri(icarea tipurilor
este ""$
are suport puternic pentru multi(ire de e0ecutie
Tehnologia ava!cript este interpretata la rulare) %n bowser ava!cript este incarcata si
interpretata atunci cand este incarcata pagina web) %n ava!cript nu se veri(ica tipurile)
ava!cript nu este un limba& ""$) *ste considerat un limba& bazat pe obiect sau bazat pe
prototip, adica putem utiliza orice obiect ca template pentru un nou obiect) $utem de(ini
obiecte noi in codul sursa sau le putem instantia la rulare) Mai mult, obiectul nou poate
imparti proprietatile obiectului original) #plicatiile ava!cript sunt continute intr-un singur
(ir) %nterpretorul ava!cript o(era (unctionalitati asincrone)
##+ este o tehnologie view si controller) ##+ nu va (unctiona pe tele(oane mobile, $D#-
uri sau browsere vechi)
Folosirea functionalitatii AJAX cu JSF
##+ poate (i adaugat unei aplicatii !A in una dintre urmatoarele moduri.
adaugand codul ava!cript aplicatiei
(olosind resursele prede(inite ale bibliotecii ##+ din !A 7
%n cel de-al doilea caz componentele standard ,% ale !A precum butoane, etichete sau te0t
pot (i activate pentru a (olosi (unctionalitatea ##+) $utem, de asemenea, incarca biblioteca
si sa-i utilizam metodele direct din codul bac?ing beanului) %n plus, si componentele custom
pot (i create cu (unctionalitati ##+)
Biblioteca de resurse prede(inite ##+ poate (i (olosita in una dintre urmatoarele modalitati.
prin tag-ul #*a+ax impreuna cu o componenta standard, intr-o aplicatie Aacelet) %n
acest caz (unctionalitatea ##+ este adaugata (ara alt cod sau con(iguratii
prin utilizarea metodei +s#,a+ax,request( din #$%-ul ava!cript, direct in aplicatia
Aacelet) #ceasta metoda (urnizeaza acces direct la metodele ##+ si permite
customizarea controlului la nivelul componentei
Aie urmatorul e0emplu ce ilustreaza (olosirea tagului #*a+ax.
-h*co%%and.utton (d0"submit" )a"ue0"Submit" 1
-#*a+ax e)ent0"click"21
-2h*co%%and.utton1
%n acest e0emplu am activat ##+-ul unei componente prin includerea tagului #*a+ax)
#tributele tag-ului sunt.
d(sab"ed, de tip +a)ax,e",'a"ue3xpress(on de valoare .oo"ean, reprezinta starea
tagului) Daca are valoarea true indica (aptul ca ##+ nu va avea un comportament
ce va (i renderizat) %mplicit este #a"se)
e)ent, de tip +a)ax,e",'a"ue3xpress(on de valoare Str(ng, ce identi(ica tipul de
eveniment la care va reactiona ##+) #cesta trebuie sa (ie unul dintre evenimentele
suportate de componeta) Daca nu este speci(icat atunci evenimentul este act(on
pentru componente !ct(onSource (spre e0emplu co%%and.utton) si )a"ue4hange
pentru 3d(tab"e'a"ueHo"der (spre e0emplu (nputText)) 'ateva dintre alte valori
posibile sunt. c"(c5, 5eyup, %ouseo)er, #ocus sau b"ur)
execute, de tip +a)ax,e",'a"ue3xpress(on de valoare 6b+ect, este o colectie ce
identi(ica o lista de componente ce vor (i e0ecutate pe server) Daca valoarea este un
literal, aceasta trebuie sa (ie Str(ng in care, delimitati de spatiu, vor (i identi(icatorii
(atributul (d) componentelor) Daca valoarea este un 'a"ue3xpress(on atunci aceasta
se re(era la o proprietate ce returneaza o 4o""ect(on sau un Str(ng) Daca nu e
speci(icat, valoarea implicita este 7th(s (componenta in care se a(la tag-ul #*a+ax))
Aie e0emplul.
-h*co%%and.utton (d0"submit" )a"ue0"Submit" 1
-#*a+ax execute0"userNo" e)ent0"click"21
-2h*co%%and.utton1
%n care componenta identi(icata prin user$o va (i e0ecutata cand (acem clic? pe buton)
(%%ed(ate, de tip +a)ax,e",'a"ue3xpress(on de valoare .oo"ean, ceea ce indica
ca input-urile sunt procesate mai devreme in ciclul de viata) Daca valoarea este true
evenimentele generate sunt e0ecutate in (aza #pply ReCuest /alues, alt(el vor (i
e0ecutate in %nvo?e #pplications) /aloarea prede(inita este #a"se)
"(stener, de tip +a)ax,e",Method3xpress(on, contine numele metodei listener ce
va (i apelata cand se va declansa un !+ax.eha)(or3)ent) Metoda se va apela pe
timpul (azei %nvo?e #pplication
one)ent, de tip +a)ax,e",'a"ue3xpress(on de valoare Str(ng, numele (unctiei
ava!cript ce manipuleaza evenimentele) !A apeleaza (unctia, valoare a atributului, la
(iecare stare a procesarii unei cereri ##+. begin, complete si success) !A trimite
acestei (unctii un obiect ce contine urmatoarele proprietati.
o responseXML, raspunsul apelului in (ormat +ML
o responseText, raspunsul apelului in (ormat te0t
o response4ode, raspunsul apelului in cod numeric
o source, sursa evenimentului curent. elementul D"M
o status, starea apelului curent. beg(n, success sau co%p"ete
o type, tipul apelului
(ie e0emplul.
-h*co%%and.utton (d0"submit" )a"ue0"Submit" 1
-#*a+ax execute0"userNo" one)ent0"msg"21
-2h*co%%and.utton1
,nde, %sg este o (unctie ava!cript ce monitorizeaza cererea ##+ trimisa de
eveniment)
onerror, de tip +a)ax,e",'a"ue3xpress(on de valoare Str(ng, numele (unctiei
ava!cript ce manipuleaza erorile) #pelul acestei (unctii se (ace atunci cand apare o
eroare in procesarea cererii ##+) Aunctia are ca parametru un obiect ce contine toate
proprietatile valabile atributului one)ent si in plus urmatoarele. descr(pt(on,
error$a%e si errorMessage) $roprietatea status poate avea urmatoarele valori.
o e%ptyResponse, nu avem un raspuns ##0 de la server
o http3rror, o eroare HTT$ valida
o %a"#or%edXML, raspunsul ##0 nu este bine (ormat
o ser)er3rror, raspunsul ##+ contine un element error
render, de tip +a)ax,e",'a"ue3xpress(on de valoare 6b+ect, este o colectie ce
identi(ica o lista de componente ce vor (i renderizate la client, pentru ca ##+ permite
update-ul partial al unei pagini) Daca valoarea este un literal, aceasta trebuie sa (ie
Str(ng in care, delimitati de spatiu, vor (i identi(icatorii componentelor) Daca
valoarea este un 'a"ue3xpress(on atunci aceasta se re(era la o proprietate ce
returneaza o 4o""ect(on sau un Str(ng) Daca nu e speci(icat valoarea implicita este
7none)
,rmatoarele cuvinte cheie pot (i (olosite cu atributele execute sau render.
7a"", toate identi(icatoarele de componeta
7#or%, (orma ce cuprinde componeta
7none, niciun identi(icator de componeta
7th(s, elementul ce declanseaza cererea
,rmatorul e0emplu ilustreaza modul in care este (olosit atributul render.
-h*(nputText (d0"userNo" )a"ue0"#{userNumberBean.userNumber}"1
-#*)a"(dateLongRange %(n(%u%0"#{userNumberBean.minimum}"
%ax(%u%0"#{userNumberBean.maximum}"21
-2h*(nputText1
-h*co%%and.utton (d0"submit" )a"ue0"Submit" 1
-#*a+ax execute0"userNo" render0"result errors1" one)ent0"msg"21
-2h*co%%and.utton1
-h*outputText (d0"result" )a"ue0"#{userNumberBean.response}"21
-h*%essage (d0"errors1" sho&Su%%ary0"true" sho&8eta("0"false"
sty"e0"color: red; fontfamil!: "Ne# $entur! Sc%oolbook"& serif; font
st!le: obli'ue; textdecoration: o(erline" #or0"userNo"21
"bservatie. biblioteca de resurse ava!cript este incarcata implicit atunci cand (olosim tag-ul
#*a+ax)
$entru a activa (unctionalitatile ##+ aplicatia web trebuie sa creeze o cerere ##+ si sa o
trimita serverului) !erverul va procesa cererea) $entru aceasta am (olosit tag-ul #*a+ax)
Ciclul de viata al unei cereri AJAX
'iclul de viata al unei cereri ##+ di(era de cel al unei cereri obisnuite !A) %n momentul in
care o cerere partiala intra in ciclul de viata al unui !A, in(ormatiile sunt identi(icate si
procesate de obiectul +a)ax,#aces,context,9art(a"'(e&4ontext) 'iclul de viata al !A-
ului este avertizat despre cereri ##+ si modi(ica in consecinta arborescenta de componente)
"biectul 9art(a"'(e&4ontext (urnizeaza acces la in(ormatii despre componentele care se
vor procesa sau renderiza) Metoda process9art(a"( (oloseste aceste in(ormatii pentru a
realiza procesari sau renderizari partiale pe arborescenta de componente) #tributul execute
identi(ica ce segmente din arborescenta de componente vor (i e0ecutate) #ceasta este posibil
prin metoda )(s(tTree( a clasei :;4o%ponent) 'omponentele identi(icate ruleaza prin
(azele ciclului de viata ale cererii !A)
%n mod asemanator stau lucrurile si in cazul atributului render) 'omponentele identi(icate se
vor renderiza impreuna cu descendentii lor) 'omponentele sunt apoi impachetate si trimise
clientului ca un raspuns)
ruparea co!ponentelor
$utem asocia (unctionalitatea ##+ mai multor componente, la un moment dat) #ceasta se
(ace prin gruparea lor, pe o pagina)
%n e0emplul urmator, cand utilizatorul (ace clic? pe oricare dintre componente, rezultatele
updatate vor (i a(isate pentru toate componentele)
-#*a+ax e)ent0<c"(c5< render0<7a""<1
-h*#or%1
-h*(nputText (d0<(nput1< )a"ue0<=>user,na%e?<21
-h*co%%and.utton (d0<Sub%(t<21
-2h*#or%1
-2#*a+ax1
$utem, in plus, adauga actiuni speci(ice speci(ice (iecarei componente, caz in care
(unctionalitatile ##+ devin cumulative)
-#*a+ax e)ent0<c"(c5< render0<7a""<1
,,,
-h*co%%and.utton (d0<Sub%(t<1
-#*a+ax e)ent0<%ouseo)er<21
-2h*co%%and.utton1
,,,
-2#*a+ax1
Incarcarea unei resurse JavaScript
$achetul ce contine resursele ava!cript in !A este +s#,+s si se a(la in biblioteca
+a)ax,#aces) #cesta suporta (unctionalitatea ##+) $entru a (olosi aceasta resursa direct cu
o componenta sau o clasa bean trebuie sa o incarcam e0plicit prin una dintre metodele.
Aolosind #$%-ul resursei direct in pagina Aacelet
Aolosind anotatia +a)ax,#aces,app"(cat(on,Resource8ependency si #$%-ul
resursei in clasa bean
%n primul caz va trebui sa identi(icam resursa prede(inita ava!cript pentru pagina web, cu
a&utorul tag-ului h*outputScr(pt) !pre e0emplu.
-h*outputScr(pt na%e0<+s#,+s< "(brary0<+a)ax,#aces< target0<head<21
/aloarea head a atributului target determina ca resursa ava!cript sa (ie renderizata in
elementul head al paginii HTML) %n pasul urmator identi(icam componenta careia dorim sa ii
atasam o (unctionalitate ##+ (olosind #$%-ul ava!cript) !pre e0emplu.
-h*co%%and.utton (d0<sub%(t< )a"ue0<Sub%(t< onc"(c50<+s#,a+ax,request(th(s,
e)ent,>execute*@(nputna%e@,render*@outputna%e@?Areturn #a"seA< 21
Metoda +s#,a+ax,request( poate avea pina la trei parametri ce speci(ica. sursa,
evenimentul si optiuni) !ursa identi(ica elementul D"M ce produce cererea ##+, de obicei
th(s) $arametrul optional event identi(ica evenimentul D"M ce produce aceasta cerere)
$arametrul optional de optiuni contine o multime de perechi nume-valoare, ast(el.
execute, o lista de identi(icatori, delimitati prin spatiu, ai componetelor ce vor (i
procesate pe parcursul (azei de e0ecutie din ciclul de viata
render, o lista de identi(icatori, delimitati prin spatiu, ai componetelor ce vor (i
procesate pe parcursul (azei de renderizare din ciclul de viata
one)ent, un string ce reprezinta numele unei (unctii ava!cript ce va (i apelata la
aparitia unui eveniment
onerorr, un string ce reprezinta numele unei (unctii ava!cript ce va (i apelata la
aparitia unui eveniment
para%s, un obiect ce contine parametrii aditionali ce sunt inclusi in cerere
Daca nu este speci(icat niciun identi(icator se considera pentru execute 7th(s si pentru
render 7none)
"bservatie. $utem plasa metoda ava!cript intr-un (isier si sa-l includem ca o resursa)
%n cel de-al doilea caz pentru a incarca resursa ##+ de la server, (olosim metoda
+s#,a+ax,request in clasa bean) #ceasta metoda este (olosita de obicei pentru a crea o
componenta custom sau un render custom pentru o componenta)
%n e0emplu este ilustrat modul in care o resursa este incarcata intr-o clasa bean.
7Resource8ependency(na%e0<+s#,+s< "(brary0<+a)ax,#aces< target0<head<

Tema. crearea unei (unctionalitati ##+ de autocompletion)
,tilizatorul (tabela de utilizatori este gestionata direct in baza de date) se logheaza (validarile
pot (i (acute tot cu ##+) si in caz de succes se intra in pagina principala) #ici avem trei zone
cu date dis&uncte. prieteni con(irmati, prieteni invitati si prieteni carora trebuie sa le raspund
invitatiilor (prietenii sunt dintre utilizatori)) $utem selecta numele prietenului din (iecare
categorie ast(el. dupa cel putin 7 caractere introduse, se va deschide o lista ce contine numele
ce se potrivesc caracterelor introduse, lista ce se poate reduce cu (iecare nou caracter inserat)
%n momentul alegerii unui nume, se vor a(isa date speci(ice categoriei, precum si actiuni
speci(ice (spre e0emplu acceptare sau nu a prieteniei, data cererii de prietenie, etc)) ,nele
dintre listele integrale ale (iecarei categorii se vor completa asincron prin actiuni ##+ de
cautare in baza de date) !e va incerca validarea cat mai mult la client) !e va utiliza o
arhitectura M/', care va (olosi !A, *B, $# si DT")