Vous êtes sur la page 1sur 13

Tutorial AJAX

AJAX = Asynchronous JavaScript And XML.



AJAX nu este un limbaj nou de programare, este doar o noua modalitate de a utiliza
standardele existente

AJAX este arta de a schimba date cu un server, si de a actualiza portiuni din pagina
web fara a reincarca pagina complet.

Ce ar trebui sa stiti deja
Inainte de a continua ar trebui sa aveti cunostinte de baza despre:
HTML / XHTML
CSS
JavaScript / DOM

AJAX este o tehnica de a crea pagini web rapide si dinamice.
AJAX permite actualizarea paginilor web in mod asincron schimband mici cantitati de
date pe fundal.
Paginile web clasice, (care nu folosesc AJAX) trebuie sa reincarce toata pagina daca
se modifica o parte din continut.
Exemple de aplicatii care folosesc AJAX: Google Maps, Gmail, Youtube, si Facebook
tabs

Cum functioneaza AJAX
AJAX este bazat pe Standardele Internet, si utilizeaza o combinatie de:
XMLHttpRequest object (pentru a schimba date in mod asincron cu un server)
JavaScript/DOM (pentru a afisa/interactiona cu informatia)
CSS (pentru a formata datele)
XML (utilizat adesea ca format de transmitere a datelor)

Aplicatiile AJAX sunt independente de browser si sistem de operare!

AJAX a fost popularizat de Google in 2005, cu Google Suggest.
Google Suggest foloseste AJAX pentru a crea o interfata web foarte dinamica: Cand
incepeti sa scrieti in casuta de cautare Google, un JavaScript trimite literele la un
server si acesta va raspunde cu niste sugestii.

Incepeti sa utilizati AJAX chiar de azi!!!

AJAX se bazeaza pe standarde existente. Aceste standarde au fost folosite de catre
dezvoltatori timp de multi ani.
Pentru a intelege cum functioneaza AJAX, vom crea o mica aplicatie AJAX prin care
vom modifica o portiune de text.
Aplicatia noastra contine un <div> si un buton.


Sectiunea <div> va fi utilizata pentru a afisa informatia trimisa de server. Cand este
apasat, butonul apeleaza o functie numita loadXMLDoc():
<html>
<body>

<div id="myDiv"><h2> AJAX modifica textul acesta</h2></div>
<button type="button" onclick="loadXMLDoc()">Schimba continut</button>

</body>
</html>

Apoi, adaugati un tag <script> in sectiunea <head> a paginii. Sectiunea de script
contine functia loadXMLDoc():
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... scriptul AJAX vine aici ...
}
</script>
</head>

Piesa principala din AJAX o reprezinta obiectul XMLHttpRequest.

Toate browserele moderne suporta obiectul XMLHttpRequest (IE5 si IE6 folosesc
un ActiveXObject).
Obiectul XMLHttpRequest este folosit pentru a schimba date cu un server pe fundal.


Crearea unui obiect XMLHttpRequest
Toate browserele moderne (IE7+, Firefox, Chrome, Safari, and Opera) au un obiect
XMLHttpRequest din constructie.

Sintaxa pentru crearea unui obiect XMLHttpRequest:
variabila=new XMLHttpRequest();

Versiuni vechi ale Internet Explorer-ului (IE5 si IE6) utilizeaza un obiect ActiveX:
variabila=new ActiveXObject("Microsoft.XMLHTTP");

Pentru a gestiona toate browserele moderne, inclusiv IE5 si IE6, verificati daca
browserul suporta obiectul XMLHttpRequest. Daca da, creati un obiect
XMLHttpRequest, in caz contrar, creati un ActiveXObject.
Exemplu:
var xmlhttp;
if (window.XMLHttpRequest)
{// cod pentru IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// cod pentru IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Obiectul XMLHttpRequest este folosit pentru a schimba date cu un server.


Trimiterea unei cereri la un Server
Pentru a trimite o cerere la un server, folosim metodele open() si send() ale obiectului
XMLHttpRequest:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
Metoda Descriere
open(metoda,url,async) Specifica tipul cererii, URL-ul, si daca
cererea sa fie gestionata in mod asincron
sau nu.
send(string) Trimite cererea la server.

metoda: tipuri cerere: GET sau POST
url: locatia fisierului pe server
async: true (asincron) sau false (sincron)
string: Se foloseste doar la cereri de tip POST


!T sau "#ST$
GET este mai simplu si mai rapid decat POST, si poate fi folosit in majoritatea
cazurilor.
Dar, utilizati POST de fiecare data cand:
Un fisier temporar (cache) nu e o optiune (incarcati un fisier sau o baza de date
pe server)
Trimiteti o mare cantitate de informatii la server (POST nu are limitari de
dimensiune)
Trimiteti date introduse de utilizator (care pot contine caractere necunoscute),
POST este mai robust si mai sigur decat GET

Cereri !T
O cerere GET simpla.
Exemplu:
xmlhttp.open("GET","demo_get.php",true);
xmlhttp.send();

In exemplul de mai sus, puteti obtine un rezultat din cache.
Pentru a evita asta, adaugati un ID unic la URL.
Exemplu:
xmlhttp.open("GET","demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

Daca doriti sa trimiteti informatii cu metoda GET, adaugati informatia in URL.
Exemplu:
xmlhttp.open("GET","demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();



Cereri "#ST
O cerere POST simpla.
Exemplu:
xmlhttp.open("POST","demo_post.php",true);
xmlhttp.send();

Pentru a trimite (POST) date ca un formular HTML, adaungati un header HTTP cu
setRequestHeader(). Specificati datele ce doriti sa le trimiteti in metoda send().
Exemplu:
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

Metoda Descriere
setRequestHeader(header,valoare) Adauga cererii un header HTTP

header: specifica numele header-ului
valoare: specifica valoarea header-ului


%RL&ul ' %n (isier pe un Server
Parametrul URL al metodei open(), este adresa unui fisier pe un server:
xmlhttp.open("GET","ajax_test.php",true);

Poate fi orice tip de fisier, precum .txt and .xml, sau fisiere de server scripting precum
.asp si .php (care pot efectua actiuni pe server inainte de a trimite raspunsul).

Asincron & True sau (alse$
AJAX vine de la Asynchronous JavaScript and XML, si pentru ca obiectul
XMLHttpRequest sa se comporte ca AJAX, parametrul async al metodei open()
trebuie sa fie pus pe true:
xmlhttp.open("GET","ajax_test.php",true);

Trimiterea de cereri asincrone reprezinta o imbunatatire enorma pentru dezvoltatorii
web. Multe din operatiunile desfasurate pe server consuma mult timp. Inainte de
AJAX, aceasta operatiune putea sa cauzeze blocarea sau inchiderea aplicatiei.

Cu AJAX, scriptul JavaScript nu trebuie sa astepte raspunsul serverului, si poate sa:
execute alte scripturi in timp ce asteapta raspunsul serverului
gestioneze raspunsul cand e gata

As)nc*true
Cand stabiliti async=true, specificati o functie care sa fie executata cand raspunsul e
gata in evenimentul onreadystatechange.
Exemplu:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Veti invata mai multe despre onreadystatechange in capitolul urmator.

As)nc*false
Pentru a folosi async=false, modificati al 3-lea parametru din metoda open() la false:
xmlhttp.open("GET","ajax_info.txt",false);

Folosirea async=false nu este recomandata, dar pentru cateva mici exceptii poate fi
OK.
Amintiti-va ca JavaScript-ul NU va continua executia, pana nu primeste raspuns de la
server. Daca serverul este prea ocupat sau incet, aplicatia se va bloca sau se va
inchide.

Nota: Cand folositi async=false, NU scrieti o functie onreadystatechange doar
puneti codul dupa declaratia send().
Exemplu:
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Raspunsul Serverului
Pentru a primi raspunsul de la server, folositi proprietatile responseText sau
responseXML ale obiectului XMLHttpRequest.
Proprietate Descriere
responseText Obtine raspunsul ca un string
responseXML Obtine raspunsul ca date XML

"roprietatea responseTe+t
Daca raspunsul de la server nu este XML, utilizati proprietatea responseText.
Proprietatea responseText returneaza raspunsul ca un string.

Exemplu:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

"roprietatea responseXML
Daca raspunsul de la server este XML, si doriti sa-l analizati (parse) ca un obiect
XML, utilizati proprietatea responseXML.

Exemplu:
Cereti fisierul cd_catalog.xml si analizati raspunsul:
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;

!venimentul onread)statec,an-e
Cand este trimisa o cerere la un server, dorim sa efectuam diverse operatiuni in
functie de raspuns.
Evenimentul onreadystatechange este declansat de fiecare data cand readyState se
schimba.
Proprietatea readyState tine statusul obiectului XMLHttpRequest.

Trei proprietati importante ale obiectului XMLHttpRequest:
Proprietate Descriere
onreadystatechange Pastreaza o functie (sau numele unei functii) ce va fi
apelata automat cand proprietatea readyState se
modifica
readyState Pastreaza statusul obiectului XMLHttpRequest. Se
schimba de la 0 la 4:
0: cererea nu este initializata
1: conexiune server stabilita
2: cerere receptionata
3: procesare cerere in curs
4: cerere finalizata, raspuns disponibil
status 200: "OK"
404: Page not found

In evenimentul onreadystatechange specificam ce se va intampla cand serverul
trimite raspunsul pentru a fi prelucrat.
Cand readyState este 4 si status este 200, raspunsul este disponibil.

Exemplu:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

Nota: Evenimentul onreadystatechange este declansat de 4 ori, o data pentru fiecare
modificare in readyState.


%tilizarea unei (unctii Callbac.
O functie callback este o functie transmisa ca un parametru la o alta functie.
Daca aveti mai mult de o cerere AJAX pe website-ul dvs, ar trebui sa creati o functie
standard pentru crearea obiectului XMLHttpRequest, si sa o apelati pentru fiecare
cerere AJAX.
Parametrii functiei ar trebuie sa contina: adresa URL, si ce sa faca la modificarea
onreadystatechange (care probabile este diferit pentru fiecare apelare).

Exemplu:
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}

!+emplu AJAX "H"
Exemplul urmator va demonstra cum o pagina web poate comunica cu un server web
in timp ce un utilizator introduce caractere intr-un camp de tip text.

(unctia s,o/Hint01
Cand un utilizator introduce caractere in campul de text, functia "showHint()" este
executata. Functia este declansata de evenimentul "onkeyup":
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// cod pentru IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// cod pentru IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}

Explicarea codului sursa:
Cand casuta de text este goala (str.length==0), functia sterge continutul txtHint si
paraseste rutina.

Cand casuta de text nu este goala, functia showHint() executa urmatoarele:
Creaza un obiect XMLHttpRequest
Creaza functia ce va fi executata cand server-ul raspunde
Trimite cererea la un fisier pe server
Observati ca un parametru (q) este adaugat la URL (cu continutul casutei de text)

"a-ina "H" de pe server folosita de AJAX
Pagina de pe server apelata de JavaScript-ul de mai sus este un fisier PHP numit
"gethint.php".

(isierul "H"
Codul sursa din "gethint.php" verifica un array de nume, si returneaza numele
corespunzatoare browserului:

<?php
// Completam array-ul cu nume
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//obtine parametrul q din URL
$q=$_GET["q"];

//cauta toate sugestiile din array daca lungimea lui q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Stabileste raspunsul drept "Fara sugestie" daca nu au fost gasite sugestii
// sau la valorile corecte
if ($hint == "")
{
$response=" Fara sugestie";
}
else
{
$response=$hint;
}

//afiseaza raspunsul
echo $response;
?>


!+emplu AJAX cu baza de date
Urmatorul exemplu va demonstra cum o pagina web poate obtine informatii dintr-o
baza de date cu AJAX.

Tabelul folosit de noi in exemplu arata in felul urmator:
ID Nume Prenume Ani Oras Job
1 Pop Grigore 41 Constanta Berar
2 Cretu Mariana 40 Bucuresti Profesor
3 Joseph Alexandru 39 Cluj Napoca Politist
4 Gheorghe Elena 41 Cluj Napoca Sofer


Exemplu Explicat - Pagina HTML
Cand un utilizator selecteaza o persoana din lista, o functie numita "showUser()" este
executata. Functia este declansata de evenimentul "onchange":
<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// cod pentru IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// cod pentru IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Pop Grigore</option>
<option value="2">Cretu Mariana</option>
<option value="3">Joseph Alexandru</option>
<option value="4">Gheorghe Elena</option>
</select>
</form>
<br />
<div id="txtHint"><b>Informatiile persoanei vor fi afisate aici.</b></div>

</body>
</html>




Functia showUser() face urmatoarele:
Verifica daca o persoana este selectata
Creaza un obiect XMLHttpRequest
Creaza functia ce va fi executata cand raspunde serverul
Trimite cererea la un fisier pe server
Observati ca un parametru (q) este adaugat la URL (cu continutul listei)

(isierul "H"
Pagina de pe server apelata de JavaScript este un fisier PHP numit "getuser.php".
Codul sursa din "getuser.php" ruleaza un query intr-o baza de date MySQL, si
returneaza rezultatul intr-un tabel HTML:
<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'utilizator', 'parola');
if (!$con)
{
die('Nu am reusit conectarea: ' . mysql_error());
}

mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Prenume</th>
<th>Nume</th>
<th>Ani</th>
<th>Oras</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Prenume'] . "</td>";
echo "<td>" . $row['Nume'] . "</td>";
echo "<td>" . $row['Ani'] . "</td>";
echo "<td>" . $row['Oras'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";

mysql_close($con);
?>


Explicatie: Cand interogarea este trimisa din JavaScript la fisierul PHP, se intampla
urmatoarele:
PHP deschide o conexiune la un server MySQL
Persoana corecta este gasita
Un tabel HTML este creat, populat cu date, si trimis inapoi la "txtHint"


!+emplu AJAX XML
Urmatorul exemplu va demonstra cum o pagina web poate obtine informatii dintr-un
fisier XML folosind AJAX.

(unctia stateC,an-e01
Cand un utilizator executa clic pe butonul "Obtine CD info", se executa functia
loadXMLDoc().

Functia loadXMLDoc()creaza un obiect XMLHttpRequest, adauga functia ce va fi
executata cand serverul trimite raspunsul, si trimite cererea la server.
Cand serverul trimite raspunsul, un tabel HTML este construit, elementele (nodurile)
sunt extrase din fisierul XML, si in final actualizeaza containerul txtCDInfo cu
tabelul HTML populat cu datele XML:
function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// cod pentru IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// cod pentru IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td>&nbsp;</td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td>&nbsp;</td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

"a-ina de pe server
Pagina de pe server folosita in exemplul de mai sus, este un fisier XML numit
"cd_catalog.xml".

Vous aimerez peut-être aussi