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>
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.
!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.
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:
//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>
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);
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> </td>"; } } xx=x[i].getElementsByTagName("ARTIST"); { try { txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt=txt + "<td> </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".