Tehnologia AJAX - (ASYNCHRONOUS JAVASCRIPT

AND XML)
Inteligenţa este putinţa de a vedea şi reproduce obiectiv cele ce există şi se intamplă.
Mihai Eminescu

Obiective Cuprins
• Intelegerea conceptului de ceren asmcrone
prin utilizarea AJAX
• Avantaje si Dezavantaje;
• Exemple de implementare (3).

A. Prezentari teoretice

Introducere
Generalitati despre AJAX :
• este prescm1area de la "Asynchronous J avaScript And XML"
• termenul a fost introdus de catre Jesse James Garrett in februarie 2005
• nucleul sau il reprezinta obiectul XMLHttpRequest care este folosit pentru a schimba
date asincron cu serverul web;
• nu este un nou limbaj de programare ci o modalitate noua de a folosi standardele
existente;
In general, pentru obtinerea de informatii din baza de date, sau pentru a comunica cu
serverul, folosim un formular. Trimitem informatiile cu una din metodele GET sau POST si apoi
asteptam raspunsul serverului, in final primim noua pagina cu rezultate, care este incarcata de
browser.
Avantaj e ale folosirii Ajax-ului :
• in primul rand elimina refresh-ul paginii web, ceea ce face ca aplicatia web sa semene cu
una desktop si astfel duce la o imbunatatire a interefetei utilizator
• imbunatatire a lungimei de banda;
• o separare a datelor, functionalitatii si a formatarii paginii;
Dezavantaje
• nu ruleaza pe versiuni vechi ale browserelor;
• lispa functionalitatii butoanelor de back si forward;
• la timpi de raspuns foarte mari utilizatorul are impresia ca cererea lui nu este procesata ;
• nu ruleaza deloc daca Javascript-ul este oprit de catre utilizator in browser;

Serverul întoarce o noua pagina, de fiecare data cand utilizatorul realizeaza un input, ceea
ce face ca aplicatiile web sa fie mai putin user-friendly , si să ruleze mai greu.
Folosind AJAX putem comunica direct cu serverul, prin inte1mediul unui obiect
(JavaScript) XMLHttpRequest. Acest obiect realizează o cerere HTTP catre o pagina, si
pri1neste un raspuns, FARA a reincarca pagina. Utilizatorul ramane pe aceeasi pagina, iar
mecanismul de transmitere/primire informatii este transparent pentru el.

Modalitatea de implementare
Pasul 1: Crearea obiectului-cerere HTTP
Componenta de baza asociata cu AJAX este obiectul XMLHttpRequest. Acest obiect este
creat in moduri djferite de browsere. Spre exemplu, Internet Explorer foloseste un obiect
A ctiveXObject, în vreme ce restul browserelor (Firefox, Opera, Safari) folosesc
XMLHttpRequest.
request = new XMLHttpRequest();
Ca o precizare, ActiveXObject, primeste parametrii diferiti, in functie de versiunea de
Internet Explorer folosita. Pentru browsere IE5.5 (si versiuni mai noi), creem obiectul astfel:
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
iar pentru browsere IE6.0 (si versiuni mai noi) folosim :
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
Pasul 2: Stabilirea proprietatilor (parametrilor) obiectului XMLHttpRequest:
Proprietate Descriere
readyS t a t e retine starea in care se afla obiectul cerere (întoarce starea obiectului:).
De fiecare data cand aceasta stare se modifica, functia din
onreadystatechange se (re)apeleaza. Valmile pentru starile posibile
sunt:
O: cererea nu a fost initializata (obiectul request a fost creat, însa
metoda open (prezentata mai jos) nu a fost apelata) = neiniţializat
(nu s-a apelat open)
1 : cererea a fost initializata (obiectul request a fost creat, insa metoda
send (prezentata mai jos) nu a fost apelata) = open - cerere în curs
de încărcare (înainte de send)
2: cererea a fost trimisa (a fost apelat send, însa statusul cererii nu este
inca disponibil) = sent - cerere trimisă, dar răspuns încă nesosit
3: cererea este in curs de procesare (o parte a raspunsului a fost
pnm1ta, msa nu integral~ apelul proprietatii responseText
(prezentata mai jos) va produce o eroare) = receiving - se
realizează primirea răspunsului
4 : cererea este completa (si s-a primit un raspuns integral). = loaded -
răspunsul sosit în întregime
onreadystatechange Aceasta proprietate stocheaza functia apelata la primirea unui raspuns
de la server. Exemplu:
xmlHttp.onreadystatechange=function()
{ IITODO: cod specific la schimbarea stari i obiectului }
Oferă. mecanismul de tratare a evenimentului readystate==4. Valoarea
ei este, de regulă, funcţia Java Script care procesează răspunsul.
s t atus Codul răspunsului (HTTP) de la server: 200 for "OK", 404 for "Not
Found" etc.
s t atu sText Răspunsul de mai sus dat ca şi string: "OK", "Not Found" etc.
r esponseText Răspunsul , prezentat ca şi un string. De obicei este folosit în cadrul
funcţiei specificată ca valoare pentru data membră
on r eadys t a t echange .
Daca dorim sa executam cod la momentul efectiv al primirii raspunsului (pentru cererea
noastra HTTP), vom scrie:
xmlHttp. onreadystatechange=function()
{ if(xrnlHttp.readyState==4) {
li TODO: cod tratare raspuns la cerere HTTP
}
}
Proprietatea resp onseText contine raspunsul primit de la server. (In cazul nostru,
responseText este efectiv output-ul scriptului catre care trimitem cererea HTTP)
Putem accesa aceasta proprietate astfel:
xmlHttp.responseText
Pas 3: Pentru trimiterea efectiva a cererii catre server, folosim functi il e open si send.
Functia open deschide o conexiune HTTP. Ea primeste trei parametrii:
open (me t hod, URL , as ync ).
1 . method (metoda) prin care dorim sa trimitem cererea (me t odă ht t p GET sau POST, e t c ).
Al doilea parametru este URL-ul (script-ul) catre care trimitem cererea. Al treilea argument
 specifica faptul ca cererea trebuie tratata asincron. Functia send realizeaza trimiterea efectiva.
2 . URL : URL-u l spre care se face apel u l AJAX , poate f i un URL re l a t iv sau
absolut (atenţ ie , în cazul URL - urilor absolute intervine în calcul şi ceea
ce se cheamă Same Origi n Policy)
3 . async : boolean , recomandabil setat la true .

Observaţie: ex i stă ma i mult e f orme de open , une l e permi t i nclusiv trimit erea
unu i nume de uti l i zat or şi a unei par ole dacă URL-ul i nvocat necesită
autentificare .
send (content) - Trimite cererea . în cazul în care cererea se face prin
intermediul metodei GET , content de obice i e stringul vid . Conţ i ne con ţinut
nevid , spre exemp l u perechi atribut=valoare concatenate prin intermediul
caracterului & doar în cazul folosirii metodei POST .
Exemplu:
xmlHttp.open("GET","time.php",true);
xmlHttp.send(null);
Metode membre importante pe XMLHttpRequest:
Alte metode:
Metoda Descriere
getResponseHeader( header) Întoarce valoarea headerului specificat.
setRequ estHeader (header , val u e ) Adaugă o pereche header/value la
headerele HTTP care va fi trimise la
serverul web
getAl lResponseHeaders () Întoarce setul complet de beadere de pe
răspuns.

Observatii
AJAX nu este altceva decat un mecanism de comunicare cu serverul, fara necesitatea de a
reincarca pagina curenta.
Asadar, datele "de intrare" (cele care trebuie trimise serverului), trebuie obtinute folosind
JavaScript (recuperand continutul unui INPUT dintr-un formular, de exemplu).
Folosind metoda get, putem realiza o trimitere astfel:
var para.ms = "id=5&use1- mike";
var uri = "time.php?"+params;
xm!Http.opcn("GET", uri, tme);
xmlHttp.send(nuU);
Daca dorim sa folosim metoda POST, trebuie sa adaugam infom1atii in header-ul cererii:
var params = "id=5&use1= mike";
var uri= "time.php";
xmlHttp.open("GET", uri, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", params. length);
xmlHttp .setRequestHeader(" Connection ", '' ci ose");
xmlHttp.send(params );
Fonnatarea parametriilor este aceeasi, insa acestia fac parte din corpul mesajului HTTP de
trimis.
Datele primite de la server (script), trebuie de asemenea tratate folosind JavaScript (asa
cum s-a aratat anterior) .
Apeluri AJAX din jQuery: $.ajax
$.load
$.get
$.post
 r r 1 >...,..., 'r • ·- 1 - r , > ,..., ' ' • : _ ~

l!l!l!IBI

Tehnologi• Internet

- <script>
runctian loadXMI.Doc()

var xmlhtcp;
i f ('window . XMLHttpRe quest)
{// code for IE7 • , Firefox, Chr=e, Opera, Safari
xml.htq::i=.new XMLHttpRequesc ();

else
{// code f o r IE6, IES
xml.http=.ne1:,r ActiveXObj ect ( "lticrosof~. XMIJITTP" ) ;
}
xmlhttp . onreadystatechange= fwlctio..n ( )
{
i f (xmlhttp . readyState=~ && xmlhttp . status=200 )
{
document.getElementByid( "myDiv" ) . innerHTML=xmlhttp .responseTexc;
}

xmlhttp. ope n ( "GET" , "ajax. txt• , t.rue) ;

xmJ.ilttp.send();
}
</scr ipt>
</head>
<body>
<table width= "100%" bo:::de:::= 11 0" >

< cr>
<td n e ight = "75" align= ''center" valign= "top" ><div id= "myDiv" >
<p align = "center" >Modi f ica aces t text cu ajutorul. obiectului XMLHttpRequest! </p>
</div>
- <button type= "button" oncl1.ck="loadXMLDoc() " >
<div aligr:= "center" >Change Conte nt</div>
</butcon>
<p>&nbsp; </p></td>
</t r >
</table>
<p align= " center'' ><strong>Tehnologi a Internet</ strong></p>
<p align= "center" > &nbsp ; </p>
</body>
</html>

·ax.txt
A functionat!
Datele au fost transferate asincron cu ajutorul obiectului XMLHttpRequest!
Exemplu 2. Time prin AJAX
- <html>
- <body>
- <script type = "text/javascript" >
.funct.i.o.n a j axFunction()
{
var xm:LB.ttp;
t;:ry
{
/ / Firefox , Opera e . o +, S afari
xmlBcc~.nei,r XML:BccpRequesc O
}
c atc:h (e )
{
/ / Internet Explorer
try
{
xm.1B.ttp=ztet.r ActiveXObj ect (' "Msxml.2 . :XMLBTTP" )
}
c a tc h ( e)
{
t:ry
{
xm.1Http=ne1.r ActiveXObject ( "Microsoft . XMLSTTP" )
}
c a tc h ,( e)
{
al.ert( "Your browser does nat s':.lppo:rt AJAX!"' )
retn:r:n fa1.se ;
}
}
}
xm1Bttp . onreadystatecha;nge=:Eunctio.n (.)
{
.i.:f (.xml.Http . readyState=4 )
{
docum.ent . myForm . t :i.me . vaJ.ue=xmlHttp . responseText;
}
}
xm.18-ttp . ope:o ( "GET" , "t:uue . php" , true )
xm1Ht tp . send ,(.null ) ;
}
< / s cri.pt >
- <form narne= ••myForin'' >
Nante: <i.npu t type = "text"
onCh ange = "ajaxFunotion () ; " name = "username" / >
T i me: <input type = "text" n ame = "time" / >
< / f orm>
j< Jbod y>
Time.php

L;f o ( d.at e ( " G : i : s " ) ) ;

iy<?php

Io browser

:,.;iame: reren Time: 11:35:18

Exemplu II.

Pagina Principala :
< ! DOCTYPE html PUBLI C "- //W3C//DTD XHTML 1 . 0 Transi tional//EN "
" http : //www .w 3 . org/TR/xht mll/DTD/xhtmll-transitional . dtd " >
<html xml ns= " http : //www . w3 . org/l999/xhtml " >
<head>
<ti t l e>Laborator PW </title>
<script type= " text/javascrip t " src= " javascr i pt . js " ></script>
<l i nk rel= "s ty l es heet " type= " t ext/css " h r e f = " stil.css " />
</head>
<body on l oad= " ajaxincarcaPagPrincipal a( ); " >
<div id= " continut " ></div>
</body>
</html>
Aceasta incepe cu declaratia xbtrnl DOCTYPE pentru tipul documentului , in cazul curent
Transitional care permite utilizarea de elementele HTML 4.01 depreciate, dar nu pe cele
depasite.
In sectiunea de ead a paginii se incarca prin fisiere externe codul javascript si fisierul
pentru formatare css.
In tagul body se ataseaza la even imentul onload functia javascript
ajaxlncarcaPagPrincipalaO care transfera asincron continutul paginii. Continutul va fi plasat in
div-ul cu id-ul continut.
Fisierul Javascript
Prima etapa in folosirea AJAX este obtinerea obiectului XMLHttpRequest, aceasta poate
fi problematica pentru ca ca nu toate browserele accepta acelasi cod javascript pentru a creea un
obiect ajax dar il vom face compatibil cu cele mai impo rtante browsere folosite pe la noi si
anume: internet Explorer, Opera, Firefox, Safari
1n scriptul urmator se va folos i metoda cunoscuta sub numele de "try and catch".
function getHTTPOb j ect() catch (e)
{
var xmlHt tp ; try
try {
( xmlHttp=new
// Fire fo x , Ope r a 8 . 0 +, Safari Ac tiveXObject ("Micr osoft . XMLHTTP ") ;
xmlHt t p =new XMLHt t pRequest () ; }
} catch (e)
catch (e) {
{ aler t( " Browser ul nu suporta AJAX! " );
/ / In t ernet Explo rer xmlHtt p = null ;
try }
f }
xmlHt tp=ne w }
Act iveXObject (" Msxml2 . XMLHTTP " ) ; return xmlHttp;
}
In scriptul anterior sa facut trei incercari sa realizam un obiect XMLHttpRequest:
· ajaxRequest = new XMLHttpRequestO;
Acest fragment este pentru Opera, Firefox si Safari. In cazul in care obtinem o eroare vom
continua cu inca doua fragmete de script pentru Internet Explorer.
· ajaxRequest = new ActiveXObject("Msxm/2.XMLHTTP'');
· ajaxRequest = new ActiveXObject("Microsofl.XMLHTTP'');
In cazul in care nici acest fragment nu functioneaza înseamna ca avem de-a face cu un
browser destul de vechi care nu suportaXMLHttpRequest si implicit nici ajax.
Inainte de a trimite informatii catre server trebuie mai intai sa scriem o functie care va fi
capabila sa primeasca aceasta informatie. Vom trata pe rand fiecare parte a scriptului care trebuie
i11clusa in document.
Se începe cu onreadystatechange. Aceasta proprietate a XMLHttpRequest, face
posibila stocarea functiei care va procesa raspunsul serverului.
// Crearea unei funct ii care va primii informatia trimisa de catre server
httpObject . onreadystatechange = onReadyStateChange
O alta proprietate este readyState. Aceasta stocheaza stadiul in care se afla raspunsul serverului.
Raspunsul se poate procesa, downlada, sau poate fi in curs de completare. Singura valoare pe
care o vom aborda si care de fapt ne intereseaza cu adevarat, este aceea din care rezulta ca
operatiunea a fost completata.
Atunci cand readyState are valoarea 4 inseamna ca operatiunea a fost completata si vom
avea acces la informatiile trimise de catre server.
if(httpObject.readyState == 4) //cererea s-a încheiat
{ docurnent.getElementByld('continut').innerHTML = httpObject.responseText; }
Pentru a trimite un request serverului se wmeaza urmatori pasii:
• Stabilim adresa de URL a scriptului care va fi foloit in aplicatia noastra Ajax. :
Ex: httpObject.open("GET" , "pag.php?id=" + idPag, trne);
• Folosim functia de trimitere pentru a request-ului catre server.
Ex : httpObject.send(null);
Functia ajaxincarcaPagPrincipala
function aj axlncarcaPagPrincipala()
{ httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "pag.php?id=O", true );
httpObject.send(null);
httpObject.onreadystatechange = onReadyStateChange2;
}
}
 • Creaza un nou obiect XMLHttpRequest
• Seteaza scriptul de pe server la care se va trimite cererea
• Seteaza readyState cu functia corespunzatoare
Functia onReadyStateChange2
function onReadyStateChange20
{ if(httpObj ect.readyState = 4)//cererea s-a încheiat
{ document.getElementByld('continut').innerHTML= httpObject.responseText; }
}
Cand cererea s-a încheiat raspunsul serverului se gaseste in atributul responseText al obiectului
XMLHttpRequest. Acest raspuns este atribuit elementului din document care are id-ul «continut».
isset - Determine if a variable is set and îs not NULL
Scriptul php de pe server (page.php).
<?p hp
if (isset ($_ GET [ ' id ' ] ))
$id = $_ GET [ ' i d ' ] ;

s wi t ch( $ i d)
{
case O:
e cho ' <div id= " h e ade r " >
<div id= " titl u " > Laborator Tehnologii AJAX </div>
<ul class=" rne n u " >
<li >
<a h r ef= " # " onc l i c k= " a jaxinc arcaPa g Pr inc i pala() "; >Ac a sa</ a >
</ li >
<li> <a hre f = " # " o n cli ck=" inca rcaS ubPag(l) ;" >Chestie 1</ a> </li>
<li> <a hre f =" #" onclick=" i nca rcaSubPag( 2 ) ">Chestie 2 </a> </li>
<li> <a href= " # " onclic k= " incarcaimgSubPag () " >Ches t i e 3</a> </ li>
</u l>
</div>
<div id= " contai ner " >
<div clas s= " irng - s us " ></ div>
<d i v class= " img- j os " ></di v>
<d iv class= " i rng - dreapta " ></div>
<d iv class = " irng - stanga " ></div>
<d iv i d= " pag " >
<br /><br />
<h2 s tyle= " t ext - a l ign : c e n te r " > LA BOR ATO R AJ AX</ h 2>
<br /><br />
<p styl e = " tex t -al i gn : center" >Ace a sta pag i n a a fost i n c arc a t a
asincron f olos i nd AJAX ! </ p >
<b r/><br/>
</div>
</di v>
<di v i d = " footer " >
L A B O R A T O R
</ d i v > ' ;
break ;
cas e 1 :
ech o ' <br/><forrn name= " testForm " >
Pa g i na : <i nput type= " text " na me= " i n putText " id= " i npu t Pag " />
< input type= " Button " val ue= "I n c arca Pa g i n a " id= " i n c arcaExt "
onc l ick= " i ncarcaPagExt( ) ;" />
</ f o rm> ';
break ;
 case 2 :
echo ' <br />< fo r m na me= " t est Form " >
Text int r are : <i nput type= " text" onkeyup= " tran s Text() ;"
n a me= " i npu tText " id= " i nputText " />
Te x t d upa pre l u cre are p e s e r ve r : <inpu t t yp e= " text "
na me= " outputTe xt " id= " outputTex t " />
</ form> ' ;
break ;
} ;
?>
Acest scipt primeste prin GET id-ul operatiei cerute de client. In scripul php aceasta
informatie se poate accesa prin variabila globala $_ GET
Folosind un switch se verifica acest id si se trimit informatiile corespunzatoare folosind
functia ecbo.
Pagina principala contine un header cu titlul si men iul paginii, un container în care se vor
incarca diferitele informatii asincron.
Formatarea CSS
Meniul paginii este realizat folosind o lista neordonata, ul, ce contine o serie de link.mi
fo1matate folosind ierarhii in css.
Clasa ul menu: Se face pozitionarea meniului in pagina :
u l . menu
ma rgin- l eft : 1 90px ;
mar g i n - r ight : 60px ;
height : 30px ;
wi dth : 368p x ;
b ac kgroun d - c o l o r : #6b6b6b ;
}
Tagurile li care se gasesc in tagul ul de clasa menu sunt formatate separat:
ul.menu li
{ list-style-type: none; // nu contine semnele de la începutu l elementului listei
display: inline; //elementele sunt plasata in aceiasi linie nu pe linii separate (ca în liste obisnuite)
}
Apoi sunt formatate linkurile care se gasesc în tagurile ul din clasa menu
ul.menu a:link ul.mcnu a:visitcd ul.mcnu a:hovcr
color:#b6bec9; color:#b6bec9; {
text-decoration:none; text-decoration:none; color:#28323b;
padding: lOpx 15px 12px 15px; padding: JOpx 15px 12px 15px; background-color:#d0d8D ;
} } text-decoration:none;
width: I 30px;
height:40px;
}

Exercitii/Task-u ri:
1. Conform exemplului de aici (http://www.pamdesign.ro/articole-utile/despre-web/ce-este-ajax),
analizati si modificati pentru calculul produsului celor două numere.
~r 1 = 4 ~r 2 = 5
[ calculeaza ]
Suma =9

2.
Se prezinta 3 exemple :
 I. Primul trimite un sir de caractere la server, aici acesta este transformat in caractere
UPPERCASE si trimis inapoi la client
li. Al do ilea incarca intr-un iframe o pagina externa
III. Al treilea trimite o cerere serverului ca sa citeasca toate imaginile dintr-un director si sa
le trimita inapoi la client. Imaginile sunt astfel incarcate fara reincarcarea întregii pagini.

B. Bibliografie

)i> http://www.w3schools.com/ajax/default.asp
);> http://www.attagency.ro/blog/general/tot-ce-este-minim-necesar-de-stiut-despre-
ajax.html
);> http://www.etutoriale.ro/articles/ 1483/ l/Tuto1ial-Ajax/
);> http://www.w3scbools.com/ajax/ajax example.asp
);> http://ajaxexarnples.org/
);> http://sixrevisions.com/ajax/ajax technigues/
);> http://www.w3schools.com/jquery/jquery_ ajax_ intro.asp
);> http://www.w3schools.com/jquery/jquery_ref_ajax.asp
);> tutorialul informat PDF; update AJAX pentru Visual Studio 2005 http://ajax.net-
tutorials.com/basics/hello-world
)i> tutorialul informat PDF; sursa bazei de date AdventureWork: http://www.asp.net/ajax
ajax + sql sursa http://msftdbprodsarnples.codeplex.com/releases/view/4004