Interfete Evoluate

Concepte Ajax si Exemple

Irina Boldea

Acest articol prezinta cateva dintre caracteristicile tehnologiei Ajax si beneficiile pe care aceasta technologie le aduce legat de viteza interactiunii dintre client(browser) si server.Totodata , la sfarsit, este prezentat un exemplu ce implementeaza un auto-complete simplu ce foloseste Ajax si PHP pentru a se conecta la o baza de date MySQL. Pentru exemple mai complexe ale utilizarii tehnologiei Ajax va rugam sa consultati sectiunea Teme3.

Technologia Ajax are la baza urmatoarele standarde si este utilizata pentru inbunatatirea traficului de pagini web dintre server si client(browser):

JavaScript
XML
HTML
CSS

O aplicatie web ce nu foloseste Ajax va trimite input-ul primit intr-un form HTML la un server de web.Dupa ce serverul a procesat datele primite va returna o noua pagina catre user ceea ce va determina o lantenta(trimiterea si reincarcarea paginii) in raspunsul serverului pentru site-urile mari si nu un numar mare de utilizatori.

Un mare beneficiu adus de Ajax este acela ca aplicatiile web pot trimite si primii date fara sa reincarce intreaga pagina, aceasta technologie dovedindu-se foarte eficienta pentru site-urile mari si nu numai. Secretul acestei technologii este trimiterea unor cereri HTTP la server si modificarea in pagina doar a anumitor parti, fara sa fie nevoie de reincarcarea paginii.

Astfel Ajax face ca paginile de web sa fie mult mai rapide la schimburile de date intre browser si server ,decat sa reincarce intreaga pagina de fiecare data cand user-ul face schimbari(o situatie des intalnita: prelucrarea de catre server a inputului dintr-un form html).

Proprietati Ajax

Ajax foloseste un model de programare cu display si evenimente. Aceste evenimente sunt generate de actiunile utilizatorilor(completarea unui camp din form-ul html) si ca atare se vor apela functii asociate cu elementele din pagina de web.

Pentru transferul datelor intre client si server Ajax pune la dispozitie un obiect XMLHttpRequest ce se ocupa de trimiterea cererii(url) folosind una din metodele Get sau Post. Pentru primirea raspunsului de la server,XMLHttpRequest pune la dispozitie proprietatea onreadystatechange ce desemneaza un handler(functie) ce se va ocupa de prelucrarea raspunsului serverului.

In functie de raspunsul serverului atributul readyState va avea anumite valori:

1 Conectarea a reusit
2 Cererea a fost incheiata cu succes
3 Raspunsul este inca in procesare
4 Raspunsul a fost trimis la client

Aceste valori vor fi verificate in handle pentru o interceptare corect a raspunsului(pentru mai multe detalii vezi exemplul de mai jos)

Standarde folosite in construirea unei site folosind AJAX JavaScript JavaScript se foloseste pentru initializarea obiectului XMLHttpRequest, pentru trimiterea cererii la server si procesarea raspunsului de la acesta. PHP Cererea trimisa de catre un client este procesata la server de catre un script php ce interogheaza o baza de date mySQL.

Exemplu Se creaza o pagina html ce permite alegerea numelui unui user si afisarea datelor personale ale acestuia. Pentru aceasta avem nevoie de un fisier *.html ce va contine sursa paginii web, un fisier ce contine scriptul javascript ce se ocupa de trimiterea cererii la server si primirea raspunsului si de un script php ce se ocupa de interogarea bazei de date(userName:peter, password:abc123)

Cod Pagina Web:

Scriptul JavaScript(selectuser.js)

var  xmlHttp

/*Functie ce se ocupa de trimiterea cererii(numele user-ului ales) la server*/

function showUser(str)
{ 
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null)
 	{
 		alert ("Browser does not support HTTP Request")
 		return
 	}
	var url="getuser.php"
	url=url+"?q="+str

/*se apendeaza un numar aleator pentru ca browser-ul sa nu foloseasca cache-ul pentru raspuns*/

url=url+"&sid="+Math.random()
	xmlHttp.onreadystatechange=stateChanged 
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}
/*Prelucrarea raspunsului de la server(nu inainte de verificarea starii mesajului)*/
function stateChanged() 
{ 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 	{ 
			document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 	} 
}
/*Creare a unui obiect AJAX XmlHttpObject*/
function GetXmlHttpObject()
{
	var xmlHttp=null;
	try
 	{
 		// Firefox, Opera 8.0+, Safari
 		xmlHttp=new XMLHttpRequest();
 	}
	catch (e)
 	{
 		//Internet Explorer
 		try
  		{
  			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  		}
 		catch (e)
  		{
  			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
 	}
	return xmlHttp;
}

Scriptul PHP (getuser.php)

>

Bine ati venit!

Acesta este siteul proiectului nostru la cursul de Interfete Evoluate.

Din meniu aveti acces catre aplicatii dezvoltate de membrii echipei, articole cu informatii utile despre tehnologiile folosite, resurse de unde putetii obtine mai multe informatii despre acest domeniu precum si o lista de programe gratuite de care ne-am folosit pe parcurs.

Blog