Javascript ajax tutorial

JAVASCRIPT & AJAX
Introducere......................................................................................................................1
JavaScript.........................................................................................................................2
JavaScript şi DOM ...........................................................................................................5
YUI.................................................................................................................................8
AJAX.............................................................................................................................11
Instrumente de dezvoltare...............................................................................................16
Concluzii........................................................................................................................17
Bibliografie ....................................................................................................................17
Introducere
Ce este JavaScript? JavaScript este un limbaj de scripting folosit în general ca limbaj
de scripting client-side pentru aplica ii web (codul Javascript este inclus in pagini şi este
interpretat de browserul clientului). JavaScript poate fi folosit si in alte contexte in afara de
acesta (exista si o versiune JavaScript server-side ) dar îşi datorează popularitatea versiunii
client-side.
JavaScript a fost creat în 1995 de Brendan Eich (Netscape) pentru a aduce un plus de
dinamism paginilor de web. Numele ini ial al limbajului a fost LiveScript şi a fost creat cu
scopul de a oferi un limbaj simplu de scripting pentru a aduce modificări dinamic paginilor
web html pe partea de client (de unde şi „Live” ). Deoarece înainte de lansarea limbajului,
Java era la apogeul popularită ii, s-a decis schimbarea numelui din LiveScript în JavaScript
din motive comerciale. Totuşi, Java şi JavaScript au pu ine lucruri în comun.
Faptul că browserul este responsabil de interpretarea codului JavaScript a adus unele
dezavantaje. În primii ani de via ă utilizarea JavaScript era foarte dificilă, datorită lipsei unui
standard, datorită evolu iei rapide în lumea browserelor şi mai ales datorită evolu iei pe
drumuri divergente a principalilor lor producători (Microsoft, Netscape şi Opera). Codul
scris în JavaScript pentru Internet Explorer, Netscape şi Opera nu producea decât rareori
acelaşi rezultat. Existau deseori diferen e mari şi între rezultatele produse de versiuni
succesive ale aceluiaşi browser. Din aceste motive, majoritatea scripturilor trebuiau scrise în
mai multe variante similare ceea ce era deosebit de neplăcut pentru dezvoltatori. De
asemenea, a durat mult timp până au apărut unele medii de dezvoltare şi depanare avansate.
Astfel a durat destul de mult până când tehnologia a ajuns la maturitate şi a devenit destul de
avansată pentru a fi folosită pe scară largă.Odată cu apari ia Web 2.0 şi AJAX, JavaScript a
crescut în popularitate şi astăzi, o gamă largă de aplica ii web (Google Mail, Yahoo Mail)
folosesc această tehnologie.

JavaScript
Scripturile Javascript se execută de către browser şi sunt incluse deci în pagina HTML ce
se afişează pe calculatorul clientului. Scripturile pot fi incluse complet în pagina HTML sau
pot fi stocate în fişiere separate şi referite în pagina HTML. În ambele cazuri, marcajul
HTML folosit este <script>, exemplele de includere fiind următoarele:
• Script inclus în pagina HTML
<script type=”text/javascript”>
//cod script
</script>
• Script păstrat într-un fişier extern
<script src=”fisier_sursa.js”></script>
Marcajul <script> poate fi inclus atât în interiorul marcajului <head>, cât şi în cadrul
marcajului <body>. Diferen a este că în primul caz scriptul se execută la încărcarea paginii,
în timp ce în al doilea caz se execută în momentul întâlnirii marcajului. Din acest motiv, în
sec iunea <head> sunt incluse func iile ce vor fi folosite în restul paginii iar în <body> sunt
în general apelurile func iilor.
Un script JavaScript poate con ine defini ii de func ii, defini ii de clase (cu men iunea
că JavaScript nu este un limbaj orientat obiect în adevăratul sens al cuvântului neavând o
mare parte din mecanismele unui limbaj orientat obiect), apeluri ale func iilor definite sau ale
func iilor oferite de browser.Sintaxa JavaScript este foarte asemănătoare cu sintaxa Java.
Cuvintele cheie sunt cu mici excep ii aceleaşi, diferen ele majore de sintaxă fiind eviden iate
în prima parte a acestei sec iuni. Pentru o referin ă completă a elementelor limbajului
JavaScript consulta i [1].
Javascript este un limbaj cu tipare dinamică, verificarea tipului datelor efectuându-se la
rulare. Astfel, la declararea unei variabile nu se va specifica tipul acesteia ci doar că este vorba
de o variabilă. Se foloseşte cuvântul cheie var:
var x=2, y=5;
Declararea unei func ii se face folosind cuvântul cheie function urmat de numele
func iei, de lista de parametri şi de un bloc ce con ine codul func iei. Ca şi în Java, cuvântul
cheie return este folosit pentru a întoarce rezultatul func iei.
Un exemplu de definire şi de apel al unei func ii ar fi următorul:
function sum(x,y)
{
var rez=x+y;
return rez;
}
var suma=sum(2,5);

Pentru declararea unei clase în JavaScript se foloseşte acelaşi cuvânt cheie function urmat
de numele clasei, de lista de parametri a constructorului şi de un bloc ce con ine codul cu
ini ializările atributelor şi metodelor clasei.
Una din metodele de implementare a moştenirii în Javascript o reprezintă apelarea
constructorului superclasei în interiorul constructorului subclasei, ca în exemplul de mai jos.
function superClass() {
this.bye = superBye;
this.hello = superHello;
}
function subClass() {
this.inheritFrom = superClass;// implementare mostenire
this.inheritFrom();//apel constructor supraclasa
this.bye = subBye;
}
function superHello() {
return "Hello from superClass";
}
function superBye() {
return "Bye from superClass";
}
function subBye() {
return "Bye from subClass";
}
Apelarea următorului cod va returna urmatoarele rezultate
function printSub() {
var newClass = new subClass();
alert(newClass.bye());//"Bye from subClass" – am suprascris
metoda
alert(newClass.hello());//"Hello from superClass"
}
O altă metodă de moştenire o reprezintă moştenirea prototipală - extinderea se poate face
declarând supraclasa ca prototip al subclasei. Această variantă este mai robustă şi mai uşor de
folosit.
Varianta codului de mai sus folosind moştenirea prototipală este următoarea :
function superClass() {
this.bye = superBye;
this.hello = superHello;
}
function subClass() {
this.bye = subBye;
}

subClass.prototype = new superClass; // implementare mostenire
function superHello() {
return "Hello from superClass";
}
function superBye() {
return "Bye from superClass";
}
function subBye() {
return "Bye from subClass";
}
Pentru a adăuga proprietă i după instan iere , se foloseşte aceeaşi abordare
var newClass = new subClass();
superClass.prototype.blessyou = superBlessyou;
function superBlessyou() {
return "Bless You from SuperClass";
}
Metodele de iterare în JavaScript sunt aproape identice cu cele din Java. Sintaxa pentru
instruc iunile for, while şi do..while este identică cu cea din Java. În plus fa ă de Java,
Javascript oferă instruc iunea foreach ce iterează pe proprietă ile unui obiect spre deosebire
de alte limbaje de programare (C#, PHP) unde foreach iterează pe elementele unei colec ii.
Următorul exemplu ilustrează definirea unei func ii în care se iterează proprietă ile unui
obiect şi în care se şi definesc şi se setează valori pentru un obiect.
function printNote(stud)
{
var nota
document.write("note pentru studentul "+stud.nume+":<br>");
for each (nota in stud.note)
document.write(nota+" ");
}
var student={nume: "ion", an:2, note:{mate:9, pc:8}};
document.write(student.nume +"<br>" );
document.write(student.an +"<br>");
printNote(student)
Instruc iunea document.write afişează un şir de caractere în documentul HTML curent
(în care se află script-ul). Despre obiectul document vom discuta mai pe larg în sec iunea
următoare.
Javascript pune la dispozi ie şi un număr mare de obiecte ce pot fi folosite în marea
majoritate a browserelor, printre care Array, Math, Date, String. Mai multe detalii despre
aceste obiecte pot fi găsite la [1].

Un exemplu rapid de afişare a datei curente este următorul:
var data=new Date();// creez un obiect de tip Date
document.write("Documentul s-a incarcat ultima oara la data: " +
data.getDate() +":"+data.getMonth()+ ":"+ data.getFullYear());//
folosind metodele asociate acestui obiect, afisez ziua, luna si
anul
Observa ie! Data afişată de scriptul de mai sus este dependentă de data setată pe
calculatorul pe care se execută scriptul.
Notă pentru avansa i - O metodă de a minimiza cantitatea de cod scrisă în JavaScript o
reprezintă folosirea practicilor de programare func ională (apelarea func iilor ca variabile,
pasarea func iilor ca parametri altor func ii) dar nu este recomandată pentru aplica ii mari
fără documenta ie întrucât îngreunează întelegerea codului..
Mai multe detalii aici
http://www.ibm.com/developerworks/java/library/wa-javascript.html
JavaScript şi DOM
Javascript este utilizat în special pentru a modifica modul de afişare sau con inutul
unei pagini web.
Cum anume putem modifica con inutul unei pagini web?După încărcarea paginii de
pe server, codul JavaScript din pagină poate accesa şi modifica structura documentului afişat.
În acest scop este utilizat DOM (v. Lab4).
DOM (Document Object Model) reprezintă un API standardizat de W3C pentru a
manipula documente HTML sau XML valide [2].
Concret, ce înseamnă acest lucru?
Să presupunem că în pagina HTML avem următorul cod
<html>
<head>
<title>Trees, trees, everywhere</title>
</head>
<body>
<h1>Trees, trees, everywhere</h1>
<p>Welcome to a <em>really</em> boring page.</p>
<div>
Come again soon.
<img src="come-again.gif" />
</div>
</body>
</html>
Interpretarea internă a browserului pentru acest cod va fi o structură arborescentă similară cu
cea de mai jos, cunoscută sub numele de arbore DOM al paginii.

Fiecare element al arborelui DOM are asociată o listă de atribute şi evenimente
(ac iuni).
Prin intermediul Javascript putem accesa dinamic şi manipula arborele DOM al
paginilor web , având posibilitatea de a modifica proprietă ile şi comportamentul fiecărui
element din acesta.
Obiectul rădăcină al arborelui DOM este document. Prin intermediul acestui obiect
putem accesa orice alt obiect sau marcaj din document. Lista completă a metodelor şi
proprietă ilor acestui obiect poate fi găsită la [3].
În sec iunea precedentă am folosit metoda write pentru a scrie un şir de caractere în
loca ia curentă a documentului. O altă metodă foarte des utilizată a acestui obiect este
getElementById(id). Această metodă întoarce nodul (marcajul) care are marcajul id. În
cazul în care sunt folosite id-uri în document putem găsi foarte rapid un anumit nod. O dată
găsit acest nod putem să-i accesăm sau să-i schimbăm proprietă ile.
Exemplul următor arată cum putem schimba textul din interiorul unui element de tip
div şi, de asemenea, cum putem apela cod Javascript în momentul declanşării unui
eveniment de către utilizator.
<script>

Se observă folosirea cuvântului cheie this în apelul func iilor. This, ca şi în Java este o
referin ă la elementul curent şi apelând func ia cu parametrul this se transmite spre
prelucrare obiectul asociat marcajului curent.
Următorul exemplu, ceva mai practic şi pu in mai complicat, exemplifică validarea unui
formular cu ajutorul Javascript.
<!—— script de validare ——>
<script type="text/javascript">
function f1()
{
var nodForm=document.getElementById("f1");// selectez elementul DOM
cu atributul id = f1
var nodDiv=document.getElementById("d1");// selectez elementul DOM
cu atributul id = d1
if(nodForm.mesaj.value.length<5) // daca lungimea textului din
elementul cu id-ul mesaj din interiorul formului selectat este mai
mica de 5 caractere, se afiseaza un mesaj de eroare
// altfel, se trimite formularul la server
nodDiv.innerHTML="mesajul trebuie sa aiba minim 5 caractere"
else {nodForm.action="test2.php"; nodForm.submit();}
}
</script>
<!—— formular simplu, cu un input si un buton ——>
<form id="f1" method="get">
<input type="text" length="20" id="mesaj">
<input type="button" value="trimite" onclick="f1()">
</form>
<!—— zona de afisare a erorilor ——>
<div id="d1"></div>
În sec iunea de cod HTML adăugăm un formular simplu ce con ine un câmp de tip
text şi un buton. Evenimentului onclick al butonului îi asociem o func ie f1 ce va valida
câmpul mesaj al formularului şi în cazul în care acesta este valid (are cel pu in 5 caractere)
formularul se trimite mai departe. Altfel, formularul nu se trimite şi se afişează un mesaj de
eroare.
YUI
Există pe Internet un mare număr de componente Javascript open-source ce oferă
numeroase solu ii pentru adăugarea de func ionalită i suplimentare paginilor web sau doar un
plus de interactivitate sau de dinamism.
Printre cele mai cunoscute frameworkuri JavaScript se numară prototype, mootools,
script.aculo.us, jQuery, YUI.Mai multe detalii despre cele mai utilizate framework-uri aici

http://www.dannydouglass.com/post/2008/04/Comparing-Popular-JavaScript-
Frameworks.aspx şi aici
http://speckboy.com/2008/04/01/top-10-javascript-frameworks-which-do-you-prefer/
Dezbaterile asupra care din variante oferă raportul optim de func ionalită i, dimensiune şi
uşurin ă de utilizare sunt numeroase şi ca majoritatea dezbaterilor, fară o concluzie clara ☺
http://codeigniter.com/forums/viewthread/58061/
Ne vom opri pu in asupra func ionalită ilor oferite de Yahoo User Interface Library
(YUI, [5]). YUI oferă un mare număr de componente (împreună cu o documenta ie
consistentă) pentru creşterii vitezei de dezvoltare a unei pagini web interactive. Căteva din
func ionalită ile oferite de componentele YUI care vă pot uşura eforturile depuse pentru
ob inerea unor func ionalită i uzuale pentru paginile voastre web sunt
• Drag and drop
• Paginator
• Rich Text Editor
• Color Picker
• Image Loader
YUI pune la dispozitia dezvoltatorilor diferite clase care implementează aceste func ionalită i
precum şi o documenta ie consistentă (foarte utilă - YUI fiind destul de complex, nu este şi
cel mai intuitiv framework).
Următoarele exemple ilustrează câteva din facilită ile pe care le oferă YUI.
Exemplul 1: Joaca de-a şoarecele şi pisica într-o pagină web [6].
function YahooAnimate(offL,offT)
{
if(offL>250)
{offL=-300; offT=-300;}
var attributes = {
points: { to: [offL+300, offT+300]}
};
var anim = new YAHOO.util.Motion('tinta', attributes,0.5);
anim.animate();
}
</script>
<div id="tinta"
onmouseover="YahooAnimate(this.offsetLeft,this.offsetTop);" >apasa
aici!</div>
Scriptul de mai sus animează un element de tip div cu textul „apasă aici” ce are id-ul
„ intă” astfel încât să fugă de mouse. Anima ia este foarte simplă – se apelează la declanşarea
evenimentului onmouseover şi primeşte ca parametrii pozi ia elementului curent şi lansează
o nouă anima ie spre altă pozi ie de pe ecran.

Tot ce trebuie să specifice programatorul ce utilizează această bibliotecă este id-ul
elementului ce trebuie animat, parametrii anima iei din vectorul attribute şi durata anima iei.
Acest exemplu necesită includerea următoarelor fişiere din bibliotecă:
• yahoo/yahoo.js
• dom/dom.js
• event/event.js
• animation/animation
Exemplul 2: afişarea unui calendar într-o pagină web [7]
<div id="container"></div>
function calendarInit() {
var schedule=new Array();//initializam un vector cu evenimente
var d0=new Date();//initializam un obiect de tip Date
d0.setFullYear(2007,11,15);
schedule[0]={data:d0, eveniment:"partial IE"};
calendar = new YAHOO.widget.Calendar("calendar","container");
//functia care creeaza calendarul si-l plaseaza in elementul html
//cu id-ul dat ca al doilea parametru
var mySelectHandler = function(type,args,obj) {
//functia care se apeleaza la selectarea de catre utilizator a unei
//date din calendar
var dates = args[0];
var date=dates[0];
var nodDiv=document.getElementById("eveniment");
nodDiv.innerHTML=date[0]+":"+date[1]+":"+date[2];
for(i=0;i<schedule.length;i++)
{
var ev=schedule[i];
if(ev.data.getFullYear()==date[0]&&ev.data.getMonth()==date[1]&&e
v.data.getDate()==date[2])
//daca am gasit vreun eveniment il tiparesc
nodDiv.innerHTML+=": "+ev.eveniment;
}
};
calendar.selectEvent.subscribe(mySelectHandler, calendar,
true);
calendar.render();
}
YAHOO.util.Event.onDOMReady(calendarInit);
</script>
<!—— zona de afisare a evenimentelor ——>
<div id="eveniment"></div>
Scriptul afişează un calendar în cadrul marcajului div cu id-ul „container”. În plus,
având o listă de evenimente date într-un vector de evenimente (schedule), la click pe o

anumită dată se verifică dacă există vreun eveniment în ziua respectivă şi dacă există se
afişează evenimentul. În capitolul următor vom vedea cum putem să afişăm acest program în
mod dinamic pe baza înregistrărilor dintr-o bază de date.
AJAX
AJAX – Asynchronous Javascript and XML este o tehnică de programare web care
permite efectuarea unor cereri http către serverul web, prin intermediul cărora se poate
actualiza o pagină web fără a se efectua reîncărcarea sa completă.
AJAX foloseşte o combina ie de :
• CSS, pentru stilul de afişare al elementlor
• Document Object Model acesat prin intermediului unui limbaj de scripting client-
side precum JavaScript pentru a interac iunea cu pagina şi afişarea dinamică a
informa iei în pagină
• Obiectul XMLHttpRequest pentru schimbul asincron de date cu serverul web
• XML ca format de transfer al datelor trimise în comunica ia client-server (nu este
însă unicul format suportat)
Cum func ionează? La anumite evenimente din pagină sau la un anumit interval de timp, se
apelează un obiect de tip XMLHttpRequest care va cere anumite date de la server iar la
primirea acestora, le va trimite pentru a fi afişate în pagină fără ca aceasta să se reîncarce,
doar prin modificarea unor elemente ale paginii. Formatul în care sunt primite şi trimise
datele poate fi XML, JSON sau chiar text.
Posibilitatea de a reîncărca datele din pagină oferă o experien ă utilizator mult îmbunătă ită
prin minimizarea timpului de aşteptare.
Obiectul Javascript care permite efectuarea acestor cereri asincrone se numeşte
XMLHttpRequest şi specifica iile sale pot fi găsite la [8], unde W3C încearcă să definească un
standard pentru acest obiect.

Deşi comportarea acestui obiect este standard în fiecare browser, ini ializarea sa este
diferită pentru fiecare browser. Iată codul standard pentru creearea unui obiect de tip
XMLHttpRequest aşa cum este prezentat în [9] şi [10].
function ajaxFunction()
{
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("Your browser does not support AJAX!");
return false;
}
}
}
}
Principalele metode, proprietă i şi evenimente oferite de XMLHttpRequest sunt:
• open – creează o conexiune GET sau POST către un url dat ca parametru
• send – efectuează cererea către server
• onreadystatechange – evenimentul care este declanşat de schimbarea valorii
proprietă ii readystate, proprietate ce poate avea următoarele valori (conform
standardului):
o UNSENT = 0
o OPENED = 1
o HEADERS_RECEIVED = 2
o LOADING = 3
o DONE = 4
Vom încerca să exemplificăm func ionarea Ajax în 2 cazuri şi anume în cazul în
care cererea HTTP este declanşată de un eveniment din pagina web (selectarea unei date a
calendarului) şi de cazul în care cererea HTTP se face periodic pentru a verifica de exemplu
dacă s-a modificat ceva în baza de date de pe server şi trebuie notificat utilizatorul.

Exemplul 1: calendar ce ob ine datele referitoare la programul utilizatorului de pe
server şi actualizează dinamic pagina web.
În plus fa ă de exemplul precedent, care foloseşte componenta calendar a YUI ,în acest
script se ini ializează un obiect XMLHttpRequest care deschide o conexiune asincronă către
un script php căruia îi trimite data selectată de utilizator.
În scriptul php se extrage din baza de date (de exemplu) programul utilizatorului pentru ziua
primită parametru şi acest program se întoarce formatat într-un fişier XML. Acest rezultat
este apoi afişat în pagina web când se detectează finalizarea cererii.
var xmlHttp;
function calendarInit() {
calendar = new YAHOO.widget.Calendar("calendar","container");
//functia care se apeleaza la selectarea de catre utilizator a unei
date din calendar
var mySelectHandler = function(type,args,obj) {
var dates = args[0];
var date=dates[0];
xmlCall(date[0],date[1],date[2]);
};
calendar.selectEvent.subscribe(mySelectHandler, calendar,
true);
calendar.render();
}
YAHOO.util.Event.onDOMReady(calendarInit);
function xmlCall(year, month, day){
//primim parametrul ziua, luna si anul selectate si cerem de pe
//server, programul utilizatorului pentru ziua respectiva
xmlHttp=createXMLHttp();//creem obiectul necesar comunicarii cu
serverul
var
connString="http://localhost/testAjax2/getCalendarEvent.php?year="+
year+"&month="+month+"&day="+day; //url-ul scriptului php
folosit+parametrii necesari pt executia //scriptului
//functia ce va fi apelata la schimbarea starii obiectului xmlHttp
xmlHttp.onreadystatechange=displayChange;
/*deschidem conexiunea; true semnifica faptul ca este o conexiune
asincrona si ca scriptul javascript isi continua executia fara a
astepta raspunsul; cand vine raspunsul de la scriptul php apelat se
apeleaza functia displayChange*/
xmlHttp.open("GET",connString,true);
xmlHttp.send(null);
}
function displayChange()
{
var nodDiv=document.getElementById("eveniment");
if (xmlHttp.readyState==4) /*daca rezultatul cererii s-a primit
complet*/
{
if(xmlHttp.status==200) /*daca raspunsul cererii http
a fost ok*/

{
var eveniment=xmlHttp.responseText; /*afisam
rezultatul*/
nodDiv.innerHTML="eveniment:" +eveniment;
}
}
}
Scriptul php ar putea arăta astfel:
<? function getEvent($data)
{
// select din DB
return "rezultat";/*intorc un text oarecare pt ca exemplul sa fie
functional ☺*/
}
header('Content-Type: text/xml');
echo'<?xml version="1.0">'; /*construim un document XML*/
echo'<response>';
$data=mktime(0,0,0,$_GET['month'],$_GET['day'],$_GET['year']);
echo getEvent($data); /*obtinem evenimentul asociat datei primite
si-l tiparim*/
echo'</response>';?>
Exemplul 2: Actualizarea „live” a unei liste de mesaje folosind Ajax.
Într-o pagină web avem un tabel ce con ine ştiri extrase dintr-o bază de date. Baza de date
poate fi actualizată cu ştiri noi în timp ce utilizatorul vizitează pagina. Scopul exemplului este
ca şi lista de ştiri „noi” să fie actualizată pe pagină fără ca utilizatorul să reîncarce pagina.
Aplica ia constă într-un script Javascript, un script php şi o pagină HTML.
/*Scriptul js*/
var xmlHttp;
xmlHttp=createXMLHttp(); //creem obiectul necesar comunicarii cu
serverul
function xmlCall()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState==0)
{/*deschid conexiune catre pagina php ce imi va construi
rezultatul*/
var
connString="http://localhost/testAjax2/latestNews.php";
xmlHttp.onreadystatechange=displayChange;
xmlHttp.open("GET",connString,true);
xmlHttp.send(null);
}
/*mai verific stiri noi peste 10 secunde; se poate seta
acest timeout la orice valoare in functie de aplicatia pe care o
scriem si de cat de des ni se pot actualiza datele*/
setTimeout('xmlCall()',10000);
}
function displayChange()
{

/*tabelul cu date pe care trebuie sa-l completez*/
var nodT=document.getElementById("t1");
/*sterg randurile existente in tabel cu exceptia headerului*/
while(nodT.rows.length>1)
nodT.deleteRow(nodT.rows.length-1);
if (xmlHttp.readyState==4) /*daca rezultatul cererii s-a primit
complet*/
{
if(xmlHttp.status==200) /*daca raspunsul cererii http
a fost ok*/
{
var response=xmlHttp.responseXML;
var
newsList=response.getElementsByTagName("newsItem");
/*prelucrez fisierul xml primit ca rezultat si
adaug inregistrarile in tabel*/
for (i=0;i<newsList.length;i++)
{
var noRows=nodT.rows.length;
nodT.insertRow(noRows);
var currentRow=nodT.rows[noRows];
var cell=currentRow.insertCell(0);
cell.innerHTML=newsList[i].firstChild.nodeValue;
cell=currentRow.insertCell(1);
cell.innerHTML=new Date();
}
}
}
}
/*scriptul php – latestNews.php*/
function make_seed()
{/*functie preluata de pe php.net [12]*/
list($usec, $sec) = explode(' ', microtime());
return (float) $sec + ((float) $usec * 100000);
}
function getNewsItems()
{/* generez un vector de stiri – in mod normal aceste stiri se iau
din baza de date dar preluarea acestora din baza de date nu face
obiectul acestui document*/
$newsArray=Array();
$newsArray[0]['title']="Bulgaria-Romania 1-0";
$newsArray[1]['title']="Scotia-Italia 1-2";
srand(make_seed());
$goalsB=rand(1,5);
$goalsA=rand(0,3);
/*generez si o stire care sa se schimbe de fiecare data pentru a fi
vizibile modificari in pagina*/
$newsArray[2]['title']="Brazilia-Anglia ".$goalsB."-".$goalsA;
return $newsArray;
}
header('Content-Type: text/xml');
echo'<?xml version="1.0"?>';
echo'<response>';
$news=getNewsItems();

foreach ($news as $newsItem)
{/* construiesc un fisier xml rezultat*/
echo '<newsItem>'.$newsItem['title'].'</newsItem>';
}
echo'</response>';
?>
În fişierul HTML se vor adăuga următoarele linii:
<body onload="xmlCall();">
<!—— Tabel cu 2 coloane, una pentru continut, alta pt data ——>
<table id="t1" border="1">
<tr>
<td>Continut stire</td>
<td>Data aparitiei</td>
</tr>
</table>
<input type="button" onclick="xmlCall();" value="Refresh">
Prima linie specifică faptul că func ia se va apela la încărcarea paginii. În tabelul cu id-ul
„t1” se vor adăuga datele primite de la server. Elementul input permite reîncărcarea tabelului
la dorin a utilizatorului prin apelarea func iei XmlCall (în cazul în care nu este mul umit de
intervalul de timp la care se face reîncărcarea). Pe acest principiu func ionează şi noul Yahoo
Mail Beta – e-mailurile se verifică la un interval stabilit de timp folosind AJAX sau la
apăsarea butonului „Check Mail”.
Aceste două exemple ilustrează puterea tehnologiei AJAX precum şi posibilitatea de a
integra componente externe (YUI) cu AJAX.
Instrumente de dezvoltare
Instrumentele de dezvoltare sunt aceleaşi cu cele alese pentru dezvoltare web –
Eclipse, Dreamweaver, Notepad, etc. Instrumentele ce par însă esen iale pentru dezvoltarea
unei aplica ii ce foloseşte Javascript sunt depanatoarele (debuggerele). Pentru că este un
limbaj de scripting cu tipare dinamică şi datorită diferen elor încă existente între browsere,
erorile se strecoară destul de uşor şi sunt relativ greu de detectat fără instrumentele potrivite.
În timp ce IE are asociat Microsoft Script Debugger, care poate ajuta pentru detectarea
erorilor ce apar sub IE, pentru Firefox trebuie instalat Firebug [13]. În schimb, spre
deosebire de Script Debugger, Firebug rulează în browser şi pe lângă posibilitatea de
depanare (se pot seta breakpoints, watches, etc.) afişează în timpul rulării sau în timpul
afişării unei pagini scriptului o serie de date importante cum ar fi structura DOM a paginii
curente, arborele de elemente HTML, clasele CSS, erorile de sintaxa Javascript într-o
consolă, precum şi conexiunile efectuate împreună cu timpul de încărcare.
Mai jos se pot vedea 2 capturi de ecran cu sec iunea de depanare şi cu sec iunea în care se
prezintă arborele DOM.

Figure 1 Arborele DOM al unei pagini web aşa cum este afişat în Firebug
Figure 2 Fereastra de debugging pentru scripturi Javascript
Concluzii
Javascript reprezintă un limbaj matur pentru dezvoltarea aplica iilor web dinamice.
Avantajele folosirii Javascript în paginile unui sit web sunt: un plus de interactivitate cu
utilizatorul, posibilitatea de a actualiza informa iile de pe pagină în timp real fără a o reîncărca
(folosind Ajax). Printre dezavantajele folosirii Javascript s-ar putea număra: posibilă
comportare neaşteptată în unele browsere, probleme cu motoarele de căutare care nu
indexează întotdeauna paginile generate folosind Ajax.
În general este bine să se folosească Javascript având grijă:
• să se testeze paginile în cele mai importante browsere de pe pia ă şi să fie informat
utilizatorul în cazul în care aplica ia dezvoltată nu este compatibilă cu browserul lor
• să nu se actualizeze folosind Javascript şi Ajax zonele de con inut ale site-ului ce se
doresc a fi indexate de motoarele de căutare
Bibliografie
1. Javascript http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference
2. DOM http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/
3. DOM http://developer.mozilla.org/en/docs/DOM:document
4. DOM http://www.w3schools.com/htmldom/dom_obj_event.asp
5. YUI http://developer.yahoo.com/yui/
6. YUI animation http://developer.yahoo.com/yui/animation/
7. YUI calendar http://developer.yahoo.com/yui/calendar/
8. XMLHttpRequest http://www.w3.org/TR/XMLHttpRequest/
9. Ajax http://www.w3schools.com/ajax/ajax_browsers.asp

10. C. Darie, B. Brînzărea, Filip Cherecheş-Tosa, M. Bucică – „AJAX and PHP: Building
Responsive Web Applications”. Packt Publishing 2006
11. XMLHttpRequest http://developer.mozilla.org/en/docs/XMLHttpRequest
12. PHP http://www.php.net/manual/en/function.srand.php
13. FireBug http://www.getfirebuSg.com/
Copyright poze
1 - http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro4/
2 - http://code.google.com/edu/ajax/tutorials/ajax-tutorial.html

Javascript ajax tutorial

Recommended

More Related Content

Viewers also liked (9)

Similar to Javascript ajax tutorial (20)

More from Vlad Posea (20)

Recently uploaded (17)

Javascript ajax tutorial