| CATEGORII DOCUMENTE |
DEZVOLTAREA UNUI SITE WEB FOLOSIND
CAPITOLUL 1. INTRODUCERE
Unul dintre cele mai importante si de succes servicii ale Internetului, World-Wide Web-ul (mai pe scurt Web sau spatiul WWW), a fost instituit la CERN (Centre Europen pour la Recherche Nuclaire - Centrul European de Cercetari Nucleare de la Geneva) in anul 1989, gratie viziunii lui Sir Tim Berners-Lee.
Acesta, impreuna cu Robert Caillau si o echipa de specialisti, a propus un sistem informatic distribuit, scopul principal urmarit fiind facilitarea accesului rapid la informatiile tehnice cuprinse in manualele de utilizare a calculatoarelor.
In contextul aparitiei Web-ului, trebuie mentionate doua mari directii precursoare: dezvoltarea hipertextului (sau a procesarii computerizate a documentelor electronice complexe) precum si dezvoltarea protocoalelor Internet care au facut posibila comunicarea globala dintre retelele de calculatoare. Dupa unii autori, data de 12 noiembrie 1990 este considerata ziua de nastere oficiala a Web-ului.
Web-ul reprezinta un sistem de distributie locala sau globala a informatiilor hypermedia. Din punct de vedere tehnic, spatiul Web pune la dispozitie un sistem global si standardizat de comunicare multimedia, informatiile fiind organizate asociativ si distribuite in functie de cererile utilizatorilor, functionand conform modelului client/server. Putem vedea Web-ul ca fiind un spatiu informational compus din elemente de interes, denumite resurse, identificate in mod unic de identificatori globali denumiti URI (Uniform Resource Identifiers).
Scopurile originare principale ale spatiului WWW au fost acelea de a oferi o modalitate de comunicare inter-umana prin partajarea cunostintelor si posibilitatea exploatarii in maniera distribuita a puterii de calcul a computerelor conectate la Internet. Una dintre prioritatile Consortiului Web (W3C) - organism care coordoneaza si contribuie la standardizarea tehnologiilor Web - este aceea de a pune la dispozitia utilizatorilor o modalitate, bazata pe XML - Extensible Markup Language, de prelucrare de catre calculator a informatiilor.
Ideea fundamentala ce sta la baza acestei tehnologii este aceea ca spatiul Web-ului sa reprezinte o panza consistenta de relatii stabilite intre obiecte identificabile (in prezent prin identificatori uniformi de resurse, iar ulterior prin nume stabilite de utilizatori), dezvoltarea viitoare a Web-ului fiind focalizata asupra masinilor, nu numai asupra oamenilor.
Perioada de dezvoltare a Web-ului, cuprinsa intre 1990-2004, a fost numita retroactiv (in 2005) Web 1.0.
Termenul Web 2.0 se refera la faza a doua a dezvoltarii Web-ului, si a fost popularizat incepand cu octombrie 2004 de Dale Dougherty si John Battelle prin intermediul unor serii de conferinte. Web 2.0 nu este o tehnologie sau o multime de tehnologii, ci, mai degraba, o noua viziune asupra Web-ului, acesta fiind considerat o platforma dinamica si interactiva, ce ofera utilizatorilor posibilitatea de a colabora si de a schimba informatii online. Acest concept se imbogateste permanent cu noi semnificatii, proces determinat de evolutia continua a Web-ului.
Noua imagine a Web-ului are doua componente. In primul rand, spatiul World Wide Web este vazut ca o platforma in care utilizatorul isi controleaza propriile date. Astfel, site-ul Web se transforma dintr-o sursa de informatii in sursa de servicii pentru utilizatori. In al doilea rand, continutul Web-ului si distribuirea acestuia sunt democratizate. Aceasta componenta inseamna descentralizare, comunicare libera si control sporit exercitat de utilizator, continutul Web-ului iesind de sub monopolul proiectantilor sai. Astfel, Web-ul se apropie de ideea originara a lui Tim Berners-Lee, conform careia acesta trebuie sa reprezinte un mediu democratic si personal de comunicare.
O contributie importanta la dezvoltarea Web
2.0 a fost, si este adusa de
Anul 2005 va ramane in istoria Web-ului ca
anul afirmarii
Este important de inteles ca
Tehnica AJAX utilizeaza urmatoarele tehnologii si limbaje:
HTML/XHTML si CSS (Cascading Style Sheets), pentru prezentarea datelor
DOM (Document Object Model) pentru afisarea dinamica si interactiunea cu datele
XML sau JSON, precum si XSLT (Extensible Stylesheet Language Transformation), pentru schimbul de date si manipularea acestora
Obiectul XMLHttpRequest pentru transferul asincron al datelor
JavaScript pentru procesarea informatiilor.
Ideea fundamentala care sta in spatele tehnicii
Comunicatia asincrona determina un trafic scazut, dar cvasicontinuu intre browser si server, necesitand o largime de banda relativ mica.
Aplicatiile web clasice utilizeaza comunicarea sincrona dintre browser si serverul Web, aceasta desfasurandu-se astfel:
browserul face o cerere HTTP pentru o resursa catre serverul Web
serverul trimite cererea unui program specific, pentru procesare
programul trimite datele procesate serverului Web
serverul trimite browserului datele procesate, in diverse forme.
Dezavantajul major al acestui mod de lucru este acela ca toate componentele unei pagini trebuie actualizate, iar utilizatorul trebuie sa astepte raspunsul serverului dupa fiecare actiune, nefiindu-i permis sa efectueze alte operatiuni. Astfel, orice incercare de actualizare a unei componente, inclusa intr-o pagina, implica stabilirea unei noi conexiuni si reincarcarea completa a paginii. Se poate observa ca acest mod de lucru este mare consumator de timp si de resurse.
Modul de functionare al aplicatiilor Web bazate pe tehnica
foloseste interactiunea la nivel de componenta a paginii
componenta face un apel JavaScript catre procesorul
procesorul
dupa procesare, serverul utilizeaza un anumit format pentru
date, pe care le trimite apoi procesorului
procesorul
Tehnica AJAX este utilizata intr-un numar mare de aplicatii dintre care exemplificam cateva:
A9.com (www.a9.com): motor de cautare ce apartine de Amazon;
AjaxTrans (https://ajax.parish.ath.cx/translator/): site ce ofera posibilitatea traducerii unor cuvinte sau texte in cateva limbi de circulatie;
Colr.org (https://www.colr.org/): un site in care ne putem "juca" folosind culorile;
Flickr (https://www.flickr.com/): site pentru pastrarea, cautarea, sortarea si partajarea imaginilor furnizate de catre utilizatori;
Google Maps (https://maps.google.com): serviciu Google ce ofera informatii referitoare la harti;
Gmail (https://www.gmail.com): serviciu Google pentru managementul mesajelor de posta electronica.
JavaScript este un limbaj creat in scopul extinderii posibilitatilor browserelor Web, adaugandu-le interactivitate. Una dintre cele mai importante utilizari ale acestuia consta in scrierea unor functii inglobate sau incluse in documentele XHTML, care interactioneaza cu arborele DOM al acestora pentru a realiza sarcini care nu pot fi indeplinite folosind numai limbajul de marcare XHTML. Dintre acestea le mentionam pe cele mai des utilizate:
deschiderea unei noi ferestre, pentru care pot fi controlate dimensiunile, pozitia si aspectul;
verificarea sau validarea valorilor introduse intr-un formular HTML, astfel incat acestea sa fie acceptate inainte de a fi trimise serverului Web;
schimbarea sursei unei imagini, atunci cand mouse-ul se afla deasupra acesteia.
Numit la origine Mocha si apoi LiveScript, JavaScript este un limbaj de scripting independent de platforma, creat de Brendan Eich de la Netscape si utilizat pentru prima oara in decembrie 1995 in browserul Navigator 2.0B3 al acestei companii. Actualmente, JavaScript este marca inregistrata Sun Microsystems, Inc. JavaScript este un limbaj de scripting, avand la baza conceptul de prototip. Sintaxa sa este similara cu a limbajului de programare C. In timp ce limbajul C utilizeaza bibliotecile I/O, procesorul JavaScript se bazeaza pe mediul gazda(host environment), in care este inglobat. Cel mai cunoscut mediu gazda este browserul Web, care creeaza obiecte responsabile pentru implementarea DOM in JavaScript. Limbajul JavaScript extins include:
Core JavaScript: nucleul limbajului JavaScript, care contine elementele de baza ale limbajului (operatori, expresii, instructiuni si obiecte predefinite);
Client-Side JavaScript (CSJS): extinde limbajul de baza (Core JavaScript), introducand obiecte utilizate pentru controlul browserului si al modelului obiectului document (DOM) al acestuia;
Server-Side JavaScript (SSJS): extinde limbajul de baza (Core JavaScript), introducand obiecte relevante pentru utilizarea limbajului pe server.
ECMAScript este versiunea standardizata (sub numele ECMA-262) de catre ECMA (European Computer Manufactures Association) si Netscape a limbajelor JavaScript (Netscape) si JScript (Microsoft). Prima editie a ECMAScript a aparut in iunie 1997, a doua in iunie 1998, iar a treia in decembrie 1999. Standardul ECMA-262 este standard ISO (International Organization of Standards), sub numele ISO-162262, incepand din aprilie 1998. Specificatiile ECMAScript bazate pe JavaScript includ numai nucleul acestui limbaj. Versiunile JavaScript (implementate in browserele bazate pe Gecko si in Opera) si JScrip (implementat in browserul Internet Explorer) trebuie sa respecte specificatiile ECMAScript.
In ceea ce priveste relatiile dintre versiunile JavaScript si editiile ECMAScript:
ECMAScript, editia intai, este bazata pe JavaScript 1.1;
JavaScript 1.2 nu este complet compatibil cu ECMAScript, editia intai;
JavaScript 1.3 este complet compatibil cu ECMAScript, editia intai;
JavaScript 1.4 este complet compatibil cu ECMAScript, editia intai;
JavaScript 1.5 este complet compatibil cu ECMAScript, editia a treia.
ECMAScript editia a doua, consta din cateva schimbari minore si eliminarea unor probleme in raport cu editia intai. Versiunea 1.6 a JavaScript (lansata in anul 2005) este inclusa in browserul Firefox 1.5. Aceasta versiune corespunde editiei a treia a ECMAScript, cu cateva exceptii. Versiunea Firefox 2.0 implementeaza JavaScript 1.7. JavaScript este utilizat pe un numar mare de platforme, inclusiv in afara Web-ului. Un numar de companii folosesc JavaScript in cadrul instrumentelor/tehnologiilor proprii, din care se disting:
Adobe Acrobat si Adobe Reader utilizeaza JavaScript in fisierele PDF;
instrumentele incluse in Adobe Creative Suite - inclusiv Photoshop - permit scripting prin JavaScript;
tehnologia Active Scripting (Microsoft), cunoscuta si ca ActiveX Scripting (bazata pe ActiveX/com) suporta limbajul JScript (compatibil cu JavaScript) ca limbaj de scripting;
JScript pentru platforma .NET (Microsoft).
Fiecare dintre aceste instrumente furnizeaza propriul model DOM care permite accesul la mediul gazda, utilizand de fiecare data JavaScript/JScript pentru a manipula acest model. In mod uzual, codul JavaScript este inglobat direct in paginile XHTML, prin intermediul marcajului script, astfel:
<script type="text/javascript">
<!-- <![ // Cod JavaScript
> -->
</script>
Dupa cum se poate constata, codul JavaScript este utilizat in interiorul unei sectiuni CDATA, cu rolul de a permite includerea unor blocuri de text care, altfel, ar fi recunoscute ca marcaje. O alta posibilitate de utilizare a codului JavaScript consta in salvarea lui intr-un document cu extensia js, urmata de includerea acestuia in pagina, ca in exemplul urmator:
<script src="numeFisier.js" type="text/javascript"></script>
Nucleul limbajului JavaScript (Core JavaScript) include elementele de baza ale limbajului: tipuri de variabile si constante, operatori, structuri de control, instructiuni, reguli pentru definirea functiilor si obiectelor, functii si obiecte predefinite etc.
2.2.1 Simboluri Simbolurile sunt cele mai mici cuvinte, expresii sau caractere pe care le poate "intelege" procesorul JavaScript. In cursul procesarii u nui script sunt identificate simbolurile si se ignora spatiile albe si comentariile. Simbolurile utilizate in limbajul JavaScript pot fi incluse in patru categorii: identificatori, cuvinte-cheie, elemente literale si operatori. Identificatorii sunt nume care reprezinta variabile, metode sau obiecte si sunt alcatuiti din caractere alfanumerice, la care se adauga liniuta de subliniere. Unele nume constituie cuvinte-cheie, incluse intr-un set de cuvinte rezervate. Pentru definirea unui identificator trebuie respectate urmatoarele reguli:
un identificator trebuie sa inceapa cu o litera sau cu o liniuta de subliniere;
celelalte caractere incluse in identificator pot fi litere (minuscule si majuscule), cifre (de la 0 la 9) si liniute de subliniere. Rezulta ca identificatorul nu poate contine spatii;
incepand cu versiunea 1.5 a JavaScript identificatorii pot contine caractere Unicode sau secvente escape Unicode, de tipul uXXXX (ex.u0009 pentru tab, u0020 pentru spatiu).
Procesorul JavaScript distinge minusculele de majuscule (limbajul este case-sensitive). Cuvintele-cheie sunt identificatori predefiniti, constituind nume pentru metode, obiecte, structuri de control etc. Acestea sunt incorporate in JavaScript, fiind disponibile intotdeauna pentru utlizatori. Cuvintele rezervate sunt cuvinte-cheie si identificatorii pastrati pentru o posibila utilizare viitoare. Pentru precizarea comentariilor, in JavaScript sunt utilizate doua modalitati, folosite si in limbajele C/C++ si Java. Prima modalitate, care utilizeaza doua caractere slash ( consecutive, este utilizata pentru comentarii pe un singur rand. A doua modalitate, utilizata pentru blocuri mari de comentarii, utilizeaza secventele si la inceputul, respectiv sfarsitul unui astfel de bloc. Elementele literale sunt numere sau siruri folosite pentru a reprezenta valori fixe. Acestea nu se modifica in cursul executiei scripturilor. Tipuri de elemente literale:
numar intreg: elementele literale de acest tip pot fi exprimate in format zecimal, octal sau hexazecimal;
virgula mobila: elementele literale de acest tip reprezinta numere zecimale reale;
valoare booleana: elemente literale booleene sunt true si false
sir: un element literal de tip sir este format din zero, unul sau mai multe caractere incadrate de ghilimele simple ( ' ' ) sau duble ( ' ');
tablou: un element literal de tip tablou (array) reprezinta o lista inclusa intre paranteze patrate ([ ]), formata din zero sau mai multe expresii separate prin virgula;
obiect: un obiect literal este o lista formata din niciuna sau mai multe perechi de nume de proprietati si valori asociate ale unui obiect, incluse intre acolade ().
Operatorii sunt identificatori care reprezinta modalitati de evaluare sau manipulare a combinatiilor de expresii.
2.2.2 Valori, variabile si constante
Valori Valorile utilizate in limbajul JavaScript au urmatoarele tipuri de date:
numere (number);
valori logice (boolean), acestea putand fi true sau false
siruri (string);
null (cuvant-cheie care specifica o valoare nula) este o valoare primitiva;
undefined (proprietate care arata ca unei variabile nu i-a fost atribuita inca o valoare) este, de asemenea, o valoare primitiva.
Spre deosebire de alte limbaje, JavaScript este un limbaj cu tipuri dinamice, ceea ce inseamna ca nu este necesar sa se specifice tipul unei variabile atunci cand aceasta este declarata si ca tipul datelor este convertit automat pe durata executiei scripturilor. In expresiile care implica siruri si valori numerice impreuna cu operatorul +, valorile numerice sunt convertite automat in siruri, ca in exemplele urmatoare:
X= "varsta mea este " intoarce "varsta mea este 42" y= 42 + " este varsta mea" // intoarce "42 este varsta mea"
Variabile O variabila este numele simbolic atribuit unei locatii din memoria calculatorului unde sunt stocate date. Pentru a utiliza datele stocate in locatie, se foloseste numele (identificatorul) variabilei. Variabilele pot fi declarate in doua moduri:
prin atribuirea unei valori (ex., x = 42
prin utilizarea cuvantului-cheie var (ex., var x sau var x = 42).
Variabilele declarate fara var sunt globale in intreg programul.
Daca o variabila este declarata in
interiorul unei functii, ea este numita locala, fiind accesibila numai in
cadrul functiei , doar daca se
foloseste var. Variabila este creata de fiecare data cand functia este
apelata, fiind distrusa la incheierea executiei functiei. Astfel, este posibil
ca in functii diferite sa se declare variabile cu acelasi nume, acestea
utilizand blocuri de memorie diferite. O variabila careia nu i-a fost
atribuita nici o valoare are valoarea undefined. Rezultatul
evaluarii acestei variabile depinde de modul in care a fost declarata aceasta.
Astfel, daca variabila a fost declarata fara cuvantul-cheie var, va rezulta o
eroare de executie. Daca pentru declararea variabilei a fost utilizat
cuvantul-cheie var, va rezulta o valoare nedefinita sau
Constante Constantele
pot fi numai citite, neexitand posibilitatea modificarii valorii acestora sau
redeclararii lor in cursul executiei scriptului in care au fost declarate.
Pentru declararea unei constante se foloseste cuvantul-cheie const si se utilizeaza
sintaxa valabila pentru identificatori. Domeniul
de accesibilitate este acelasi cu al variabilelor, cu exceptia faptului ca este
necesara utilizarea cuvantului-cheie const, chiar si pentru constantele
globale. Daca acest cuvant lipseste, se presupune ca a fost utilizat
cuvantul-cheie var. Nu pot fi declarate o
2.2.3 Expresii si operatori
Expresii O expresie este un set valid de variabile, elemente literale si operatori. Ca rezultat al evaluarii unei expresii se obtine o valoare de tip scalar. Exista doua categorii de expresii:
cele care atribuie o valoare unei variabile (ex., x = (4+5)*6
cele care au o valoare (ex.,
Operatori Operatorii utilizati in JavaScript sunt incadrati in urmatoarele categorii:
operatori de comparatie:
o egal (
o inegal (
o strict egal (
o strict inegal (
o mai mare (>
o mai mare sau egal (>=
o mai mic (<
o mai mic sau egal (<=).
operatori aritmetici:
o modul (
o incrementare (
o decrementare (
o negatie (
o operatori de atribuire.
operatori pe biti:
o AND (x & y
o OR (x | y
o NOT (~x
o deplasare la stanga (x << y
o deplasare la dreapta (x >> y
o deplasare la dreapta cu adaugare de zerouri (x >>> y).
operatori logici:
o AND logic (expr1 && expr2
o OR logic (expr1 || expr2
o NOT logic (!expr
operatori pentru siruri:
o operatorul conditional (conditie ? val1 : val2
o operatorul virgula (
o operatorul de stergere (delete
o exista in (in
o instanta a (instanceof
o nou (new
o acesta (this
o avand tipul (typeof
o void (void
2.2.4 Instructiuni
Intre scopurile urmarite prin introducerea instructiunilor in limbajele de programare se numara controlul programelor, reducerea cantitatii de cod utilizat si evitarea introducerii repetate a acelorasi comenzi. Limbajul JavaScript permite utilizarea urmatoarelor tipuri de instructiuni:
de tip bloc;
de control (conditionale);
de ciclare;
pentru manipularea obiectelor;
pentru lansarea, prinderea si manipularea exceptiilor.
Instructiunea bloc Aceasta instructiune este utilizata pentru a grupa alte instructiuni. Un bloc (grup) de instructiuni este delimitat utilizand o pereche de acolade ( ).
Instructiuni conditionale Instructiunile conditionale determina executia unei instructiuni sau a unui set de instructiuni daca este indeplinita o anumita conditie. In JavaScript sunt utilizate doua tipuri de instructiuni conditionale: if si switch Instructiunea if este utilizata pentru a executa un grup de instructiuni atunci cand o conditie logica ia valoarea true. Clauza else este optionala, determinand, in situatia in care conditia logica ia valoarea false, executia altui grup de instructiuni:
if (conditie)
[else ] Instructiunea switch permite unui program sa evalueze o expresie si sa incerce sa potriveasca valoarea expresiei la o eticheta (label). Daca se realizeaza potrivirea, programul executa instructiunile asociate etichetei.
switch (expresie) Daca nu este gasita nicio potrivire, printre etichetele eticheta1 eticheta2 , pentru expresia expresie, programul cauta declaratia default si executa instructiunile asociate acesteia.
Instructiuni de ciclare Instructiunile de ciclare determina executia repetata a unui set de instructiuni, atat timp cat este indeplinita o conditie specificata. In grupul lor sunt incluse for while do while break label si continue. Desi break si label nu sunt propriu-zis instructiuni de ciclare, ele sunt frecvent utilizate impreuna cu acest tip de instructiuni. Din acest motiv le vom include in acelasi grup. Instructiunea for este utilizata pentru realizarea unui ciclu intr-un script. Instructiunile incluse in ciclu sunt executate repetitiv, pana cand o expresie specificata este evaluata la valoarea false. Sintaxa utilizata pentru aceasta instructiune este urmatoarea:
for ([expresieInitializare]; [conditie]; [expresie]) Instructiunea while este similara cu instructiunea for, dar nu include in declaratia ei expresiile de initializare si de modificare a valorii contorului. Sintaxa acestei instructiuni este urmatoarea:
While (conditie) Instructiunea do while se executa similar cu instructiunea while, cu exceptia faptului ca expresia conditionala se verifica dupa iteratie si nu inaintea acesteia. Rezulta ca, in mod obligatoriu, grupul de instructiuni grup va fi executat cel putin o data, spre deosebire de instructiunea while, in cazul careia este posibil ca grupul de instructiuni sa nu fie executat niciodata. Sintaxa este urmatoarea:
do while (conditie) Instructiunea break intrerupe definitiv executia unui ciclu for while do while sau a unei instructiuni switch, transferand controlul instructiunii urmatoare incluse in script. Instructiunea continue, spre deosebire de break, sare peste instructiunile urmatoare ramase eventual in ciclul for while sau do while si evalueaza expresia conditionala. Instructiunea label poate fi plasata inaintea oricarei instructiuni care poate imbrica alte instructiuni, ceea ce ofera posibilitatea iesirii dintr-o instructiune conditionala sau dintr-un ciclu.
Instructiuni pentru lansarea, prinderea si manipularea exceptiilor Instructiunea throw este utilizata pentru a initia (lansa) o exceptie. Cand se lanseaza o exceptie, trebuie specificata o valoare pentru aceasta. Instructiunea try catch este alcatuita dintr-un bloc try in care trebuie incluse instructiunile care se doresc a fi monitorizate in vederea depistarii unei posibile exceptii si zero, unul sau mai multe blocuri catch, in care sunt incluse instructiuni care precizeaza ce trebuie facut atunci cand o anumita exceptie apare in blocul try
2.2.5 Functii O functie reprezinta o secventa de cod, scrisa intr-un limbaj de programare, care realizeaza o anumita operatie si care poate fi apelata in mod repetat. Se poate spune ca o functie reprezinta un set de instructiuni care realizeaza o sarcina specifica. Desi o functie trebuie implementata o singura data, ea poate fi apelata de cate ori este necesar. Din punctul de vedere al modalitatilor de definire, functiile sunt de doua feluri:
functii definite de utilizator;
functii predefinite.
Functii definite de utilizator
Definitia unei functii JavaScript consta din cuvantul-cheie function, urmat de numele functiei, o lista de argumente inclusa intre paranteze rotunde si separate prin operatorul virgula si un bloc de instructiuni (corpul functiei) inclus intre acolade. Sintaxa utilizata pentru declararea unei functii este urmatoarea:
Function numeFunctie([arg1][,argN]) Functiile pot intoarce sau nu valori. Pentru a specifica valoarea intoarsa de o functie se utilizeaza cuvantul-cheie return Definirea unei functii nu presupune executia acesteia. Pentru a fi executata, o functie trebuie apelata. O categorie importanta de functii este reprezentata de functiile recursive. O astfel de functie se apeleaza pe ea insasi.
Functii predefinite Limbajul
JavaScript include functii predefinite de nivel inalt, care nu sunt asociate
vreunui obiect. Aceste functii sunt: eval(),
isFinite(), isNaN(), parseInt(), parseFloat(), Number(), String(), encodeURI(),
decodeURI(), encodeURIComponent() si decodeURIComponent(). Functia eval() evalueaza un sir
care reprezinta o portiune de cod JavaScript. Sintaxa utilizata pentru apelul
functiei este eval(sir) Functia isFinite()evalueaza un
argument pentru a determina daca este un numar finit. Sintaxa utilizata pentru
apelul functiei este isFinite(numar). Functia
isNaN()evalueaza
argumentul primit pentru a stabili daca este "
Inainte de a deveni specificatie a Consortiului Web, modelul DOM a avut o lunga istorie. Istoria acestui model este intrinsec legata de evolutia navigatoarelor Web, in special a celor create de firmele Netscape si Microsoft. Pentru a caracteriza evolutia modelului DOM, atat din punct de vedere istoric, cat si din cel al posibilitatilor de utilizare, se folosesc termenii DOM Level 0, DOM intermediar si DOM avansat.
2.3.1 DOM Level 0 Modelul DOM a fost introdus pentru prima oara ca DOM Level 0 (DOM de nivel 0) in browserul Netscape 2, odata cu suportul pentru limbajul JavaScript. Intentia avuta in vedere la crearea DOM a fost ca modelul sa ofere acces la unele elemente si atribute ale lor, incluse in documentele HTML. DOM de nivel 0 a fost introdus apoi in versiunea a treia a browserelor Netscape si Internet Explorer. Acest DOM mai este cunoscut sub numele de DOM clasic sau DOM JavaScript traditional. Pentru motive legate de compatibilitate, chiar si cele mai moderne browsere (inclusiv cele care suporta DOM Level 1) asigura in continuare suportul pentru DOM de nivel 0. In DOM, documentul HTML este vazut ca un arbore de noduri - obiect. Structura DOM de nivel 0 este simpla. In varful arborelui DOM se afla obiectul document. Acesta ofera posibilitatea accesului la imagini, formulare, legaturi, ancore si applet-uri, prin intermediul colectiilor de obiecte care le reprezinta.
2.3.2 DOM intermediar Ulterior modelului DOM de nivel 0 au fost utilizate DOM-uri intermediare. Acestea sunt modele proprietate, dezvoltate de catre firmele Netscape si Microsoft. Spre deosebire de DOM de nivel 0, care asigura accesul la un numar limitat de elemente HTML, DOM-urile intermediare, implementate incepand cu versiunea 4 a browserelor Navigator si Internet Explorer, aveau ca scop realizarea accesului la toate elementele HTML. Modelul DOM intermediar propus de Netscape a fost inclus in Navigator 4. Modelul utilizeaza conceptul de strat (layer) ca si concept fundamental. In aceasta versiune a navigatorului este introdus elementul layer, care nu este suportat de alte browsere. Spre deosebire de alte DOM-uri, pentru a avea acces la un formular, imagine etc. este necesar ca mai intai sa se obtina accesul la stratul care include elementele respective. Acest DOM a fost abandonat in versiunile urmatoare ale navigatorului Netscape. Modelul DOM intermediar propus de Microsoft a fost inclus in browserul Internet Explorer, incepand cu versiunea a patra a acestuia. De asemenea, browserul Opera, incepand cu versiunea 6, suporta modelul amintit. In cadrul acestuia, obiectul document.all ofera acces la elementele documentului. Pentru compatibilitate, acest model a fost inclus in versiunile urmatoare ale browserului Internet Explorer. Pentru a-l deosebi de noul DOM (DOM Level 1) utilizat incepand cu versiunea 5 a browserului Internet Explorer, Microsoft se refera la acest DOM ca la DHTML Object Model.
2.3.3 DOM avansat Prin DOM avansat se intelege DOM-ul standardizat de Consortiul Web. Acesta ofera programatorilor, printre altele, posibilitatea de a naviga in documentele XML si HTML si de a le manipula (DOM Level 1), de a modifica stilurile utilizate in aceste documente (DOM Level 2) si de a valida documentele respective (DOM Level 3). DOM Level 1 (DOM de nivel 1) este un real avantaj, deoarece, pentru prima data, un DOM ofera nu numai un model pentru intregul document HTML sau XML ci ofera posibilitatea de a schimba documentul on fly, prin modificarea unor parti (inclusiv stergerea lor) si adaugarea altora noi. Atat Microsoft, cat si Netscape au participat la elaborarea specificatiilor noului DOM. Aceste companii au cautat sa asigure suport pentru noul DOM in browserele lor, incepand cu versiunea 5 a acestora. Microsoft a continuat sa ofere suport in toate versiunile browserului Internet Explorer pentru DOM-ul sau intermediar (bazat pe document.all). Tinand seama ca Internet Explorer ofera suport si pentru DOM de nivel 0 rezulta ca acest browser suporta trei modele DOM. Pe de alta parte, browserul Mozilla este un proiect open source dezvoltat de Mozilla Project, care a decis eliminarea DOM-ului intermediar Netscape (bazat pe obiectul document.layers DOM de nivel 1 este suportat de majoritatea browserelor, dintre care amintim Mozilla, Internet Explorer 5+, Opera 5+.
DOM este o interfata de programare a aplicatiilor destinata prelucrarii documentelor XML si HTML, independenta de platforma si limbaj. Aceasta interfata furnizeaza o reprezentare structurala a unui document, oferind posibilitatea modificarii dinamice a continutului, a structurii si a stilurilor acestuia, prin intermediul programelor. Pana in prezent exista trei niveluri de specificare a DOM:
nivelul 1 (DOM Level 1) defineste un nucleu de functionalitati (DOM Core) pentru procesarea documentelor XML si o extensie (DOM HTML) pentru procesarea documentelor HTML;
nivelul 2 (DOM Level 2) extinde si modularizeaza functionalitatile DOM in urmatoarele sase specificatii:
o DOM Core (defineste functionalitatile de baza);
o DOM Views (asigura suport pentru vizualizarea continutului);
o DOM Events (furnizeaza suport pentru specificarea evenimentelor);
o DOM Style (asigura suport pentru reprezentarea foilor de stil);
o DOM Traversal and Range (asigura posibilitatea traversarii documentelor);
o DOM HTML (introduce suportul necesar pentru prelucrarea documentelor HTML si XHTML).
nivelul 3 (DOM Level 3) ofera un set extins de functionalitati, fiind inclus in diverse module. Nivelul este partial standardizat (modulele DOM Core, DOM Load and Save si DOM Validation), unele module fiind in curs de dezvoltare (DOM XPath, DOM Requirements, DOM Views and Formatting, DOM Events si DOM Abstract Schemas).
2.5.1 Noduri DOM in documentele HTML Componentele unui document HTML sunt reprezentate in DOM-ul unui document prin obiecte numite noduri. Acestea sunt instante ale obiectelor generice care implementeaza in JavaScript interfetele DOM. In arborii DOM asociati documentelor HTML, se utilizeaza urmatoarele tipuri de noduri:
Element (element, ): reprezinta elementele HTML;
Attr (atribut, ): reprezinta atributele HTML;
Text (text, ): reprezinta un fragment de text inclus intr-un element HTML nevid;
Comment (comentariu, ): reprezinta un comentariu HTML;
Document (document, ): reprezinta elementul radacina, adica html
DocumentType (tip de document, ): reprezinta definitia tipului de document.
Cele mai des utilizate tipuri de noduri sunt element, atribut si text. In subarborele DOM, care corespunde secventei de cod HTML prezentata in exemplul urmator, sunt continute doua noduri:
<p>Acesta este un paragraf</p>
Cele doua noduri sunt nodul element, reprezentand elementul HTML p si nodul text, avans continutul 'Acesta este un paragraf'. Nodul text este in interiorul nodului element, astfel incat el constituie un nod copil (descendent direct) al acestuia. In consecinta, nodul element este nodul parinte al nodului text.
<p>Acesta este <b>numai</b> un paragraf</p> In subarborele DOM care corespunde secventei anterioare de cod, nodul element reprezentand elementul HTML p are trei copii: nodul text avand continutul 'Acesta este', nodul element b si nodul text avand continutul 'un paragraf'. Cei trei copii sunt frati. In raport cu nodul element b, nodul text avand continutul 'Acesta este'este fratele anterior (previous sibling), iar nodul text avand continutul 'un paragraf'este fratele urmator (next sibling). Nodul text avand continutul 'Acesta este' este primul copil (first child) al nodului element p, iar nodul text avand continutul 'un paragraf'este ultimul copil (last child) al nodului element p. La randul sau, nodul element reprezentand elementul HTML b are drept copil nodul text avand continutul 'numai'. Acest din urma nod text este un descendent indirect al nodului element asociat elementului HTML p Elementele HTML pot avea atribute, reprezentate si ele ca noduri obiect in arborele DOM. Cu toate acestea, se considera ca un obiect atribut nu apartine arborelui de noduri obiect al documentului. Mai degraba, atributele sunt vazute ca proprietati ale nodurilor element. In exemplul urmator se utilizeaza doua atribute:
<p id="primul" align="center">Acesta este <b>numai</b>
un paragraf</p> In subarborele DOM care corespunde secventei anterioare de cod HTML, nodul element corespunzator lui p are asociate nodurile atribut care corespund atributelor id si align ale elementului respectiv.
2.5.2 Obtinerea nodurilor
Obtinerea nodurilor element Metoda getElementsByTagName()intoarce un tablou care contine toate nodurile de un anumit tip incluse in arborele DOM. In exemplul urmator, este obtinut nodul b
var nodB = document.getElementsByTagName('b')[0]; O alta modalitate de obtinere a nodului respectiv este urmatoarea:
var nodB = document.getElementsByTagName('p')[0].lastChild; Utilizarea metodei getElementsByTagName()poate determina aparitia unor erori in urma precizarii gresite a indecsilor. Metoda care ofera o siguranta maxima, dar si cea mai simpla modalitate pentru obtinerea unui nod inclus in arborele DOM este getElementById(). Utilizarea acestei metode presupune ca elementul HTML sa aiba un identificator unic asociat, ca in exemplul urmator:
<p id="primul" align="center">
Acesta este un <b id="elbold">paragraf</b>
</p> In aceste conditii, nodul p va putea fi obtinut astfel:
var nodP = document.getElementById('primul');
iar nodul b va fi obtinut astfel:
var nodB = document.getElementById('elbold'); Pentru obtinerea nodurilor element pot fi utilizate si proprietatile nextSibling si previousSibling ale interfetei Node. Prima proprietate intoarce nodul imediat urmator nodului curent, iar cea de-a doua intoarce nodul imediat anterior nodului curent.
Obtinerea nodurilor atribut Nodurile atribut pot fi obtinute utilizand metoda getAttributeNode()a interfetei Element. In exemplul urmator este obtinut nodul care corespunde atributului align al elementului p
var noduriP = document.getElementsByTagName('p');
var atribut = noduriP[0].getAttributeNode('align');
Obtinerea nodurilor text Pentru obtinerea nodurilor text se utilizeaza proprietatile interfetei Node firstChild lastChild). In exemplul urmator se obtine nodul text ce are continutul 'Acesta este un' Nodul text amintit este primul copil al nodului element p avand identificatorul 'primul'
var textCurent = document.getElementById('primul').firstChild;
2.5.3 Adaugarea si eliminarea nodurilor
Crearea si adaugarea nodurilor Pentru crearea unui nod element se utilizeaza metoda createElement()a interfetei Document Pentru crearea unui nod text se utilizeaza metoda createTextNode()a interfetei Document Pentru crearea unui nod atribut se utilizeaza metoda createAttribute() Pentru adaugarea unui nod se foloseste metoda appendChild()a interfetei Node. Pe langa aceasta metoda, mai poate fi utilizata si metoda insertBefore()a interfetei Node
Eliminarea nodurilor Pentru a elimina un nod element se utilizeaza metoda removeChild()a interfetei Node Pentru a elimina un nod atribut se utilizeaza metoda removeAttribute()a interfetei Element Pe langa aceasta metoda, mai poate fi utilizata si metoda removeAttributeNode()a interfetei Element (cu exceptia browserului Internet Explorer).
2.5.4 Accesarea si modificarea regulilor de stil inline Informatiile de stil inline atasate unui element sunt accesate prin atributul style al elementului. Acestui atribut ii corespunde in DOM interfata ElementCSSInlineStyle. Interfata nu are metode, iar singura proprietate este style, avand tipul CSSStyleDeclaration. Prin intermediul acestei proprietati pot fi consultate/schimbate stilurile utilizate de toate elementele incluse intr-un document HTML. Pentru scrierea proprietatilor de stil in declaratiile CSS se utilizeaza asa-numita dash notation (cuvinte componente separate prin cratima; ex., font-style). In JavaScript se utilizeaza asa-numita camel notation (primul cuvant este scris cu minuscula, iar celelalte cu majuscula; ex., fontStyle). In exemplul urmator se modifica o proprietate CSS a elementului HTML p:
// Se localizeaza paragraful
para = document.getElementById('par1');
// Se modifica atributul CSS font-style
para.style.fontStyle = 'italic'; In general, o proprietate CSS a unui element se poate stabili/modifica utilizand una dintre constructiile urmatoare:
document.getElementById('id').style.numeStil = 'valoare';
document.getElementsByTagName('tag')[index].style.numeStil='valoare'
unde numeStil este numele proprietatii CSS care urmeaza a fi modificata, iar 'valoare' este noua sa valoare. DOM furnizeaza si o modalitate pentru a schimba stilurile utilizate de elementele HTML, modificand atributul class al acestora, astfel:
element.className = 'numeClasaNoua';
Obiectul XMLHttpRequest este o interfata de programare a aplicatiilor (Application Programming Interface) care permite scripturilor sa realizeze functionalitati ale unui client HTTP, ca de exemplu trimiterea datelor incluse in formulare sau incarcarea datelor stocate pe un site Web. Obiectul XMLHttpRequest are o serie de metode si proprietati (atribute) definite in specificatia publicata de Consortiul Web.
3.1.1 Metode Metodele obiectului XMLHttpRequest sunt urmatoarele:
open(metoda, url[, async[, utilizator[, parola]]]): initializeaza o cerere HTTP catre serverul Web, seteaza proprietatea readyState la valoarea 1(Open), reseteaza proprietatile responseText responseXML status si statusText la valorile lor initiale si reseteaza lista anteturilor cererii. Daca metoda este apelata in situatia in care valoarea proprietatii readyState este 4 (Loaded), atunci obiectul XMLHttpRequest va fi resetat. Primeste ca argumente metoda (metoda, de tip DOMString) care va fi utilizata de cerere, URL-ul (url, de tip DOMString) folosit pentru conexiunea cu serverul si alti parametrii ai cererii curente. Primii doi parametrii sunt obligatorii. Metodele care pot fi utilizate sunt cele ale protocolului HTTP. Cel mai des utilizate sunt GET (daca se intentioneaza obtinerea unor date de pe server), POST (daca se doreste trimiterea datelor pe server sau daca se doreste modificarea sau crearea resurselor pe server) si HEAD (daca se doreste obtinerea anteturilor unei resurse). Al treilea parametru (async, de tip boolean) este optional si precizeaza daca tranzactiile cu serverul trebuie manipulate sincron sau asincron. Ceilalti doi parametrii optionali (avand fiecare valoarea implicita null) sunt numele de utilizator (utilizator, de tip DOMString) si parola (parola, de tip DOMString), utilizati in cazul in care conectarea la server necesita autentificare. Metoda nu genereaza exceptii;
send([data]): transmite cererea catre server. Aceasta poate avea, optional, date incluse ca un parametru (data), sub forma unui sir sau a unui obiect DOM. Daca proprietatea readyState are o valoare diferita de 1 (Open), va fi generata o exceptie INVALID_STATE_ERR. Altfel, proprietatea respectiva trebuie sa fie setata la valoarea 2 (Sent), cererea fiind trimisa. Daca metoda utilizata in cerere este POST sau PUT, datele plasate metodei send() (argumentul data) vor fi utilizate in corpul mesajului HTTP;
abort(): opreste cererea curenta. Cand este invocata, metoda trebuie sa anuleze orice activitate de transmitere de date pentru care este responsabil obiectul si sa il reseteze. Metoda nu primeste parametrii, nu intoarce nicio valoare si nu genereaza exceptii;
getAllResponseHeaders(): intoarce sub forma unui sir de caractere setul complet de anteturi HTTP (nume si valori) ale unei resurse, fiecare antet fiind plasat pe o linie separata de celelalte prin perechea CR si LF. Daca proprietatea readyState are o alta valoare decat 3 (Receiving) sau 4 (Loaded), metoda intoarce null. Aceasta metoda nu primeste argumente si nu genereaza exceptii;
getResponseHeader(antet): intoarce sub forma unui sir de caractere valoarea antetului antet (de tip DOMString) inclus in anteturile HTTP ale raspunsului serverului. Daca au fost primite mai multe valori ale unui antet avand numele precizat, acestea sunt concatenate, separate unul de celalalt prin caracterul virgula urmat de caracterul spatiu. Daca nu exista niciun antet avand numele specificat, metoda intoarce un sir vid. In cazul in care proprietatea readyState are o valoare diferita de 3 (Receiving) sau 4 (Loaded), va intoarce un sir vid. Metoda nu genereaza exceptii;
setRequestHeader(antet, valoare): seteaza un antet HTTP al cererii curente. Daca atributul readyState are o valoare diferita de 1 (Open), va fi generata o exceptie UNKNOWN_ERR. Daca argumentele antet sau valoare contin oricare dintre caracterele CR sau LF, sau daca argumentul antet contine oricare dintre caracterele spatiu sau doua puncte, apelul metodei nu va avea niciun efect. Daca antetul antet a fost deja trimis, noua valoare va fi concatenata cu valoarea existenta, utilizand caracterul virgula urmat de spatiu. Inainte de a fi apelata aceasta metoda, trebuie utilizata metoda open()
3.1.2 Proprietati Dupa trimiterea cererii, pot fi utilizate proprietatile instantei obiectului XMLHttpRequest:
onreadystatechange (Function): ofera o modalitate de tratare a evenimentului readyState la fiecare schimbare a starii acestuia. Astfel, prin intermediul acestei proprietati poate fi precizata o functie pentru procesarea raspunsului serverului (callback). Se pot efectua apeluri multiple ale functiei, daca atributul readyState are valoarea 3 (Receiving);
readyState unsigned short), readonly: se precizeaza ca un intreg care indica starea obiectului XMLHttpRequest. Valorile sale sunt: 0 (Uninitialized; neinitializat: obiectul a fost creat, dar metoda open()nu a fost apelata), 1 (Open; cererea este in curs de incarcare: obiectul afost creat, conexiunea deschisa, dar metoda send()nu a fost apelata), 2 (Sent; cererea a fost trimisa: metoda send()a fost apelata, proprietatea status este disponibila, dar raspunsul serverului inca nu a fost primit), 3 (Receiving; interactiv: o parte din rezultate au fost primite; acestea pot fi obtinute utilizand proprietatea responseText) si 4 (Loaded; cererea este rezolvata: toate rezultatele au fost primite, ele fiind disponibile ca valoare a proprietatii responseText
responseText DOMString): are ca valoare, sub forma unui sir, datele intoarse de server. Daca readyState are o valoare diferita de 3 (Receiving) sau 4 (Loaded), valoarea sa va fi un sir vid. In celelalte cazuri va fi corpul datelor primite, interpretate conform codificarii precizate in raspuns;
responseXML Document): include datele intoarse de server sub forma unui document XML, care poate fi prelucrat ulterior. Daca readyState are o valoare diferita de 4 (Loaded), proprietatea are valoarea null
status unsigned short): daca proprietatea readyState are valoarea 3 (Receiving) sau 4 (Loaded), status contine un cod numeric de raspuns intors de server la cererea emisa de client, acesta fiind chiar codul de stare HTTP. Daca readyState are o alta valoare, proprietatea status nu este disponibila, accesarea ei generand o exceptie INVALID_STATE_ERR
statusText DOMString): daca proprietatea readyState are valoarea 3 (Receiving) sau 4 (Loaded), statusText are ca valoare, sub forma de sir, un mesaj explicativ de raspuns intors de server la cererea emisa de client, in acord cu codul numeric precizat de proprietatea status. Daca readyState are o alta valoare, proprietatea statusText nu este disponibila, accesarea ei generand o exceptie INVALID_STATE_ERR.
Microsoft a implementat obiectul IXMLHTTPRequest in MSXML incepand cu versiunea 2.0 a acestei interfete de programare. Acesta este utilizat in Internet Explorer (incepand cu versiunea 5 a acestui browser) ca un obiect ActiveX. Spre deosebire de versiunile anterioare (5 si 6), Internet Explorer 7 implementeaza XMLHttpRequest ca un obiect nativ JavaScript. In cadrul proiectului Mozilla s-a realizat o implementare nativa a obiectului incepand cu Mozilla 1.0 si Netscape 7, precum si in Mozilla Firefox. Apple a realizat acelasi lucru incepand cu Safari 1.2. Browserul Opera permite folosirea obiectului XMLHttpRequest incepand cu versiunile 7.6 (partial) si 8.0 (complet). Crearea unei instante a obiectului XMLHttpRequest IXMLHTTPRequest se face in mod diferit, in functie de browserul instalat in sistem. Astfel, pentru browserele Mozilla, Firefox, Opera si Internet Explorer 7, in care XMLHttpRequest este obiect nativ, se utilizeaza un apel al functiei constructor (conform specificatiilor W3C), ca in exemplul urmator:
var cerere = new XMLHttpRequest();
Pentru Internet Explorer 5 si 6, in care IXMLHTTPRequest este un obiect ActiveX, se transmite numele obiectului catre constructorul ActiveX:
var cerere = new ActiveXObject("Msxml12.XMLHTTP");
var cerere = new ActiveXObject("Microsoft.XMLHTTP");
Indiferent de browserul utilizat, metoda constructor intoarce un obiect abstract ale carui metode controleaza comunicarea dintre browser si serverul Web. Proprietatile obiectului intors de constructor furnizeaza datele returnate de server, precum si informatii de stare. Deoarece instantierea obiectului se face diferit, in functie de tipul browserului, la prima vedere ar rezulta ca - pentru folosirea tehnicii AJAX - ar trebui scrise scripturi JavaScript diferite pentru browsere diferite. Se poate evita acest lucru, punand la inceputul oricarui script care foloseste obiectul XMLHttpRequest secventa urmatoare, care genereaza o instanta a acestui obiect indiferent de tipul browserului utilizatorului si, in plus, realizeaza tratarea erorilor:
var cerere;
try catch (e) catch (e)
if(!cerere && typeof XMLHttpRequest != 'undefined') catch (e)
Ca oricare alta
aplicatie Web, o aplicatie
validarea in timp real a datelor introduse in campurile formularelor: anumite date introduse intr-un formular (ex., identificatori, coduri postale, numere seriale) care necesita validare pe server pot fi supuse acestui proces inainte ca utilizatorul sa determine trimiterea intregului continut;
autocompletare: o data introdusa intr-un camp al unui formular (ex., adresa de e-mail, nume) poate fi completata automat, odata ce utilizatorul a introdus primele caractere ale acesteia;
actualizarea datelor incluse in diverse fragmente ale paginii: tabele, reprezentari grafice, diagrame etc.;
notificari ale serverului: pot fi determinate notificari din partea serverului catre client realizate prin diverse mesaje, precum si reimprospatarea datelor sau redirectari;
construirea unor interfete cu utilizatorul sofisticate: pot fi realizate diverse controale (ex., meniuri, arbori, bare de progres) care vor fi utilizate fara reimprospatarea intregii pagini.
Dupa cum se stie, exista posibilitatea ca, pe anumite site-uri, sa se creeze conturi de utilizator. Acestea necesita, de obicei, un nume de cont de utilizator si o parola. Numele de cont trebuie sa fie unic, desemnand un anumit individ. Pentru crearea contului, utilizatorul va trebui sa introduca intr-un formular de inscriere datele dorite: numele contului si parola. Inainte de crearea contului, trebuie sa se verifice pe server daca exista deja un cont avand numele propus. In acest caz, utilizatorul va fi indrumat sa aleaga un alt nume. Verificarea existentei numelui de cont se poate realiza utilizand doua metode:
metoda clasica presupune transferul sincron al datelor; dupa completarea tuturor campurilor formularului de inscriere, datele sunt trimise serverului, dupa ce utilizatorul apasa butonul de tip submit; pe server se consulta baza de date care stocheaza datele de identificare ale conturilor utilizatorilor si se trimite clientului un nou document XHTML, care il instiinteaza ca numele de cont este deja utilizat sau ca noul cont a fost creat; aceasta metoda este consumatoare de timp si de resurse, atat pe server cat si pe client;
metoda bazata pe AJAX, care presupune transferul asincron al datelor; in felul acesta, utilizatorul va afla daca numele de cont propus de el este valid sau nu, imediat dupa ce il introduce in campul corespunzator al formularului, nefiind nevoie sa completeze intai toate campurile si sa trimita continutul respectiv serverului.
Se va ilustra
utilizarea metodei
<?xml version="1.0"?>
<utilizatori>
<utilizator>
<nume>traian</nume>
<parola>544ed92acfd99fb2dbfd8ed2f6da4023</parola>
</utilizator>
<utilizator>
<nume>dorina</nume>
<parola>9330ebddb3064feb55c73f76ed7d106c</parola>
</utilizator>
</utilizatori>
Fiecarui utilizator ii este alocat un element utilizator, care are drept copii elementele nume si parola Continutul fisierului inscriere.html, care include formularul de inscriere in care utilizatorul va introduce datele de identificare dorite ale viitorului sau cont, este urmatorul:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<script src="functii.js" type="text/javascript"></script>
<style type="text/css">
.eroare
.ascuns
</style>
</head>
<body>
<form action="creeaza_cont.php" method="post">
Nume de cont:
<input type="text" name="nume"
onblur="javascript:verificaNume(this.value,'')" />
<span class="ascuns" id="existaEroare">
Numele exista deja. Va rugam sa alegeti altul!
</span><br />
Parola:
<input type="password" name="parola" /><br />
<input type="reset" value="Anuleaza" />
<input type="submit" value="Trimite" />
</form>
</body>
</html>
Formularul contine doua campuri input de tip text, in care utilizatorul introduce datele de identificare dorite: numele de cont si parola. Dupa cum se poate observa, elementul span va contine mesajul de eroare, in cazul in care numele de cont propus de utilizator exista deja. Astfel, elementul span - initial ascuns - va fi afisat prin modificarea proprietatii de stil CSS display Fisierul functii.js include definitiile functiilor JavaScript utilizate in aplicatie: verificaNume() incarcaXML()si trateazaCererea() Functia verificaNume()verifica existenta - in raspunsul intors de server - a unui nume de cont de utilizator, aceasta fiind executata la declansarea evenimentului blur pe campul in care utilizatorul introduce numele de cont dorit:
function verificaNume(nume,raspuns) else
Dupa cum se poate constata, daca exista un raspuns al serverului si acesta este , mesajul de eroare continut de elementul span va fi afisat, aducandu-i-se la cunostinta utilizatorului ca numele de cont dorit este deja folosit de altcineva. Daca raspunsul este , mesajul de eroare ramane ascuns. In cazul in care nu exista un raspuns al serverului, se trimite o cerere asincrona serverului pentru verificarea existentei numelui de cont propus de utilizator. Cererea asincrona catre serverul Web este realizata de functia incarcaXML(), prezentata in continuare:
var cerere;
function incarcaXML(url)
else if(window.ActiveXObject)
}
Modul in care a fost definita functia incarcaXML()permite utilizarea aplicatiei in toate browserele. Tratarea evenimentelor de transmisie asincrona a datelor se realizeaza prin intermediul functiei trateazaCererea(), prezentata in continuare:
function trateazaCererea()
else
}
Raspunsul intors de server este un document XML preluat prin intermediul proprietatii responseXML a obiectului cerere (de tip XMLHttpRequest). In situatia in care codul de stare intors de server nu este , va fi afisata o fereastra de dialog alert, care va contine informatii legate de problemele aparute, obtinute prin intermediul proprietatii statusText a aceluiasi obiect. Scriptul verifica.php, care investigheaza existenta pe server a numelui de cont dorit de utilizator este urmatorul:
<?php
define('DOCXML', 'utilizatori.xml');
header('Content-type: text/xml');
// Se verifica daca numele de cont solicitat exista deja
function verifica($un_nume)
$radacina = $dom->documentElement;
$utilizatori = $radacina->getElementsByTagName('utilizator');
foreach($utilizatori as $utilizator)
}
return 0;
}
// Se genereaza continutul XML
echo '<?xml version="1.0"?>';
?>
<raspuns>
<metoda>verificaNume</metoda>
<rezultat>
<?php echo verifica($_REQUEST['nume']); ?>
</rezultat>
</raspuns>
Functia verifica()intoarce valoarea , daca numele de cont de utilizator exista si valoarea , in caz contrar. Documentul XML intors de server are raspuns ca element radacina, acesta avand doi fii: elementul metoda, care precizeaza numele metodei utilizate pentru afisarea raspunsului la client si elementul rezultat, care va contine rezultatul propriu-zis al verificarii. Este necesar sa se scrie si scriptul creeaza_cont.php, care adauga datele corespunzatoare noului cont, dupa ce utilizatorul apasa butonul submit al formularului. Acesta trebuie sa verifice si existenta numelui de cont dorit de utilizator, lucru indispensabil in situatia in care browserul utilizatorului nu are implementat obiectul XMLHttpRequest sau are dezactivat suportul JavaScript. Continutul fisierului creeaza_cont.php este urmatorul:
<?php
define('DOCXML', 'utilizatori.xml');
$nume = $_POST['nume'];
$parola = $_POST['parola'];
// Se verifica daca au fost completate ambele campuri
if(!isset($nume) || !isset($parola) || !nume || !parola)
// Se codifica parola, folosind functia md5()
$parolaCod = md5($parola);
// Se creeaza un document XML
$dom = new DOMDocument();
// Daca documentul XML exista, se incarca in procesorul XML
if(!$doc = $dom->load(DOCXML))
// Se verifica existenta numelui de cont
$radacina = $dom->documentElement;
$utilizatori = $radacina->getElementsByTagName('utilizator');
// Se parcurg toti utilizatorii gasiti
foreach($utilizatori as $utilizator)
}
/* Daca numele nu exista, datele contului sunt adaugate in
arborele XML */
// Se creeaza un element utilizator
$utilizator = $dom->createElement('utilizator');
// Se creeaza un element nume
$nume_utilizator = $dom->createElement('nume');
$valoare_nume_utilizator = $dom->createTextNode($nume);
$nume_utilizator->appendChild($valoare_nume_utilizator);
$utilizator->appendChild($nume_utilizator);
// Se creeaza un element parola
$parola_utilizator = $dom->createElement('parola');
$valoare_parola_utilizator = $dom->createTextNode($parolaCod);
$parola_utilizator->appendChild($valoare_parola_utilizator);
$utilizator->appendChild($parola_utilizator);
// Elementul utilizator este adaugat in arborele DOM
$radacina->appendChild($utilizator);
// Documentul XML modificat este salvat
$dom->save(DOCXML);
echo "A fost creat contul avand datele de identificare
<br />nume: ".$nume."<br />parola:".$parola;
?>
Dupa cum se poate observa analizand scriptul PHP prezentat anterior, parola introdusa de utilizator este codificata folosind functia PHP md5(), inainte de a fi adaugata in documentul XML ca valoare a nodului de tip Text
In aceasta sectiune este prezentata o aplicatie (dictionarIT) de tipul actualizarea datelor fara reimprospatarea intregului continut. Datele sunt extrase dintr-o baza de date MySQL. Aplicatia utilizeaza baza de date xmlhttprequest Aplicatia dictionarIT include fisierele dictionar.html, dictionar.js si dictionar.php. Termenii inclusi in dictionar si explicatiile corespunzatoare vor fi pastrate in tabelul dictionar, care va fi creat astfel:
mysql>USE xmlhttprequest;
mysql>CREATE TABLE dictionary
->(
->cuvant VARCHAR(50) NOT NULL,
->explicatie TEXT NOT NULL
->);
Continutul fisierului dictionar.html este urmatorul:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Dictionar IT</title>
<script src="dictionar.js" type="text/javascript"></script>
</head>
<body onload="obtineFocus()">
<center>
<div style="background-color: snow; width: 350px;
border: 1px solid gray;"><br />
<h3>Dictionar IT</h3>
<form name="formular">
<input type="text" name="cheie"
style="width: 300px"
onKeyUp="cautaExplicatie(this.value)"
autocomplete="off" />
</form>
<div align="left" id="mesaj"
style="width: 295px; color: blue; padding: 5px;
border: 1px solid gray; visibility: hidden">
</div>
</div>
</center>
</body>
</html>
Fisierul dictionar.js include definitiile functiilor cautaExplicatie() trateazaCerearea() obtineFocus() ascundeDiv()si arataDiv(), care sunt prezentate in continuare:
var cerere;
// Functie care realizeaza cererea asincrona catre serverul Web
function cautaExplicatie(cheie)
/* Se creeaza cererea AJAX, se trimite serverului si se indica
functia care va trata evenimentele de transmisie asincrona */
// Functie pentru tratarea evenimentelor de transmisie asincrona
function trateazaCererea()
else
// Functie pentru obtinerea focusului
function obtineFocus()
// Functie pentru afisarea sectiunii <div>
function arataDiv(division)
// Functie pentru ascunderea sectiunii <div>
function ascundeDiv(division)
In continuare este prezentat scriptul continut in fisierul dictionar.php, care realizeaza cautarea in baza de date:
<?php
$conexiune=mysql_connect("localhost", "root", "") or
die("Conexiunea cu baza de date nu a putut fi realizata!");
mysql_select_db("xmlhttprequest", $conexiune) or
die("Accesul la baza de date nu a fost realizat");
if(isset($_GET['cheie']))
$cheie = trim($_GET['cheie']);
$data = "";
if(!empty($cheie))
$data .= "</ul>";
}
}
echo $data;
?>
Dupa cum se constata analizand scriptul PHP prezentat, cautarile se fac dupa cuvinte-cheie de tipul $cheie."%";, unde cheie este cuvantul introdus de utilizator, iar caracterul inlocuieste orice secventa de caractere.
Cele mai utilizate cereri HTTP utilizate in AJAX sunt GET si POST, pentru care serverul Web trimite clientului continuturile resurselor vizate de acestea (sau rezultatul executiei acestora). Daca se doreste sa se obtina o utilizare completa a obiectului XMLHttpRequest, nu trebuie omisa posibilitatea ca, prin intermediul acestuia, sa se trimita serverului o cerere HEAD. Pentru realizarea unei astfel de cereri se poate folosi o secventa similara cu urmatoarea:
function obtineAnteturi() else if(window.ActiveXObject)
Cand se realizeaza o cerere HEAD, serverul Web nu intoarce acelasi raspuns ca si in cazul unor cereri GET sau POST. In locul acestuia, serverul intoarce numai anteturile resursei, care includ o serie de informatii despre aceasta. Una dintre cele mai simple metode de a folosi ulterior anteturile HTTP ale resursei consta in a le afisa intr-o fereastra alert , ca in exemplul urmator:
function trateazaCererea()
O cerere HEAD poate fi utilizata si pentru a verifica daca un anumit URL exista pe server, ca in urmatorul exemplu:
function updatePage() else if(cerere.status == 404) else
}
Este evident ca simpla verificare a existentei unui URL nu necesita obtinerea continutului resursei, operatiune posibila insa printr-o cerere GET sau POST
Este ilustrat modul de utilizare a limbajului XSLT in partea de server a aplicatiilor AJAX. Acesta are ca principiu transformarea pe server a documentului XML vizat, prin intermediul unui script PHP invocat de metoda open()a obiectului XMLHttpRequest si a unui document XSLT corespunzator. Aplicatia prezentata (afiseazaPictori) permite afisarea unui document XML (pictori.xml) intr-un fragment al unui document HTML, dupa ce, in prealabil, acesta a fost transformat in format XSLT pe server (prin intermediul fisierului pictoriXSLT.xsl). In continuare este prezentat documentul pictori.xml:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="pictori.xsl" type="text/xsl"?>
<catalog>
<pictor>
<nume>Paul Gauguin</nume>
<curent>postimpresionism</curent>
<pictura an="1891">
<!-- Numele unei picture representative -->
Tahitian Women
</pictura>
</pictor>
<pictor>
<nume>Vincent van Gogh</nume>
<curent>postimpresionism</curent>
<pictura an="1889">
Starry Night
</pictura>
</pictor>
<pictor>
<nume>Henri Matisse</nume>
<curent>impresionism</curent>
<pictura an="1906">
Self-Portrait in a Striped T-Shirt
</pictura>
</pictor>
</catalog>
Continutul fisierului pictoriXSLT.xsl este urmatorul:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="https://www.w3.org/1999/XSL/Transform">
<xsl:template match="/catalog">
<html xmlns="https://www.w3.org/1999/xhtml">
<body>
<center><h2>Pictori, curente si picturi</h2></center>
<table align="center" cellspacing="2"
cellpadding="5" border="1">
<tr>
<th>Nume</th>
<th>Curent</th>
<th>Pictura</th>
</tr>
<xsl:apply-templates>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="pictor">
<tr>
<td><xsl:value-of select="nume"/></td>
<td><xsl:value-of select="curent"/></td>
<td><xsl:apply-templates select="pictura"/></td>
</tr>
</xsl:template>
<xsl:template match="pictura">
<xsl:value-of select="."/>
<xsl:apply-templates select="@an"/>
</xsl:template>
<xsl:template match="@an">
(<i><xsl:value-of select="."/></i>)
</xsl:template>
</xsl:stylesheet>
Aplicatia afiseazaPictori contine alaturi de pictori.xml si pictoriXSLT.xsl fisierele pictori.html, functii.js si pictori.php. Fisierele amintite vor fi incluse in subdirectorul afiseazaPictori al directorului ajax. Continutul fisierului pictori.html este urmatorul:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Pictori</title>
<script src="functii.js" type="text/javascript"></script>
</head>
<body>
<center>
<h3>Pictori</h3>
<form name="formular">
<input type="button" onclick="afiseazaPictori()"
value="Afiseaza" />
<input type="button" onclick="ascundeDiv('mesaj')"
value="Ascunde" />
</form>
<div id="mesaj"
style="width: 500px; color: blue; padding: 5px;
background-color: #E6E6E6;
border: 1px solid gray; visibility: hidden">
</div>
</center>
</body>
</html>
Fisierul functii.js contine definitiile functiilor JavaScript utilizate in aplicatie: afiseazaPictori() trateazaCererea( arataDiv() si ascundeDiv(). In continuare sunt prezentate definitiile primelor doua functii:
// Functia de trimitere a cererii asincrone catre server
var cerere;
function afiseazaPictori()
// Functia pentru tratarea evenimentelor de transmisie asincrona
function trateazaCererea()
else
Fisierul pictori.php prin a carui executie este generat raspunsul trimis clientului de catre server are urmatorul continut:
<?php
// Este incarcat documentul XML
$xml = new DOMDocument;
$xml->load('pictori.xml');
// Este incarcat documentul XSL
$xsl = new DOMDocument;
$xsl->load('pictoriXSLT.xsl');
// Se creeaza un procesor
$procesor = new XSLTProcessor;
// Se includ regulile xsl definite in pictori_transf.xsl
$procesor->importStyleSheet($xsl);
// Se realizeaza transformarea XSLT si se afiseaza rezultatul
echo $procesor->transformToXML($xml);
?>
Una din problemele determinate de utilizarea tehnicii AJAX consta in compromiterea bookmarking-ului. Explicatia pentru aparitia acestei probleme consta in faptul ca URL-ul afisat in caseta de adrese a browserului reflecta starea paginii din momentul in care aceasta afost incarcata de pe server, si nu schimbarile survenite ulterior in continutul acesteia ca rezultat al interactiunii AJAX. Exista totusi posibilitatea de a modifica in mod explicit URL-ul paginii in urma fiecarui apel AJAX, utilizand proprietatea hash a obiectului Location - implementat in toate browserele. Obiectul Location reprezinta URL-ul complet asociat unui obiect Window dat. Fiecare proprietate a obiectului Location reprezinta diferite portiuni ale URL-ului. Un URL are urmatoarea forma:
schema://gazda:port/numecale#fragmentURI?sir_cautare
Obiectul Location are urmatoarele proprietati asociate elementelor URL-ului:
protocol - are ca valoare schema utilizata pentru accesarea documentului (schema), de exemplu, http
host - are ca valoare numele de domeniu sau adresa IP (gazda
port - are ca valoare portul utilizat de server pentru comunicare (port
pathname - are ca valoare numele caii catre document (numecale
hash (proprietate aplicabila numai URL-urilor HTTP) - are ca valoare un nume de ancora, excluzand caracterul hash ( fragmentURI
search (proprietate aplicabila numai URL-urilor HTTP) - are ca valoare partea de cautare a URL-ului, excluzand semnul de intrebare ( sir_cautare
Pe langa proprietatile enumerate, obiectul Location mai are inca doua: href (are ca valoare intregul URL) si hostname (reprezinta componentele gazda:port Proprietatea hash (implementata in JavaScript 1.0) poate fi setata oricand, dupa incarcarea documentului in browser. Daca valoarea specifica nu poate fi gasita in documentul curent, este generata o eroare. Prin setarea proprietatii hash se poate naviga in document fara reincarcarea acestuia. Principiul utilizat pentru realizarea bookmarking-ului in aplicatiile AJAX, utilizand proprietatea hash a obiectului Location, este urmatorul: datele care trebuie transmise serverului prin intermediul apelului AJAX sunt transformate intr-un sir, fiind apoi serializate. Valoarea obtinuta va fi atribuita proprietatii hash si afisata in bara de adrese a browserului, ca parte a URL-ului. Dupa cum se constata, modificarea proprietatii hash se realizeaza fara a fi necesara interactiunea cu serverul, desi ea va urma (apelul AJAX). URL-ul creat in modul descris anterior poate fi salvat de utilizator, folosind facilitatea de Bookmarking a browserului. Cand documentul este incarcat folosind semnul de carte (bookmark) creat, valoarea proprietatii hash continuta in URL este deserializata, iar datele obtinute vor fi utilizate in apelul AJAX. In continuare este prezentat un exemplu in care se modifica proprietatea hash a obiectului Location in functie de starea paginii incarcate in browser:
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Rezolvarea problemei bookmarking-ului in AJAX</title>
<script type="text/javascript">
<!-- <![
function serializare()
function deserializare()
function afiseazaStarea()
document.title = "Rezolvarea problemei bookmarking-ului
in AJAX: " + stareCurenta;
}
function schimbaStarea()
var stareCurenta = "1";
// ]]> -->
</script>
</head>
<body onload="deserializare();afiseazaStarea();">
<h2>Rezolvarea problemei bookmarking-ului in AJAX.</h2>
Starea curenta a paginii este: <span id="stare"></span>.
<br /><br />
<input type="button" onclick="schimbaStarea();"
value="Click pentru a schimba starea" />
</body>
</html>
In exemplul prezentat, pagina incarcata in browser are doua stari precizate prin intregii 1 si 2. Fiecare modificare a starii este insotita de schimbarea componentei hash a URL-ului paginii.
JSON, creat in 2002, este bazat pe standardul ECMA-262, dar utilizarea sa nu necesita JavaScript. Datele care folosesc acest format sunt usor de procesat si generat de catre sistemele de calcul. Tipul MIME oficial pentru JSON este application/json. Formatul JSON este complet independent de limbaj, dar utilizeaza conventii intalnite intr-un numar mare de limbaje de programare. Acest format este bazat pe doua structuri de date universale, suportate - intr-o forma sau alta - de toate limbajele de programare moderne:
o colectie de perechi nume/valoare; in multe limbaje, aceasta este implementata ca obiect, inregistrare, structura, tablou asociativ etc.;
o lista ordonata de valori; in cele mai multe limbaje, aceasta este implementata ca tablou, lista, vector etc.
In JSON, cele doua structuri amintite iau urmatoarele forme:
obiect (object): este un set neordonat de perechi nume (name)/valoare (value), inclus intre acolade. Fiecare nume (sir) este urmat de caracterul doua puncte si de valoarea sa. O pereche nume/valoare este separata de urmatoarea prin simbolul virgula;
tablou (array): este o colectie ordonata de valori, inclusa intre paranteze drepte, valorile fiind separate prin virgula;
valoare (value): poate fi un sir inclus intre ghilimele duble, un numar, un obiect, un tablou, precum si valorile true false sau null. Aceste structuri pot fi imbricate;
sir (string): este o colectie incadrata de ghilimele duble, formata din zero, unul sau mai multe caractere Unicode, cu exceptia caracterelor (ghilimele duble) si (backslash). Acestea din urma pot fi utilizate numai in secvente escape ( si ), la fel ca si caracterele de control;
numar (number): este asemanator cu tipul similar utilizat in JavaScript, cu exceptia faptului ca formatele octal si hexazecimal nu sunt folosite.
Simplitatea JSON a determinat o gama larga de utilizari ale acestuia. El reprezinta, de exemplu, o alternativa la XML in AJAX, ca format utilizat pentru schimbul de date. In acest caz, unul dintre avantajele majore ale JSON este acela ca este mult mai usor sa se scrie un procesor JSON, decat unul XML. In JavaScript, JSON poate fi procesat utilizand functia eval(). Acest lucru a fost important pentru acceptarea JSON de catre comunitatea programatorilor AJAX, deoarece JavaScript este prezent in toate browserele moderne. Cu toate ca JSON este vazut adesea ca un concurrent al formatului XML, acest lucru nu este intotdeauna adevarat, ele fiind utilizate de multe ori in aceeasi aplicatie sau ca formate complementare.
Din ce in ce mai multe biblioteci scrise in diverse limbaje de programare ofera support JSON. Dintre aceste limbaje mentionam ActionScript, C, C#, Java, JavaScript, Perl, PHP, Phyton si Ruby. Incepand cu decembrie 2005, Yahoo! suporta JSON ca o optiune pentru serviciile Web oferite.
4.2.1 JSON in PHP Biblioteci PHP care implementeaza JSON:
AJASON - este o biblioteca PHP 5 (https://ajason.fantastic-bits.de/) si JavaScript;
php-json - este o extensie PHP care furnizeaza suport pentru serializarea in JSON (https://freshmeat.net/projects/php-json-ext/);
json - este o extensie PHP PECL (https://pecl.php.net/package/json), utilizata pentru codificarea valorilor PHP in obiecte JSON, precum si pentru decodificarea obiectelor JSON in valori PHP;
Services-JSON - este un pachet PEAR dezvoltat de Michael Migurski, aflat in stadiul de propunere (https://pear.php.net/pepr/pepr-proposal-show.php?id=198), care furnizeaza un codificator si un decodificator pentru JSON;
Zend_Json - este inclus in Zend Framework (https://framework.zend.com/), furnizand metode pentru serializarea valorilor native PHP in obiecte JSON, precum si pentru decodificarea obiectelor JSON in valori PHP native.
Utilizarea Services-JSON Services-JSON este un pachet PHP ce codifica in obiecte JSON valorile PHP, respectiv decodifica in valori PHP obiectele JSON. Se va rescrie aplicatia contUtilizator, astfel incat sa utilizeze acest pachet. Aplicatia contUtilizator include (pe langa prototype.js), fisierele inscriere.html, extra.js, verifica.php, utilizatori.xml si creeaza_cont.php. Singurele fisiere modificate vor fi extra.js si verifica.php. Functia verificaNume(), a carei definitie este inclusa in fisierul extra.js, va trebui modificata astfel:
function verificaNume()
}
);
Fisierul verifica.php va avea urmatorul continut:
<?php
define('DOCXML', 'utilizatori.xml');
require_once "../JSON.php";
$json = new Services_JSON();
function verifica($un_nume)
$radacina = $dom->documentElement;
$utilizatori = $radacina->getElementsByTagName('utilizator');
foreach($utilizatori as $utilizator)
}
return 0;
}
$valoare = array('metoda' => 'verificaNume',
'rezultat' => verifica($_REQUEST['nume']));
$obiectJSON = $json->encode($valoare);
echo $obiectJSON;
?>
Dupa cum se poate constata analizand scriptul PHP prezentat, pentru codificarea unei valori PHP intr-un obiect JSON se utilizeaza metoda encode() a clasei Services_JSON, metoda care primeste ca argument valoarea respectiva.
4.2.2 JSON in JavaScript JSON este un subset al notatiei literale a obiectelor in JavaScript, fiind un format nativ in acest limbaj. Este foarte des utilizat pentru scrierea argumentelor functiilor, a valorilor intoarse de functii, a raspunsurilor serverului etc. In continuare este prezentat un exemplu de utilizare a JSON:
var caine =
In exemplul prezentat, caine reprezinta o referinta la un obiect, care contine trei membrii: doua proprietati (culoare si varsta) si o metoda (comunica). Membrii obiectului creat pot fi utilizati folosind operatorul punct. Dupa ce obiectul este creat si atribuit variabilei caine, aceasta poate fi utilizata, ca in exemplul urmator:
caine.comunica('Animalul meu de casa este un caine');
alert('Animalul meu de casa are culoarea' + caine.culoare);
alert('Animalul meu de casa are' + caine.varsta + ' ani');
In general, metodele sunt create prin atribuirea unei functii anonime (ca in exemplul anterior), dar pot fi utilizate si functii cu nume. Exemplul anterior poate fi rescris astfel:
var caine = ;
function afiseazaMesaj()
Pentru a converti un text JSON intr-un obiect JavaScript se poate utiliza functia eval(), care apeleaza procesorul JavaScript. Acesta va procesa textul si va produce un obiect:
var obiectJS = eval('(' + textJSON + ')');
Metoda de procesare care consta in utilizarea functiei eval()este rapida, dar implica riscuri in ceea ce priveste securitatea, aplicarea acesteia fiind indicata numai in situatia in care sursa datelor este de incredere. In cazul aplicatiilor Web in care sursa datelor nu prezinta incredere, este indicat sa se utilizeze procesorul JSON JavaScript, care realizeaza conversia sigura sir-obiect si obiect-sir. Procesorul JSON JavaScript va recunoaste numai textul JSON, asigurand o securitate sporita aplicatiilor:
var obiectJS = textJSON.parseJSON();
Metoda parseJSON()va intoarce valoarea booleana false, daca a aparut o eroare de procesare. Este posibil ca utilizand procesorul JSON sa se converteasca o structura de date JavaScript intr-un text JSON:
var textJSON = obiectJS.toJSONString();
Trebuie sa se tina seama ca obiectul care urmeaza a fi transformat nu trebuie sa contina referinte ciclice. De asemenea, se poate converti un tablou JavaScript la un text JSON, ca in exemplul urmator:
var textJSON = tablouJS.toJSONString();
Este necesar sa se tina seama ca tabloul care urmeaza a fi transformat nu trebuie sa contina referinte ciclice.
XML si JSON sunt formate utilizate pentru schimbul de date independent de aplicatie. Cele doua formate pot fi comparate utilizand mai multe criterii. Unele dintre acestea sunt prezentate in continuare:
utilizare pentru transfer de date HTTP: atat XML, cat si JSON sunt formate care descriu un obiect sub forma de text simplu, fiind potrivite pentru transferul datelor prin HTTP;
asigurarea suportului in limbajele de programare: ambele formate sunt suportate prin intermediul a numeroase biblioteci, scrise in diverse limbaje de programare (inclusiv JavaScript), care transforma un obiect nativ in aceste formate si invers;
simplitate: XML este un format relativ simplu, dar JSON este si mai simplu, deoarece utilizeaza o gramatica mult mai redusa care, in plus, se potriveste mai bine cu structurile de date utilizate in multe limbaje de programare;
extensibilitate: XML este extensibil, dar JSON nu este. Aceasta caracteristica nu e neaparat un dezavantaj pentru JSON, deoarece acesta nu este un limbaj de marcare;
interoperabilitate: JSON are aceeasi interoperabilitate potentiala ca si XML;
orientare: XML este orientat pe document, iar JSON este orientat pe date;
usurinta in utilizare: JSON si XML sunt usor de citit si de scris atat de oameni, cat si de sistemele de calcul;
usurinta in procesare: JSON este mult mai simplu de procesat decat XML;
structuri de date utilizate: structurile de date JSON sunt bazate pe tablouri si inregistrari, in timp ce structurile de date XML sunt bazate pe elemente, atribute, continut textual, entitati, (eventual) DTD-uri si alte metastructuri;
dimensiunea datelor: in mod obisnuit, reprezentarea JSON a unei date are dimensiuni mai mici decat reprezentarea XML a aceleiasi date;
autodescriere a datelor: atat JSON, cat si XML prezinta aceasta caracteristica;
internationalizare: atat JSON, cat si XML suporta standardul Unicode;
familiaritate: XML este mult mai familiar comunitatii IT decat JSON;
suport in browser: browserele moderne asigura suport aproape complet pentru XML (DOM, XPath si XSLT), dar si pentru JSON, acesta fiind bazat pe JavaScript;
compatibilitate cu alte standarde: JSON este compatibil cu YAML (o alta alternativa la XML).
Dupa cum s-a vazut, atat XML, cat si JSON utilizeaza abordari structurate pentru crearea datelor. De exemplu, o aplicatie poate oferi un serviciu Web care produce carti de vizita in formatele XML, respectiv JSON. Iata exemplul unei carti de vizita in format XML:
<?xml version="1.0" encoding="UTF-8"?>
<card>
<nume>Elena Iordache</nume>
<institutie>NewsRo Media</institutie>
<adreseemail>
<adresa loc='serviciu'>elena@newsromedia.com</adresa>
<adresa loc='acasa'>elena@yahoo.com</adresa>
</adreseemail>
<telefoane>
<tel tip='serviciu'>0230121212</tel>
<tel tip='mobil'>0744121212</tel>
</telefoane>
<adrese>
<adresa loc='serviciu'>str. Mihai Viteazu, nr. 100</adresa>
<adresa loc='acasa'>str. Mihai Eminescu, nr. 200</adresa>
</adrese>
</card>
si aceeasi carte de vizita, in format JSON:
],
"telefoane": [
,
],
"adrese": [
,
],
Utilizand obiectul XMLHttpRequest, datele XML si JSON pot fi aduse asincron pe client, astfel:
var url = "https://www.example.com/card.php?cardID=1000";
if(window.XMLHttpRequest)
else if(window.ActiveXObject)
Definitia functiei trateazaCererea(), care trateaza schimbarea de stare a cererii, in cazul in care raspunsul serverului este trimis in format XML, poate fi urmatoarea (este prezentata numai partea care proceseaza prima adresa de email):
function trateazaCererea()
}
In cazul in care raspunsul serverului este trimis in format JSON, functia trateazaCererea()poate avea urmatoarea definitie (este prezentata numai partea care proceseaza prima adresa de email):
function trateazaCererea()
}
Analizand exemplul prezentat se poate trage concluzia ca procesarea raspunsului JSON este mai simpla decat procesarea raspunsului XML, ceea ce recomanda utilizarea formatului JSON in situatiile in care este necesara procesarea unei cantitati mari de date.
5.1.1 Prezentarea articolelor
Aplicatia este structurata astfel incat toate informatiile oferite de catre autorul articolelor sa fie vizibile utilizatorului. Logo-ul este afisat in partea stanga sus a site-ului si contine alaturi numele aplicatiei.
In partea stanga a paginii se afla titlurile articolelor. Deasupra titlurilor se afla partea de cautare a articolelor, iar sub acestea se afla arhiva.
In mijlocul paginii se afla articolele asezate in ordine, in functie de scrierea acestora.
Experienta oferita de aceasta aplicatie este una foarte interactiva datorita folosirii tehnicilor AJAX.
Fiecare apasare a titlurilor articolelor apeleaza o functie new Effect.ScrollTo('review_<?=$item['id']?>'); return false;.
Variabila $item['id'] reprezinta cheia primara a articolului afisat in pagina.
Faptul ca doar informatiile importante sunt prezentate pe pagina principala ofera utilizatorului o experienta mai placuta in momentul in care acesta cauta o anumita informatie sau doreste sa citeasca anumite articole scrise de catre autori.
Fiecare articol prezinta o poza in partea dreapta a acestuia, astfel vizitatorul poate observa mult mai usor despre ce este vorba in acel articol si ii poate capta atentia.
Functia de cautare foloseste tehnicile AJAX si cauta in continutul articolelor cat si in titlul acestora si afiseaza rezultatele in aceeasi pagina fara a mai incarca o alta, astfel utilizatorul nefiind nevoit sa astepte in plus pentru rezultate.
Conceptul aplicatiei este de a oferi utilizatorului o viteza sporita si o experienta cat mai placuta prin prezentarea informatiilor pe care le cauta, intr-o forma cat mai interactiva.
5.1.2 Administrarea site-ului
Detinatorul site-ului va avea la dispozitie un modul de administrare a acestuia care este foarte usor de utilizat. Astfel el va avea posibilitatea de a scrie articole noi, de a vedea comentariile vizitatorilor site-ului, de a sterge comentariile abuzive sau care nu corespund cu ce se afla scris in articole.
Accesul la acest modul de administrare a site-ului este protejat de catre o parola si de un user, ce sunt oferite detinatorului site-ului in momentul in care este instalat pe serverul acestuia.
5.1.3 Diagrama de cazuri de utilizare
In aceasta diagrama se prezinta posibilitatile de accesare a site-ului din perspectiva "Autorului" cat si a "Utilizatorului".
Pentru dezvoltarea acestei aplicatii s-au folosit ca instrumente si tehnologii software limbajele PHP si JavaScript, serverul Web Apache si serverul MySQL.
Instalarea si configurarea serverului Web Apache, a serverului MySQL si a serverului de aplicatii PHP au fost realizate cu ajutorul utilitarului Wamp5.
|
|
Acesta poate fi descarcat gratuit de la adresa www.wampserver.com si poate fi instalat numai pe platformele Windows. |
5.2.1 Organizarea fisierelor din site
Organizarea informatiei in fisiere are ca reper schema conceptuala a aplicatiei si functionalitatile pe care aplicatia trebuie sa le deserveasca.
Proiectul "Design Reviews" are urmatoarele fisiere:
fisiere pentru implementarea interfetei utilizatorului:
o Folderul includes:
application_top.php - este inclusa in fiecare pagina si include clasele si fisierele necesare conectarii la baza de date.
configure.php - retine parolele si numele bazei de date.
functions.php - contine toate functiile necesare functionarii site-ului.
header_includes.php - include toate fisierele JavaScript si fisierele CSS.
meta_tags.php - include informatiile necesare motoarelor de cautare pentru indexare.
o Folderul html:
archive.inc.php - contine codul html pentru afisarea arhivei cu articole.
getdata.inc.php - codul continut in acest fisier citeste toate datele necesare site-ului si le structureaza in vectori pentru a fi mai usor de folosit.
menu.inc.php - contine codul html pentru afisarea meniului cu articole inclusiv campul de cautare al articolelor.
o Folderul js:
functions.js - contine toate functiile JavaScript necesare pentru realizarea tuturor efectelor prezente.
prototype.js - libraria care ajuta la realizarea unei mai usoare utilizari a metodelor AJAX.
scriptaculous.js - contine toate efectele scrise in cod JS. Acest fisier include alte fisiere prezente in acest director.
o Folderul css:
ie.css - contine codul CSS pentru browserul Internet Explorer.
styles.css - contine codul CSS pentru afisarea site-ului intr-un mod cat mai placut.
o Folderul ajax:
controlComments.php - este apelata de fiecare data cand un utilizator scrie un comentariu.
search_rev.php - se apeleaza atunci cand un utilizator cauta un articol.
o Folderul principal:
.htaccess - este folosit pentru a modifica felul in care arata adresele.
favicon.ico - este icoana care apare langa titlul site-ului.
footer.php - este inclus in site si contine informatii despre detinatorul site-ului.
header.php - se afla in partea de sus a site-ului si contine data si adresa catre fisierul RSS.
index.php - contine toate informatiile pentru afisarea articolelor.
resize-image.php - este folosit pentru afisarea imaginilor in site cu o anumita rezolutie fara a modifica fisierul propriu-zis.
resize-image-crop.php - reduce imaginea la rezolutia data indiferent de marimea acesteia.
rss.php - ofera informatii RSS pentru utilizatori.
fisiere pentru implementarea interfetei administratorului:
o Folderul styles:
admin.css - contine codul CSS pentru afisarea interfetei administratorului.
o Folderul principal:
comments.php - ofera posibilitatea administratorului sa modifice comentariile utilizatorilor.
footer.php - afiseaza informatii despre drepturile de autor.
header.php - afiseaza logoul.
index.php - incarca fiecare modul in parte in functie de adresa apelata de administrator.
login.php - ofera posibilitatea administratorului sa se autentifice.
logout.php - ofera posibilitatea administratorului sa se deconecteze.
menu.php - afiseaza fiecare modul intr-o lista.
meta_data.php - este modulul prin care administratorul poate sa modifice datele de indexare ale site-ului.
reviews.php - afiseaza si ofera posibilitatea de a modifica, adauga si edita articole.
5.2.2 Crearea bazei de date
Pentru crearea bazei de date s-a utilizat aplicatia phpMyAdmin care poate fi descarcata gratuit de la adresa www.phpmyadmin.net, in cazul de fata fiind continuta in utilitarul Wamp5.
Baza de date utilizata in implementarea aplicatiei Design Reviews contine 4 tabele, cheile primare ale acestor tabele fiind atributele subliniate:
comments: id bigint(20) auto_increment, name varchar(255), email varchar(255), message longtext, rev_id bigint(20), date datetime.
Tabela comments a fost creata pentru a retine informatiile despre comentarii.
Faptul ca exista o tabela separata pentru comentarii ofera posibilitatea ca la un articol sa se adauge mai multe comentarii. Dupa ce vizitatorul adauga un comentariu la un articol acestea sunt aranjate in ordine descrescatoare in functie de campul "date" iar campul email nu apare in site deoarece acest lucru ar ajuta site-urile daunatoare sa culeaga emailuri de pe acest site.
pages : id bigint(20) auto_increment , name varchar(255), title varchar(255), description longtext, keywords longtext.
Tabela pages a fost creata pentru a se putea adauga in pagini anumite informatii pe care motoarele de cautare le vor retine si vor ajuta alti vizitatori sa ajunga la acest site. Name este numele paginii, title este titlul acesteia, description este un meta tag care va detine un text despre acest site iar keywords va retine anumite cuvinte cheie.
reviews : id bigint(20) auto_increment, title varchar(255), content longtext, image varchar(255), tags longtext, date datetime.
Tabela reviews este tabela in care administratorul va adauga articolele. Acestea sunt compuse dintr-o imagine, un titlu, continut, cuvintele cheie si data in care a fost scris articolul. Articolele sunt aranjate in functie de campul date in ordine descrescatoare. Atunci cand un vizitator incearca sa caute dupa un articol anume cuvantul scris de acesta va fi cautat in campurile tags, content si title. Acest tabel este modificat doar de catre administrator. Acesta poate sterge, edita sau adauga date in acest tabel din partea de administrare a site-ului care face parte din site.
Campul image va contine doar titlul imaginii incarcate de catre administrator. Adresa catre aceasta se poate modifica din fisierul "configure.php" aflat in folderul "includes" din folderul principal.
users : id bigint(20) auto_increment, email varchar(255), password varchar(255), status tinyint(1).
Tabela users contine datele de autentificare ale administratorului. Cu ajutorul emailului si al unei parole administratorul se poate autentifica in modulul de administrare a site-ului.
Acest lucru faciliteaza administrarea site-ului, dand posibilitatea ca mai multe persoane sa poata efectua operatiile necesare. Pentru a nu interactiona intr-un mod negativ este de preferat ca un singur administrator sa fie logat. Nu s-a impus aceasta restrictie deorece in unele cazuri este necesara impartirea sarcinilor de administrare a site-ului.
Pentru o prezentare cat mai elocventa vom prezenta atat situatia in care cel care utilizeaza site-ul este administratorul cat si situatia in care un vizitator incearca sa profite de informatiile oferite de catre cel care detine site-ul.
5.3.1 Autentificarea administratorului
Imaginea de mai jos va aparea in momentul in care administratorul acceseaza partea de administrare a site-ului. Toate fisierele se afla in folderul "admin". Pentru autentificare administratorul va introduce emailul si parola oferita la instalare.
Dupa apasarea butonului "Submit" se va apela din nou fila "login.php" iar codul urmator va lua datele si va verifica daca informatiile introduse sunt corecte:
$email = $_POST['email'];
$password = $_POST['password'];
$results = db_query('SELECT * FROM users WHERE email='$email' AND password='$password' AND status='1'');
Daca datele sunt corecte atunci utilizatorul va fi trimis catre fila "index.php" iar daca nu sunt corecte va fi afisat un mesaj.
if (mysqli_num_rows($results) == 1) else
Daca datele sunt introduse incorect va aparea un mesaj la fel ca in imaginea urmatoare:
Altfel daca datele sunt corecte se va creea o sesiune si administratorul va fi redirectionat catre fila "index.php". Pe prima pagina vor aparea toate articolele scrise de acesta in ordine descrescatoare in functie de data la care au fost scrise.
5.3.2 Modulul de administrare al articolelor
Acest modul ofera posibilitatea de a viziona, creea, edita sau sterge articole. In tabelul de mai jos se poate observa ca toate informatiile introduse de catre administrator sunt prezente. Pentru stergerea unui articol se va da click pe linkul "Sterge" iar acel articol va fi sters din baza de date prin apelarea urmatorului cod:
$results = db_query('DELETE FROM `reviews` WHERE `id`='' . $id . ''');
Dupa apelarea unei actiuni de stergere acelasi tabel va aparea dar fara articolul sters anterior. Un articol sters nu se mai poate recupera.
La apelarea linkului "Editeaza" urmatoarea sectiune a modului va fi returnata:
In aceasta forma se afla toate informatiile introduse de catre detinatorul site-ului. Campurile fiind: titlu, continut, taguri, imagine curenta, imagine. Administratorul poate modifica fiecare sectiune, si prin apasarea butonului "Submit" toate datele vor fi salvate in baza de date.
Modificarea datelor aflate in baza de date se face cu urmatorul cod SQL:
db_query( 'UPDATE reviews SET image=''.$file.'', title=''.$title.'', content=''.$description.'', date=NOW(), tags=''.$tags.'' WHERE id=''.$id.''');
Astfel fiecare camp va fi modificat cu noile valori.
La apelarea butonului de adaugare a unui nou articol se va afisa aceeasi forma in care vor fi introduse valorile cerute.
Toate valorile vor fi introduse in baza de date prin apelarea codului urmator:
db_query( 'INSERT INTO reviews (image, title, content, date, tags) VALUES ('$file', '$title', '$description', now(), '$tags' )');
Dupa introducerea informatiilor in baza de date utilizatorul va fi redirectionat catre acelasi tabel in care sunt prezente toate articolele.
5.3.3 Modulul de administrare al comentariilor
Acest modul ii ofera administratorului posibilitatea sa modifice informatiile prezente in baza de date.
Comentariile pot fi introduse doar de catre vizitatorii site-ului. Administratorul are posibilitatea de a administra aceste mesaje prin a sterge pe acelea care nu corespund cu articolele scrise de acesta.
Stergerea unui comentariu se va face prin apasarea linkului "Sterge" aflat in dreptul fiecarui comentariu.
Comentariile vor fi prezentate in felul urmator:
La apelul actiunii de stergere se va trimite urmatorul cod catre serverul de MySQL:
db_query( 'DELETE FROM comments WHERE id=''.$id.''');
5.3.4 Deconectarea administratorului
Deconectarea administratorului se face prin distrugerea sesiunii create la autentificare.
Administratorul se poate deconecta prin apasarea linkului aflat in meniul sectiunii de administrare "Deconectare".
La apasarea acestui link se va apela urmatorul cod:
ini_set('session.use_cookies', 0);
session_name('cms_admin_session');
session_start();
$arrSessions=$HTTP_SESSION_VARS;
session_destroy();
foreach ($arrSessions as $session_name => $session_value)
unset($arrSessions);
Odata apelat acest cod va aparea urmatoarea fereastra iar administratorul poate alege sa viziteze pagina principala sau sa se autentifice din nou.
5.3.5 Functia de cautare
Functia de cautare este disponibila in pagina principala, prin introducerea unui text in campul oferit si apasarea lupei aflata langa acest camp. In acest moment se vor trimite datele la fila "search_rev.php" care va returna articolele care au in titlu, taguri sau continut acel cuvant introdus de catre utilizator.
5.3.6 Functia de adaugare comentariu
Adaugarea unui comentariu se face prin apasarea linkului de comentarii aflat in dreptul fiecarui articol. Odata apasat acest link se vor afisa comentariile scrise deja de alti utilizatori si forma de introducere al unuia nou.
Odata introduse informatiile necesare (nume, email, mesaj) acestea vor fi trimise catre fila "controlComments.php" care va adauga comentariul introdus in baza de date. Imediat dupa introducerea comentariului acesta va aparea in pagina fara ca aceasta sa se reincarce. Astfel utilizatorul are o experienta mult mai placuta care este realizata prin folosirea tehnicilor AJAX.
Aplicatia Design Reviews ofera un model de implementare a unui site Web din categoria comert electronic. Prin interfata dinamica si functionalitatile de care dispune acest site, este realizata interactivitatea cu utilizatorul.
Datorita organizarii structurate a fisierelor si a modulelor site-ului, aplicatia poate fi dezvoltata adaugandu-i-se noi functionalitati ca raspuns la alte cerinte ale clientilor si administratorilor:
pentru utilizator:
o posibilitatea de a cauta dupa anumite articole doar prin introducerea unui/unor cuvinte cheie;
o o interfata interactiva care il ajuta pe utilizator sa interactioneze intr-un mod cat mai placut cu aplicatia;
o posibilitatea de a adauga comentarii articolelor;
o informatiile oferite de administrator sunt foarte usor de citit si placut aranjate;
pentru administrator:
o flexibilitatea datorata implementarii meniului principal, ofera sansa ca la fiecare dintre optiunile acestuia (Articole, Meta data, Comentarii) sa poata fi adaugate noi functionalitati;
o posibilitatea de a edita, adauga si sterge orice articol printr-un simplu click.
Validarea datelor trimise din formularele XHTML a fost realizata pe server, cu ajutorul expresiilor regulate PHP. O alternativa la acest procedeu este "validarea in timp real", realizata cu ajutorul tehnicii AJAX (Asynchronous JavaScript And XML), in care browserul, prin intermediul JavaScript, realizeaza cereri de date catre server fara reincarcarea paginii Web. Interactiunea dintre motorul AJAX si server este asincrona, ceea ce permite utilizatorului sa interactioneze cu aplicatia fara a astepta actualizarea unor componente ale paginii. Rezulta astfel, o viteza marita in executia aplicatiilor Web.
Site-ul Design Reviews este destinat autorilor de articole care au ca tema designul, insa implementarea structurata a acestei aplicatii Web ofera posibilitatea de a fi utilizata, prin modificari nesemnificative din punct de vedere conceptual, si pentru alte tipuri de site-uri.
[1] Anghel T., Introducere in AJAX, Polirom , 2006.
[2] Anghel T., Dezvoltarea aplicatiilor Web folosind XHTML, PHP si MySQL,
Polirom, 2005.
[3] Asleson R., Schutta N.S., Foundations of Ajax, Apress, 2005.
[4] Buraga S., Aplicatii Web la cheie. Studii de caz si implementare in PHP,
Polirom, 2003.
[5] Buraga S., Proiectarea siturilor Web, Design si Functionalitate, Polirom, 2005.
[6] Crane D., Pascarello E., James D., Ajax in Action, Hanning, 2005.
Darie C., Brinzarea B., Chereches-Tosa F., Bucica M., Ajax and PHP: Building
Responsive Web Applications, Packt Publishing, 2006.
[8] Diaconu D. E., Pagini Web cu JavaScript, Polirom, 2005.
[9] Gugoiu T., HTML, XHTML, CSS si XML prin Exemple. Ghid practic,Teora, 2005.
[10] Jacobs S., Beginning XML with DOM and Ajax. From Novice to Professional,
Apress, 2006.
[11] Simion I., Proiectarea paginilor Web,Teora, 2006.
[12] Williams H.E., Lane D., Web Database Applications with PHP & MySQL,
O'Reilly & Associates, Sebastopol, 2002.
[13] Referinte Web: https://www.php.net, https://dev.mysql.com, https://www.w3.org.
[14] Zammetti F., Practical Ajax Projects and Java Technology, Apress, 2006.
|
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 3447
Importanta: 
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved
