jQuery: Şi în sfârşit AJAX


"Ajax (sau AJAX), prescurtare pentru Asynchronous JavaScript and XML, este o tehnică de programare pentru crearea de aplicaţii web interactive. Intenţia este să facă paginile web să pară mai receptive, prin schimbul unor cantităţi mici de date cu serverul în fundal, astfel încât să nu fie nevoie ca pagina să fie reîncărcată la fiecare acţiunea utilizatorului. Aceasta are ca scop creşterea interactivităţii, vitezei şi uşurinţei în utilizare a aplicaţiilor web." Am citat de pe pagina românească din Wikipedia dedicată subiectului. Evident, pagina în limba engleză conţine mult mai multe informaţii. Dincolo de acel "să pară mai receptive", introducerea mi se pare potrivită. Şi spre bucuria unora şi tristeţea altora ţin să precizez de la început că nu voi intra absolut deloc în subtilităţi de genul: este AJAX sau AHAH? cum e treaba cu sincronă şi asincronă? Într-un alt moment poate, dar acum ne grăbim să vedem primele exemple clare. Pornesc de la exemplele oferite pe jQuery.com, evident traduse şi adaptate după cum am crezut de cuviinţă.

Vă rog să deschideţi această pagină (ca de obicei aveţi posibilitatea descărcării arhivei pentru teste locale). Veţi vedea cinci teste cu AJAX şi veţi descoperi – dacă sunteţi ca mine, la început, atunci cu uimire – că este o joacă de copil! Dacă veţi încerca local (descărcând şi despachetând arhiva) asiguraţi-vă că încărcaţi tutorial06.html pe un server local cu suport PHP, altfel două exemple nu vor merge. Buuun… Să vedem deci. Cel mai banal exemplu foloseşte funcţia load cu un singur argument: o pagină HTML (indicaţi calea relativă dacă este cazul). Funcţia ia conţinutul paginii şi îl returnează/pune în div-ul html. Deci tot ce trebuie să facem este să definim un div gol cu id-ul html. Fie că punem linia de mai jos pe $(document).ready() sau pe un eveniment al utilizatorului (gen click pe ceva), ea va provoca apariţia în respectivul div a întreg conţinutul (HTML al) paginii indicate.

$("div#html").load("ajax-test.html");

Mai simplu nu se poate, nu? Exemplul doi foloseşte un fişier XML (în paranteză să spunem, AJAX presupune o comunicare prin JavaScript cu un fişier XML, deci acest exemplu este 100% AJAX, dar am spus că nu intrăm în astfel de detalii). Situaţia este ceva mai complicată, dar tot lizibilă, pentru că acum nu mai luăm conţinutul fişierului şi îl punem într-un div ci trebuie să îl citim. Există din fericire funcţii specializate, astfel că partea1 = $("title",xml).text() va parcurge fişierul XML căutând perechea <title></title> returnând ce este între, în format text.

Exemplul trei se întoarce la simplitatea primului, doar că acum nu mai apelăm o pagină HTML ci una PHP. De aici un întreg orizont de opţiuni: putem să folosim acest cod pentru a insera într-o bază de date nişte valori sau pentru a verifica valabilitatea unor valori furnizate de exemplu printr-un formular (vor veni şi astfel de exemple complete). Al doilea parametru al funcţiei transmite parametrii paginii PHP: cu virgulă putem pune o listă lungă de parametri, după cum vedeţi în exemplu.

$("div#dhtml").load("fisier-html.php",{nume:"Ion Popescu",varsta:30});

Cum facem în pagina PHP? Am preferat să includ şi codul PHP în pagina mea demonstrativă pentru simplul motiv că atunci când am încercat eu să studiez problema nu le-am avut şi a trebuit să sap/gândesc puţin până să îi dau de capăt (în special la pagina XML recunosc că m-am blocat mult până m-am luminat că trebuia inclusă linia cu header(…)… greu la deal cu boii mici). După cum vedeţi mai jos, este foarte simplu: cu $_REQUEST["numele-parametrului"] aflăm ceea ce ne-a transmis pagina cu AJAX. Exemplul de mai jos este evident absurd, nefăcând altceva decât să returneze 2 parametri într-o propoziţie (uau!). Dar aici se poate include în PHP lucruri mai serioase (am spus deja două exemple: introducerea valorilor într-o bază de date sau verificarea validităţii lor). Important este că avem un cod minimalist de la care să pornim.

<?php
  echo "<h2>Testul Ajax nr. 3</h2>";
  // aici am putea introduce codul in care
  // adaugam numele intr-o baza de date
  echo "Numele lui este: ".$_REQUEST["nume"].". El are varsta de ".$_REQUEST["varsta"]." ani.";
?>

Exemplul patru este similar cu trei, doar că se foloseşte de XML. Din nou, în partea PHP lucrurile stau la fel ca în exemplul anterior, cu adăugarea liniei cu header() şi cu introducerea tagurilor XML; în partea de AJAX din pagina HTML codul se complică doar pentru citirea XML-ului. În fine, testul cinci este absolut banal, asemănător cu primul, doar că foloseşte ca intrare un fişier TXT şi nu unul HTML.

Dar ce este AJAX fără… preloader? De regulă apelul la AJAX presupune perioade de aşteptare (până se face încărcarea externă) şi de aceea de regulă se afişează un gif animat, care dispare după ce aşteptarea s-a încheiat. Câteva gif-uri animate (mai multe găsiţi cu Google… de exemplu aici):

animatie indicator indicator_arrows indicator_circle_ball indicator_mozilla_blu indicator_mozilla_yellow indicator_snake spinning_wheel_throbber

Deschideţi această pagină unde aveţi un exemplu pregătit (este inclus în arhiva acestui articol). Ce am făcut? Am adăugat un div nou cu animaţia.

<div id="incarcare"><img src="animatii/animatie.gif"></div>

Cum partea AJAX se apelează odată cu încărcarea paginii, div-ul rămâne afişat, dar trebuie ascuns după terminarea procedurii AJAX. Ascunderea o facem astfel:

$(’#incarcare’).ajaxStop(function() {
  $(this).hide();
});

În traducere liberă: când AJAX-ul a luat sfârşit, ascunde div-ul cu animaţia. Evident, nu? Simplu! Cred că ajunge pentru moment acest volum de informaţie. Descărcaţi arhiva, dacă aveţi un server local, pentru teste suplimentare. Documentaţia oficială şi completă o găsiţi aici. Vom reveni cu exemple mai complexe cu AJAX. Probabil – pentru că nu am un plan ca la şcoală despre acest serial jQuery. Dar am intenţia să mai scriu poate un material despre AJAX, iar apoi despre pluginuri jQuery, eventual AJAX + pluginuri.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

3 comentarii

  1. jürgen.toth spune:

    Max Kiesler ofera pe pagina sa multe exemple pentru folosirea AJAX. A se vedea aici.

  2. Xactive spune:

    Mda… Acest „tutorial” se putea expune in 200 cuvinte.

  3. Xactive spune:

    Nu cred ca pagina aceasta ar fi de folos. Poate starni curiozitatea unui copil ce abia si-a cumparat calculator.


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *