Sunteți pe pagina 1din 4

Tehnologia AJAX

Esti inteligent daca nu crezi decat jumatate din ceea ce auzi; esti intelept
daca stii care jumatate! - Autor anonym

Obiective:

Avantaje si Dezavantaje;
Exemple de implementare (3).

Generalitati despre AJAX :


este prescurtarea de la "Asynchronous JavaScript And XML"
termenul a fost introdus de catre Jesse James Garrett in februarie 2005
nucleul sau il reprezinta obiectul XMLHttpRequest care este folosit pentru a schimba
date asincron cu serverul web;
nu este un nou limbaj de programare ci o modalitate noua de a folosi standardele
existente,
Avantaje ale folosirii Ajax-ului :
in primul rand elimina refresh-ul paginii web, ceea ce face ca aplicatia web sa semene cu
una desktop si astfel duce la o imbunatatire a interefetei utilizator
imbunatatire a lungimei de banda;
o separare a datelor, functionalitatii si a formatarii paginii;
Dezavantaje
nu ruleaza pe versiuni vechi ale browserelor;
lispa functionalitatii butoanelor de back si forward;
la timpi de raspuns foarte mari utilizatorul are impresia ca cererea lui nu este procesata ;
nu ruleaza deloc daca Javascript-ul este oprit de catre utilizator in browser ;

Pagina Principala :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Laborator PW </title>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body onload="ajaxIncarcaPagPrincipala();">
<div id="continut"></div>
</body>
</html>

Aceasta incepe cu declaratia xhtml DOCTYPE pentru tipul documentului, in cazul curent
Transitional care permite utilizarea de elementele HTML 4.01 depreciate, dar nu pe cele
depasite.
In sectiunea de head a paginii se incarca prin fisiere externe codul javascript si fisierul
pentru formatare css.
In tagul body se ataseaza la evenimentul onload functia javascript
ajaxIncarcaPagPrincipala() care transfera asincron continutul paginii. Continutul va fi plasat in
div-ul cu id-ul continut.
Fisierul Javascript
Prima etapa in folosirea AJAX este obtinerea obiectului XMLHttpRequest, aceasta poate
fi problematica pentru ca ca nu toate browserele accepta acelasi cod javascript pentru a creea un
obiect ajax dar il vom face compatibil cu cele mai importante browsere folosite pe la noi si
anume: internet Explorer, Opera, Firefox, Safari
In scriptul urmator se va folosi metoda cunoscuta sub numele de "try and catch".
1

function getHTTPObject()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new
ActiveXObject("Msxml2.XMLHTTP");
}

catch (e)
{
try
{
xmlHttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Browserul nu suporta AJAX!");
xmlHttp = null;
}
}
}
return xmlHttp;
}

In scriptul anterior sa facut trei incercari sa realizam un obiect XMLHttpRequest:


ajaxRequest = new XMLHttpRequest();
Acest fragment este pentru Opera, Firefox si Safari. In cazul in care obtinem o eroare vom
continua cu inca doua fragmete de script pentru Internet Explorer.
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
In cazul in care nici acest fragment nu functioneaza inseamna ca avem de-a face cu un
browser destul de vechi care nu suporta XMLHttpRequest si implicit nici ajax.
Inainte de a trimite informatii catre server trebuie mai intai sa scriem o functie care va fi
capabila sa primeasca aceasta informatie. Vom trata pe rand fiecare parte a scriptului care trebuie
inclusa in document.
Se incepe cu onreadystatechange. Aceasta proprietate a XMLHttpRequest, face
posibila stocarea functiei care va procesa raspunsul serverului.
// Crearea unei functii care va primii informatia trimisa de catre server
httpObject.onreadystatechange = onReadyStateChange ;
O alta proprietate este readyState. Aceasta stocheaza stadiul in care se afla raspunsul serverului.
Raspunsul se poate procesa, downlada, sau poate fi in curs de completare. Singura valoare pe
care o vom aborda si care de fapt ne intereseaza cu adevarat, este accea din care rezulta ca
operatiunea a fost completata.
Atunci cand readyState are valoarea 4 inseamna ca operatiunea a fost completata si vom
avea acces la informatiile trimise de catre server.
if(httpObject.readyState == 4) //cererea s-a incheiat
{ document.getElementById('continut').innerHTML = httpObject.responseText; }
Pentru a trimite un request serverului se urmeaza urmatori pasii:
Stabilim adresa de URL a scriptului care va fi foloit in aplicatia noastra Ajax. :
Ex : httpObject.open("GET", "pag.php?id=" + idPag, true);
Folosim functia de trimitere pentru a request-ului catre server.
Ex : httpObject.send(null);
Functia ajaxIncarcaPagPrincipala
function ajaxIncarcaPagPrincipala()
{ httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "pag.php?id=0", true);
httpObject.send(null);
httpObject.onreadystatechange = onReadyStateChange2;
}
}
2

Creaza un nou obiect XMLHttpRequest


Seteaza scriptul de pe server la care se va trimite cererea
Seteaza readyState cu functia corespunzatoare
Functia onReadyStateChange2
function onReadyStateChange2()
{ if(httpObject.readyState == 4)//cererea s-a incheiat
{ document.getElementById('continut').innerHTML= httpObject.responseText; }
}
Cand cererea s-a incheiat raspunsul serverului se gaseste in atributul responseText al obiectului
XMLHttpRequest. Acest raspuns este atribuit elementului din document care are id-ul continut.
isset Determine if a variable is set and is not NULL
Scriptul php de pe server (page.php).
<?php
if (isset($_GET['id']))
$id = $_GET['id'];
switch($id)
{
case 0:
echo ' <div id="header">
<div id="titlu"> Laborator Tehnologii AJAX </div>
<ul class="menu">
<li>
<a href="#" onclick="ajaxIncarcaPagPrincipala()";>Acasa</a>
</li>
<li> <a href="#" onclick="incarcaSubPag(1);">Chestie 1</a> </li>
<li> <a href="#" onclick="incarcaSubPag(2)">Chestie 2 </a> </li>
<li> <a href="#" onclick="incarcaImgSubPag()">Chestie 3</a> </li>
</ul>
</div>
<div id="container">
<div class="img-sus"></div>
<div class="img-jos"></div>
<div class="img-dreapta"></div>
<div class="img-stanga"></div>
<div id="pag">
<br/><br/>
<h2 style="text-align:center"> L A B O R A T O R AJAX</h2>
<br/><br/>
<p style="text-align:center">Aceasta pagina a fost incarcata
asincron folosind AJAX!</p>
<br/><br/>
</div>
</div>
<div id="footer">
L A B O R A T O R
</div>';
break;
case 1:
echo '<br/><form name="testForm">
Pagina: <input type="text" name="inputText" id="inputPag" />
<input type="Button" value="Incarca Pagina" id="incarcaExt"
onclick="incarcaPagExt();"/>
</form>';
break;

case 2:
echo '<br/><form name="testForm">
Text intrare: <input type="text" onkeyup="transText();"
name="inputText" id="inputText" />
Text dupa prelucreare pe server: <input type="text"
name="outputText" id="outputText" />
</form>' ;
break;
};
?>

Acest scipt primeste prin GET id-ul operatiei cerute de client. In scripul php aceasta
informatie se poate accesa prin variabila globala $_GET
Folosind un switch se verifica acest id si se trimit informatiile corespunzatoare folosind
functia echo.
Pagina principala contine un header cu titlul si meniul paginii, un container in care se vor
incarca diferitele informatii asincron.
Se prezinta 3 exemple :
I. Primul trimite un sir de caractere la server, aici acesta este transformat in caractere
UPPERCASE si trimis inapoi la client
II. Al doilea incarca intr-un iframe o pagina externa
III. Al treilea trimite o cerere serverului ca sa citeasca toate imaginile dintr-un director si sa
le trimita inapoi la client. Imaginile sunt astfel incarcate fara reincarcarea intregii pagini.
Formatarea CSS
Meniul paginii este realizat folosind o lista neordonata, ul, ce contine o serie de linkuri
formatate folosind ierarhii in css.
Clasa ul menu: Se face pozitionarea meniului in pagina :
ul.menu
{ margin-left: 190px;
margin-right: 60px;
height: 30px;
width:368px;
background-color:#6b6b6b;
}
Tagurile li care se gasesc in tagul ul de clasa menu sunt formatate separat:
ul.menu li
{ list-style-type: none; // nu contine semnele de la inceputul elementului listei
display: inline; //elementele sunt plasata in aceiasi linie nu pe linii separate (ca in liste obisnuite)
}
Apoi sunt formatate linkurile care se gasesc in tagurile ul din clasa menu
ul.menu a:link
{ color:#b6bec9;
text-decoration:none;
padding: 10px 15px 12px 15px;
}

ul.menu a:visited
{
color:#b6bec9;
text-decoration:none;
padding: 10px 15px 12px 15px;
}

ul.menu a:hover
{
color:#28323b;
background-color:#d0d8f3;
text-decoration:none;
width:130px;
height:40px;
}

BIBLIOGRAFIE
http://www.attagency.ro/blog/general/tot-ce-este-minim-necesar-de-stiut-despre-ajax.html
http://www.etutoriale.ro/articles/1483/1/Tutorial-Ajax/
http://www.w3schools.com/ajax/ajax_example.asp
http://ajaxexamples.org/
http://sixrevisions.com/ajax/ajax_techniques/