AJAX u Elxis-u

AJAX je kombinacija javascripta i PHP skripta. Karakteristike AJAX tehnologije jesu ono što naše skriptove čini živima! Nekoliko zadataka može biti izvršeno bez osvežavanja stranice. Kako se to radi?","Kao što znamo, PHP je server-side programski jezik. Jenom kada se php skript izvrši, mi na ekranu vidimo rezultat. Pritom ne možemo da izmenimo ono što vidimo na stranici bez osvežavanja. S druge strane, Javascript je client-side programski jezik. To znači da se izvršava u pretraživaču, a ne na serveru. Koristeći javascript možemo da izmenimo prikaz tekstualnih elemenata i izvršimo različite zadatke bez potrebe da osvežimo stranu. Ali, kako da izvršimo php skriptove, pretražujemo bazu, upisujemo u datoteke itd? E, tu na scenu stupa AJAX. AJAX koristi javascript da pobudi izvršenje PHP skriptova u pozadini, a zatim rezltate isporuči kroz javascript.
Ima mnogo gotovih AJAX klasa koje se mogu preuzeti sa interneta, ali postoji jedna, koja se isporučuje uz Elxis, a mi mislimo da je vrlo korisna, moćna, i jednostavna za korišćenje. To je Ajax Sack.


Najpre moramo da uključimo klasu u našu AJAX stranicu. Klasa se nalazi u /administrator/includes/js/ajax_new.js

Recimo da je naša stranica locirana u Elxis backend-u, pozivamo AJAX JS klasu:
<script type="text/javascript" xsrc="includes/js/ajax_new.js"></script>

Uključićemo našu javascript datoteku u kojoj se nalaze naše javascript funkcije (mogli smo, takođe, da napišemo funkcije na istoj strani, ali bolje je držati ih u odvojenim datotekama):
<script type="text/javascript" xsrc="path_to_our_js_folder/myajax.js"></script>

Sada moramo da napravimo div element u kome će biti prikazan rezultat nakon izvršenja AJAX-ovog zadatka.
<div id="ajaxMsg" style="display: hidden;"></div>

Kao što vidite, div element nije prikazan, već skriven (hidden). Postaće vidljiv tek kada ga pozovemo kroz javascript.

Sada ćemo napraviti AJAX link, koji će kada se klikne, inicirati izvršenje AJAX zadatka.
<a xhref="javascript: void(0);" onClick="javascript: myfunction();">My task</a>

Kada se klikne na link, javascript funkcija myfunction() će se inicijalizovati. Sada ćemo dodati funkciju u myajax.js datoteku. Otvorimo myajax.js datoteku za uređivanje (do sada je bila prazna):

Na početku ove datoteke moramo da inicijalizujemo novu AJAX Sack instancu.
var myajax = new sack();

Moramo reći šta želimo da Sack prikazuje kada je zadatak izvršen. Ovo se prikazuje unuter div elementa koji smo prethodno napravili.

function whenLoadingMy(){
var e = document.getElementById(myajax.element);
e.innerHTML = "Sending Data...";
}

function whenLoadedMy(){
var e = document.getElementById(myajax.element);
e.innerHTML = "Data Sent...";
}

function whenInteractiveMy(){
var e = document.getElementById(myajax.element);
e.innerHTML = "Getting data...";
}

Možete izmeniti izlaz, dodati sliku za indikaciju izvršenja itd.

Sada ćemo izgraditi našu javascript funkciju (myfunction):
Najpre ćemo naš ajax div element učiniti vidljivim. U našem slučaju, to je ajaxMsg.

function myfunction(){
var e = document.getElementById('ajaxMsg');
Činimo div vidljivim
e.style.display = "";

Sada možemo podesiti bilo koju promenljivu, koju želimo da prosledimo php skriptu. Evo nekih primera:

myajax.setVar("option", 'com_xxxx');
myajax.setVar("task", 'xxxxxx');

Možemo da podesimo da promenljiva bude pročitana iz elementa formulara unutar strane ili putem njenog ID-ja i mnoge druge stvari
Primer:

var myname = document.adminForm.name.value;
myajax.setVar("myname", myname);

Primedba: Možemo da prosledimo promenljive i kao ulaze u ovoj funkciji.

Sada moramo da kažemo AJAX-u koju PHP datoteku da pozove. Mi ćemo pozvati index3.php koji se nalazi u Elxis backend-u.
myajax.requestFile = "index3.php";

Sada možemo da prosledimo promenljive putem POST ili GET metoda.
myajax.method = 'POST';

Kažemo AJAX Sack-u u kom div elementu želimo da prikažemo rezultate.
myajax.element = 'ajaxMsg';

Kažemo AJAX sack-u šta da radi dok se zadatak učitava, kad je učitan ili aktivan. U našem slučaju, samo ćemo dodati imena prethodno kreiranih funkcija.

myajax.onLoading = whenLoadingMy;
myajax.onLoaded = whenLoadedMy;
myajax.onInteractive = whenInteractiveMy;

Na kraju, izvršimo AJAX i zatvorimo funkciju.
myajax.runAJAX();

}

To je to!

Naravno da moramo da napravimo i php skript koji će izvršiti naš AJAX zadatak. U prethodnom primeru smo pozvali komponente koje izvršavaju zadatak.