Ajax şi PHP. Exemplu de căutare asincronă cu jQuery - 11 Mai

Ajax (Asynchronous Javascript and XML) este o tehnică de comunicare dintre browser-ul clientului şi server folosită, în special, la programarea aplicaţiilor Web. Scopul principal al tehnologiei este de a transmite şi a prelua cantităţi mici de date de la server de către browser în mod asincron, adică fără a reîncărca toată pagina site-ului, ci numai porţiunea în care datele se schimbă.

Această tehnică a apărut prima dată în anii 1990, după care a fost folosită în applet-ruile Java în anii 1995. Denumirea de Ajax a fost inventată tocmai în anii 2005-2006 când a fost folosit din plin de către Google la crearea proiectelor Google Suggest, Gmail şi Google Maps.

Ajax foloseşte Javascript, HTML, XML şi CSS pentru comunicare. Cu ajutorul Javascript se poate crea un obiect de tip XMLHttpRequest, care ştie să comunice asincron cu server-ul (Apache cu PHP). Acest obiect se mai numeşte şi ActiveXObject în versiunile mai vechi de browsere ca Internet Explorer 5 sau 6. Pentru aceasta, înainte de a se crea obiectul, se verifică ce browser are utilizatorul:

Exemplu creare obiect XMLHttpRequest în Javascript:

După crearea obiectului tip XMLHttpRequest, pentru a trimite datele spre server se deschide mai întâi o conecţiune de tip HttpRequest cu funcţia open: open(metodaRequest, caleScriptDePeServer, tipComunicare). Primul parametru al funcţiei specifică tipul de request HTTP, care poate fi “GET” sau “POST”. De obicei se foloseşte tipul GET, fiind mai rapid. Al doilea parametru al funcţiei este calea spre fişierul PHP de pe server. Al treilea parametru specifică dacă requestul va fi sincron (va bloca pagina browser-ului până se termină trimiterea datelor) sau asincron (datele se vor trimite în background, fără a bloca celelalte acţiuni ale utilizatorului în pagină).

Exemplu:

După deschiderea conecţiunii se apelează metoda send() pentru trimiterea datelor.

Exemplu:

Este nevoie de a rescrie metoda onreadystatechange(); al obiectului XMLHttpRequest care procesează datele primite de la server după încheierea comunicării cu acesta, pentru a primi mesajul de răspuns de la server.

Exemplu:

Vom încadra toate porţiunile de cod într-o funcţie numită ajax(cautare), care preia un parametru “cautare” şi îl trimite spre server prin metoda GET:

După crearea funcţiei Ajax cu javascript, e nevoie de a atribui această funcţiei unui element HTML. În cazul nostru vom atribui evenimentul “onkeyup” inputului de cautare. La scrierea unor caractere in input se va executa funcţia ajax(); ce va prelua conţinutul dintr-un input de tip text cu id-ul “cautare” şi îl va transmite funcţiei ajax(cautare). Mai e nevoie să creăm şi un element HTML în care vom “turna” răspunsul primit de la server. Acesta va fi un DIV în cazul nostru.

Exemplu:

La completarea câmpului de căutare se va trimite spre server conţinutul inputului cu id-ul “cautare” şi se vor prelua datele de pe server de la adresa http://lec-academy.ro/exemple/lec_ajax/search.php . Răspunsul se va atribui containerului cu id-ul “container-raspuns”.

În fişierul search.php vom stoca o listă cu ţări într-un array pe care î-l vom filtra la fiecare accesare prin Ajax. Vom verifica dacă există ţări a căror denumire începe cu stringul preluat din $_GET['cautare'] (trimis prin XmlHTTPRequest de codul de Javascript prin metoda HTTP_GET):

Exemplu search.php:

Exemplul live de filtrare a listei de ţări prin Ajax cu jQuery se află aici: http://lec-academy.ro/exemple/lec_ajax/ajax.php

Recomand folosirea plug-in-ului de Firefox – Firebug – pentru a putea detecta în consolă procesul de executare a request-urilor Ajax:



Pentru a nu fi nevoie de a crea de fiecare dată o funcţie Ajax care verifică dacă există obiect de tip HttpXmlRequest şi de a verifica starea acestuia, se poate folosi un Framework Javascript. Există o mulţime de Framework-uri de Javascript care pun la dispoziţie funcţii ajutătoare pentru Ajax:

• Prototype (http://www.prototypejs.org/)
• Jquery (http://jquery.com/)
• Spry (http://labs.adobe.com/technologies/spry/)
• ExtJs (http://www.extjs.com/)
• MooTools (http://mootools.net/)

Toate aceste Framework-uri pun la dispoziţie un API cu funcţiile create de comunitatea în cauză pentru a uşura munca cu Javascript.

În exemplul nostru vom folosi Framework-ul jQuery pentru a crea obiecte Ajax. Nu e nevoie decât de a downloada ultima versiune de jQuery de pe site (http://jquery.com/) şi de a o încadra în pagina noastră. Codul HTML va deveni mult mai simplu:

Link spre documentaţia Request.HTML: http://docs.jquery.com/Ajax

Exemplul live de filtrare a listei de ţări prin Ajax cu jQuery se află aici: http://lec-academy.ro/exemple/lec_ajax/ajax_cu_jquery.php

Tags: ajax, asynchron, http, javascript, jQuery, PHP, tutorial, web, xml, xmlhttp, xmlhttprequest