Tehnologia AJAX

1. Introducere

Ajax (Asynchronous JavaScript and XML), este o tehnică de programare pentru crearea de aplicații web interactive. Intenția este să facă paginile web să devină mai rapide și deci mai acceptate, prin schimbul în fundal al unor cantități mici de date cu serverul, astfel încât să nu fie nevoie ca pagina să fie reîncărcată la fiecare acțiune a utilizatorului. Aceasta are ca scop creșterea interactivității, vitezei și ușurinței în utilizare a aplicațiilor web.

2. Tehnologii

Termenul Ajax a ajuns să reprezinte un grup larg de tehnologii Web care pot fi folosite pentru a implementa o aplicație Web care comunică cu un server în fundal, fără a interfera cu starea actuală a paginii. În articolul care a inventat termenul Ajax, Jesse James Garrett a explicat că sunt integrate următoarele tehnologii:

HTML sau XHTML pentru structura semantică a informațiilor; CSS pentru prezentarea informațiilor; Javascript pentru interactivitate, pentru procesarea informațiilor prezentate; Obiectul XMLHttpRequest pentru schimbul și manipularea informațiilor într-o

manieră asincronă cu server-ul web; XML este folosit de obicei pentru transferarea datelor între server și client, deși

orice format funcționează, inclusiv HTML preformatat, text simplu etc.

De atunci, totuși, au existat o serie de evoluții în tehnologiile utilizate într-o aplicație Ajax și în definiția termenului Ajax însuși. XML nu mai este necesar pentru schimbul de date și, prin urmare, XSLT nu mai este necesar pentru manipularea datelor. Notarea JavaScript de obiecte (JSON) este adesea folosită ca un format alternativ pentru schimbul de date ,deși pot fi utilizate și alte formate, cum ar fi HTML preformatat sau text simplu. O varietate de biblioteci JavaScript

populare, inclusiv JQuery, includ abstracții pentru a asista la executarea cererilor Ajax.

Asynchronous HTML și HTTP implică utilizarea XMLHTTPRequest pentru a prelua (X) fragmente HTML, care sunt inserate direct în pagina Web.

3. Cum funcționează?

La anumite evenimente din pagină sau la un anumit interval de timp, se apelează un obiect de tip XMLHttpRequest care va cere anumite date de la server iar la primirea acestora, le va trimite pentru a fi afișate în pagina fără ca aceasta să se reîncarce, doar prin modificarea unor elemente ale paginii. Formatul în care sunt primate și trimise datele pot fi XML, JSON sau chiar text.

Componenta de bază este obiectul XMLHttpRequest.

- Permite realizarea de cereri HTTP (e.g., GET şi POST) dintr-un program rulând la nivel de client (browser) spre o aplicaţie de pe server, într-un mod asincron;

- Nu necesită reîncărcarea paginilor Web;

- Uzual, datele vehiculate între programele client şi server sunt marcate în XML (Extensible Markup Language);

Micșorare timpului de răspuns la acțiunile utilizatorilor și viteza de navigare este una dintre avantajele tehnologiei Ajax. Un exemplu relevant este cazul când este necesară completarea unui formular întreg, și apăsarea butonului ”Submit”.

4. Avantajele Tehnologiei Ajax

În multe cazuri, anumite pagini ale unui sit web constau din conţinut comun acestora. Folosind metodele tradiţionale, acel conţinut ar trebui reîncărcat de fiecare dată. Folosind Ajax, o aplicaţie web poate solicita doar o dată conţinutul de

care are nevoie pentru a fi actualizat, reducând astfel mult folosirea lărgimii de bandă şi timpul de încărcare.

Folosirea solicitărilor asincrone permit interfeţelor browserelor web ale clienţilor să fie mai interactive şi să răspundă rapid intrărilor, iar secţiunile paginilor pot fi de asemenea încărcate individual. Utilizatorii pot vedea că aplicaţia este mai rapidă şi răspunde mai bine, chiar dacă aplicaţia nu s-a schimbat pe server.

Folosirea Ajax poate reduce conexiunile către server, întrucât scripturile şi stilurile trebuiesc solicitate doar o dată.

5. Dezavantajele Tehnologiei Ajax

Orice utilizator al cărui browser nu acceptă JavaScript sau XMLHttpRequest sau are această funcție dezactivat, nu va putea să utilizeze corect paginile care depind de Ajax. Este posibil ca dispozitivele simple (cum ar fi smartphone-urile și dispozitivele PDA) să nu suporte tehnologiile necesare.Singura modalitate pentru a lăsa userul să își continue activitatea este ca aplicația să aibă fall back la metode ce nu includ javascript.

Actualizarea paginilor web dinamice face dificil pentru un utilizator folosirea bookmark-ului pentru o stare particulară a aplicaţiei. Există soluţii pentru această problemă, de exemplu folosind identificatorul de fragment URL (porţiunea din URL de după ‘#’) pentru a monitoriza şi permite utilizatorilor să se reîntoarcă la aplicaţia dintr-o anumită stare.

În funcție de natura aplicației Ajax, actualizările paginilor dinamice pot întrerupe interacțiunile utilizatorilor, în special dacă conexiunea la internet este lentă sau nesigură. De exemplu, editarea unui camp de căutare poate declanșa o interogare către server pentru completarea căutării, însă este posibil ca utilizatorul să nu știe că există un pop-up de completare a căutării. Dacă conexiunea la Internet este lentă, lista pop-up-urilor poate apărea când utilizatorul a continuat deja să faca altceva.

Cu excepția Google, majoritatea “crawler-ilor” Web nu execută cod JavaScript, astfel încât, pentru a fi indexate de motoarele de căutare Web, o aplicație Web trebuie să ofere un mijloc alternativ de accesare a conținutului care ar fi în mod normal recuperat cu Ajax.

Întrucât mulţi roboţi de indexare nu execută coduri JavaScript, aplicaţiile web trebuie să ofere posibilităţi alternative de accesare a conţinutului care este extras cu Ajax, pentru a permite motoarelor de căutare să îl indexeze

Din cauza lipsei unui set de standarde pentru Ajax nu s-a putut adopta o cea mai bună practică pentru a testa aplicaţiile Ajax. Instrumentele de testare pentru Ajax adesea nu înţeleg modelele de evenimente Ajax, modelele de date, şi protocoalele.

6. Șabloane

6.1. Șabloane arhitecturale (Michael Mahemoff)

– Tratarea evenimentelor la nivel local – Reîmprospătarea periodică a conţinutului – Anticiparea download-urilor (pre-încărcarea datelor ce vor fi solicitate) – Transmiterea explicită a datelor spre server – Oferirea de posibilităţi de bookmarking

6.2. Șabloane de prezentare a datelor:

– Folosirea proprietăţilor CSS – Adoptarea principiilor de utilizabilitate – Indicarea “vârstei” informaţiei afişate – Oferirea de indicii privind ce date au fost deja transmise serverului şi ce date se află în aşteptare (pending) pentru a fi transmise

6.3. Şabloane de interacţiune

– Similare celor disponibile in cazul aplicaţiilor clasice:

• Drag & drop • Popup data input

• Popup information • Highlighting • Auto-completion

7. AJAX & Web-ul de date (Data Web)

Data Web ≡ soluţie simplificatoare pentru interschimb de date, bazată pe principiile arhitecturale ale Web-ului şi pe conceptele de bază ale serviciilor Web şi Web-ului semantic

Datele şi ofertanţii de date vor fi identificate via XRI, reprezentarea şi “legarea” datelor se vor face printr-o schemă XDI (XRI Data Interchange), iar interschimbul de date se va realiza graţie serviciilor XDI (extensii ale serviciilor Web actuale).

8. Aplicaţii ale Web-ului social şi de date

– Porţi (portaluri) de acces la contacte personale – Filtre de încredere (trust filters) – Managementul inteligent al e-mail-ului – Calendare de evenimente & semne de carte generate automat– Auto-registration, auto-login, auto-personalization– Preotecția furtului identității digitale -Social search– Rețele de reputație(reputation networks).

Acutalele/viitoarele aplicații vor trebui să integreze servicii oferite de dispositive mobile, calculatoare personale, servere, etc.

Când dispozitivele și programele sunt conectate la Internet, aplicațiile nu mai constituie artefacte software, ci devin servicii- the perpetual beta.

9. Exemple pentru Ajax

9.1. Folosind JavaScript

Exemplul unei cereri Ajax simple, folosind metoda GET, scrisă în JavaScript.

get-ajax-data.js

send-ajax-data.php:

Mulți dezvoltatori nu le place sintaxa folosită în obiectul XMLHttpRequest, astfel încât au fost create unele dintre următoarele soluții.

9.2. Folosind jQuery

JQuery din biblioteca JavaScript a implementat abstracții care permit dezvoltatorilor să utilizeze mai ușor Ajax. Deși încă folosește XMLHttpRequest în spatele scenei, următorul exemplu este același exemplu ca mai sus utilizând metoda "ajax".

jQuery implementează de asemenea o metodă "get" care permite scrierea aceluiași cod mai concis.

9.3. Folosind Fetch

Fetch este o nouă interfață de programare a aplicațiilor JavaScript. Deși nu este încă susținut de toate browserele, acesta câștigă impulsul ca o modalitate mai populară de a executa Ajax. Potrivit documentației Google Developers Documentation, "Fetch facilitează realizarea de cereri web și gestionarea răspunsurilor decât cu vechiul XMLHttpRequest".