Sunteți pe pagina 1din 7

AJAX

I.Introducere

AJAX = Asincron JavaScript si XML.

AJAX nu este un limbaj de programare ci o noua modalitate de a folosi standardele


existente deja.

AJAX este arta de a schimba date cu serverul si a updata parti din pagina web fara a
reincarca toata pagina. (fara AJAX pentru a updata o parte din pagina web trebuie sa
reincarcam toata pagina )

AJAX se bazează pe standarde Internet


AJAX is based on internet standards, and uses a combination of: AJAX se bazează pe
standardele de internet, şi foloseşte o combinaţie de:

• XMLHttpRequest (pentru schimb de date asincron cu un server)


• JavaScript / DOM (pentru a afişa / interacţiona cu informaţiile)
• CSS (folosite la stilizarea datelor)
• XML (adesea folosit ca format pentru transferul datelor)

Aplicaţiile AJAX sunt independente de browser si platforma!

II. Mod de utilizare AJAX

Pentru a intelege mai bine aceasta tehnica haideti sa folosim un exemplu :

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>


<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Functia loadXMLDoc()executa urmatoarele:

• Creaza un obiect XMLHttpRequest


• Creaza o functie ce se va executa cand raspunsul de la server e pregatit
• Trimite cererea la fisierul ajax_info.txt de pe server

1.XMLHttpRequest

Obiectul XMLHttpRequest este piatra de temelie.

Toate browserele moderne, suporta obiectul XMLHttpRequest (IE5 si IE6 folosesc


ActiveXObject).

XMLHttpRequest este folosit pentru schimbul de date cu un server in spatele scenei.


Acest lucru înseamnă că este posibil să se actualizeze părţi ale unei pagini web, fără a
reîncărca intreaga pagina.

a.Crearea obiectului XMLHttpRequest

Toate browserele moderne (IE7 +, Firefox, Chrome, Safari, şi Opera) au obiectul


XMLHttpRequest built-in.

Sintaxa pentru crearea unui obiect XMLHttpRequest:

xmlhttp=new XMLHttpRequest();

Versiunile vechi de Internet Explorer (IE5 and IE6) folosesc un obiect ActiveX:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

Din acest motiv,pentru a crea un obiect XMLHttpRequest in toate browserele , verific


daca browserul suporta obiectul XMLHttpRequest. Daca da , il creez , daca nu voi crea
un obiect ActiveX.

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

b.Trimiterea unei cereri la server

Pentru a trimite o cerere la server, vom folosi metodele open () si send () ale obiectului
XMLHttpRequest:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Method Description
method: tipul cererii: GET sau POST
open(method,url,async) url: locatia fisierului pe server
async: true (asincron) sau false (sincron)
Sends the request off to the server.
send(string)
string: folosit doar in cazul cererilor POST

Cererea GET

EX:

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

In acest exemplu e posibil ca sa primesti un rezultat pastrat in cacheul browserului (adica


daca apesi pe buton de mai multe ori la intervale de cateva secunde obtii acelasi rezultat).

Pentru a evita acest lucru, adaugati un ID unic la URL:

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
Daca vrei sa trimiti informatii cu metoda GET , adauga informatiile la URL

xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
xmlhttp.send();

Cererea POST

Ex:

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

Pentru a transmite date prin POST , sa spunem o forma HTML, adaugam un header
HTTP folosind setRequestHeader(). Datele effective se trimit cu metoda send(). (la GET
metoda send() e fara parametric , datele de transmis se adauga la URL)

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

Metoda Descriere
Adauga header HTTP la cerere
setRequestHeader(header,value)
header: specifica numele headerului
value: specifica valoarea headerului

URL – fisier pe server

Parametrul URL al metodei open() reprezinta adresa unui fisier pe server:

xmlhttp.open("GET","ajax_test.asp",true);

Acest fisier poate fi de orice tip : .txt ,.xml, sau scripturi ca .asp si .php (ce pot face
anumite actiuni pe server inainte de a trimite date inapoi).

Asincron – true sau false ?

AJAX inseamna Asynchronous JavaScript and XML, si ca obiectul XMLHttpRequest


sa se comporte ca AJAX, parametrul async a metodei open() trebuie setat pe true:

xmlhttp.open("GET","ajax_test.asp",true);

A trimite cereri asincron aduce o plus important . Cum multe din sarcinile ce se
desfasoara pe server consuma timp , inainte de AJAX aceste operatii puteau cauza
incetiniri sau chiar blocaje.
Cu AJAX nu mai trebuie sa asteptam raspunsul serverului pentru a continua ci putem sa
facem altceva in acest timp :

• Execut alte scripturi cat timp astept raspunsul serverului


• Sa folosesc raspunsul cand acesta devine disponibil

Cand async=true, specifica o functie care sa se execute cand raspunsul e ready in


evenimentul onreadystatechange :

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();

Cand async=false, se va astepta raspunsul serverului pentru a continua scriptul

xmlhttp.open("GET","ajax_info.txt",false);

Using async=false is not recommended, but for a few small requests this can be ok.

Obs: Cand folosim async=false, nu mai scrie functia onreadystatechange – doar pune
codul dupa send():

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

c. Raspunsul serverului

Pentru a primi rspuns de la server, foloseste proprietatile responseText sau


responseXML ale obiectului XMLHttpRequest.

Property Description
responseText Primesti de la server sub forma text
responseXML Primesti de la server sub forma de XML data

Daca raspunsul de la server nu e XML, foloseste proprietatea responseText ce va returna


raspunsul sub forma de string
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Daca raspunsul de la server e XML, si vrei sa il parsezi ca un obiect foloseste


proprietatea responseXML:

xmlDoc=xmlhttp.responseXML;
var 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;

2. Evenimentul onreadystatechange

Cand trimitem o cerere unui server , vrem sa facem actiuni bazate pe raspunsul serverului
la cerere.

Evenimentul onreadystatechange se declanseaza de fiecare data cand se schimva


readyState (retine statusul lui XMLHttpRequest).

3 proprietati ale obiectului XMLHttpRequest :

Property Description
Stocheaza o functie (sau numele uneia) ce va fie executata automat
onreadystatechange
de fiecare data cand se schimba proprietatea readyState
Contin starea lui XMLHttpRequest. Schimbarile de la 0 la 4:
0: cerere neinintializata
1: conexiune la server stabilit
readyState
2: cerere receptionata
3: procesarea cererii
4: cererea s-a procesat si raspunsul e gata
200: "OK"
status
404: pagina nu s-a gasit

In evenimentul onreadystatechange specificam ce se va intampla cand raspunsul


serverului e gata sa fie procesat
Cand readyState e 4 si status e 200, raspunsul e pregatit:

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

Obs: Evenimentul onreadystatechange se declanseaza de 4 ori , pentru fiecare schimbare


a readyState.

Folosirea unei functii callback

O callback function e o functie pasata ca parametru altei functii.

Daca ai mai mult de o sarcina AJAX in websiteul tau , creaza doar 1 functie standard
pentru crearea unui obiect XMLHttpReques si apeleaz-o pentru fiecare sarcina AJAX

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