AJAX Romana

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:
Versiunile vechi de Internet Explorer (IE5 and IE6) folosesc un obiect ActiveX:
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
}
else
{// code for IE6, IE5
}
b.Trimiterea unei cereri la server
Pentru a trimite o cerere la server, vom folosi metodele open () si send () ale obiectului
XMLHttpRequest:
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.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();
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
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:
{
{
}
}
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()
{
{
}
});
}

AJAX Romana

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AJAX Romana

Uploaded by

Copyright:

Available Formats

AJAX

AJAX = Asincron JavaScript si XML.

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

AJAX se bazează pe standarde Internet

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

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 :

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

Functia loadXMLDoc()executa urmatoarele:

 Creaza un obiect XMLHttpRequest

Obiectul XMLHttpRequest este piatra de temelie.

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

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

a.Crearea obiectului XMLHttpRequest

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

Sintaxa pentru crearea unui obiect XMLHttpRequest:

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

b.Trimiterea unei cereri la server

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

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

URL – fisier pe server

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

Asincron – true sau false ?

AJAX inseamna Asynchronous JavaScript and XML, si ca obiectul XMLHttpRequest

 Execut alte scripturi cat timp astept raspunsul serverului

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

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

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

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

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

Evenimentul onreadystatechange se declanseaza de fiecare data cand se schimva

3 proprietati ale obiectului XMLHttpRequest :

In evenimentul onreadystatechange specificam ce se va intampla cand raspunsul

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

Folosirea unei functii callback

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

You might also like