 |
|
 |
 | PHP ºi Ajax cu librãria nAjax PHP |  |
 Trimis: 19/07/2007 16:48 |
 |
|
| Ad_Infinitum |
| Administrator |
 |
 |
| Data inscrierii: 23/Iun/2007 |
| Mesaje: 212 |
|
|
|
|
|
 |
|
PHP ºi Ajax cu librãria nAjax
Prin acest articol vreau sa ii ajut pe cei care au trebuință de functii AJAX si sunt dispusi sa o invete intr-un crash-course de 2 ore. Am sa incep cu o scurta descriere despre cum am ajuns sa am nevoie de aceasta technologie dupa care am sa explic cum se foloseste libraria nAjax.
Sunt programator web si lucrez la diferite applicatii we de cca 4 ani (2 ca freelancer si 2 ca angajat la o firma). In acest timp m-am intalnit cu mai multe complicații care par nesimnificative dar cu technologiile existente pareau de nerezolvat (si trebuia intodeauna sa gasesc un compromis sau un work-around)
ex.:
avem 3 tabele: Tari, Judete si Localitati (populate cu sute de mii de valori)
Vrem un form la care sa putem selecta localitatea unui utilizator cu 3 combo box-uri. Selectam tara dupa care judetul si in sfirsit localitatea. La fiecare selectare, vrem ca combobox-ul urmator sa fie populat cu un set de valori filtrat pe precedentul lui.
Sa faci o asemenea filtrare in PHP e simplu: pasezi variabilele cu GET si recreezi formul. (presupunem ca mai avem si alte campuri care trebuie salvate) Astfel se poate realiza filtrarea combo-box-ului urmator communicand cu serverul generand urmatorul pas prin reiinoirea paginii.
Acest lucru generaza trafic nedorit pentru server si e incomod si pentru utilizator (trebuie sa astepte refreshul paginii) Pentru a evita acest lucru apelam la javascript.
Se ataseaza la fiecare Combobox un “event” care sa declanseze popularea urmatorului. Din pacate nu avem probabilitatea de a cere dinainte serverului toate valorile posibile pentru filtrare in javascript (am precizat ca avem sute de mii de valori).
Aici intra AJAX in joc. Cu ajax putem atasa obiecte PHP pentru a fi gestionate in mod asincron dupa ce pagina a fost generata de server. Asta inseamna ca putem rula de fapt scripturi php care sa comunice in mod direct cu Javascript. (in cazul nostru pentru a popula comboboxul urmator)
Ajax este o technica cu care se pot crea interfete interactive pentru aplicatii web. Ajax (Asynchronous JavaScript and XML) este o technica de communicare asincrona desfasurata in background dupa incarcarea paginii, care consta prin schimbarea a mici pachete de date intre server si applicatie. Comunicarea se realizeaza cu javascript iar datele sunt trimise de obicei in formate XML.
Libraria nAjax: http://sourceforge.net/projects/najax/
Pentru a folosi libraria: va trebui sa o descarcati intr-un director accesibil aplicatiei voastre.
1. Creati un fisier Clasa_mea.php in care veti defini o clasa al carui metode vor fi “vizibile” prin Ajax.
Myclass.php
| Citat: |
class myclass {
function getJudet($tara_id) {
$retv=””;
$r = mysql_query(“select * from judet where tara_id=” . $tara_id);
for($i=0;$i<count($r);$i++) {
$retv.=”,” . mysql_result($r,$i,”name”);
}
return substr($retv,1); // this cuts the first comma
}
function najaxGetMeta()
{
NAJAX_Client::mapMethods($this, array('getJudet'));
NAJAX_Client::publicMethods($this, array('getJudet'));
}
}
|
Fiecare clasa va avea metoda najaxGetMeta(). Metodele visibile vor fi adaugate array-ului. ex. array('getJudet','getTown','getIt')
Atentie: in acest fisier php NU va fi adăugat libraria nAjax!! Includerea lui fiind necesara numai in fisierul unde va fi folosit.
2.In fisierul care contine form-ul dv. Includeti la header urmatoarele:
index.php
| Citat: |
<?php
require_once('Myclass.php');
require_once('najax/najax.php');
NAJAX_Server::allowClasses('myclass');
if (NAJAX_Server::runServer()) {
exit;
}
?>
|
Metoda allowClasses va registra clasa myclass iar metodele vor fi accesabile in javascript.
Sa continuam cu creerea form-ului:
| Citat: |
<form>
<select name=”selCountry” id=”selCountryi” onChange=”javascript:fillJudet(this);”>
<option value=”1”> Romania </option>
<option value=”2”> Hungary </option>
</select>
<select name=”selJudet” id=”selJudeti”>
</select>
</form>
|
Sunt 2 comboboxuri: cu prima se selecteaza tara (acum predefinita pentru simplitate cu doar 2 valori, acesta de fapt va fi populat cu un query la baza de date). Acest combobox va avea atasat eventul onChange care sa execute functia fillJudet().
| Citat: |
<?= NAJAX_Utilities::header('.') ?>
<script type="text/javascript">
var ajax_obj1 = <?= NAJAX_Client::register(new FirstClass()) ?>;
function fillJudet(obj) {
ajax_obj1.getJudet (obj.options[obj.selectedIndex].value , function(result) {
arr = result.split(",");
sobj = document.getElementById('selJudeti');
for(i=0;i<arr.length;i++) {
el = document.createElement('option');
el.text=arr[i];
el.value=arr[i];
try {
sobj.add(el, null);
}
catch(ex) {
sobj.add(el); // IE only
}
}
});
}
</script>
|
Functia fillJudet() va accesa clasa myclass prin ajax si va executa getJudet (care executa un query la baze de date filtrand pe valoarea trimisa prin javascript, adica valoarea tarii selectate). Dupa primirea rezultatului va parcurge elementele sirului adaugand la comboboxul selJudet judetele obtinute.
De aici puteti încerca cu mai numeroase medote si clase, comunicarea fiind foarte usoara cum se vede si din exemplu. E important sa tineti in minte, ca ajax este o comunicatie asincrona si este influentata de bandwidth-ul pe care utilizatorul il are. Pentru aplicatii serioase vor fi necesare testari de erori, in aparte legate de submiterea unui form care nu are inca rezultatele comunicarii prin Ajax.
Pentru intrebari contactati-ma pe: osvathrobi@yahoo.com
sau scritei-mi direct pe forum.
Osvath - Boros Robert, 2007-June-23
1-14 AM 
http://www.ethos.no/.robert/blog/ |
|
|
|
|
|
|
Fa-ti si tu propriul forum GRATUIT, pe www.myforum.ro
|
|
