AJAX у Elxis-у

АЈАX је комбинација javascript-a и PHP скрипта. Карактеристике АЈАX технологије јесу оно што наше скриптове чини живима! Неколико задатака може бити извршено без освежавања странице. Како се то ради? Као што знамо, PHP је server-side програмски језик. Јеном када се PHP скрипт изврши, ми на екрану видимо резултат. Притом не можемо да изменимо оно што видимо на страници без освежавања. С друге стране, javascript је client-side програмски језик. То значи да се извршава у претраживачу, а не на серверу. Користећи javascript можемо да изменимо приказ текстуалних елемената и извршимо различите задатке без потребе да освежимо страну. Али, како да извршимо пхп скриптове, претражујемо базу, уписујемо у датотеке итд? Е, ту на сцену ступа АЈАX. АЈАX користи javascript да побуди извршење PHP скриптова у позадини, а затим резлтате испоручи кроз javascript.
Има много готових АЈАX класа које се могу преузети са интернета, али постоји једна, која се испоручује уз Elxis, а ми мислимо да је врло корисна, моћна, и једноставна за коришћење. То је Ајаx Sack.


Најпре морамо да укључимо класу у нашу AJAX страницу. Класа се налази у /administrator/includes/js/ajax_new.js

Рецимо да је наша страница лоцирана у Elxis backend-u, позивамо AJAX JS класу:
<script type="text/javascript" xsrc="includes/js/ajax_new.js"></script>

Укључићемо нашу javascript датотеку у којој се налазе наше javascript функције (могли смо, такође, да напишемо функције на истој страни, али боље је држати их у одвојеним датотекама):
<script type="text/javascript" xsrc="path_to_our_js_folder/myajax.js"></script>

Сада морамо да направимо див елемент у коме ће бити приказан резултат након извршења AJAX-овог задатка.
<div id="ajaxMsg" style="display: hidden;"></div>

Као што видите, div елемент није приказан, већ скривен (hidden). Постаће видљив тек када га позовемо кроз javascript.

Сада ћемо направити AJAX линк, који ће када се кликне, иницирати извршење AJAX задатка.
<a xhref="javascript: void(0);" onClick="javascript: myfunction();">My task</a>

Када се кликне на линк, javascript функција myfunction() ће се иницијализовати. Сада ћемо додати функцију у myajax.js датотеку. Отворимо myajax.js датотеку за уређивање (до сада је била празна):

На почетку ове датотеке морамо да иницијализујемо нову AJAX Sack инстанцу.
var myajax = new sack();

Морамо рећи шта желимо да Sack prikazuje када је задатак извршен. Ово се приказује унутaр div елемента који смо претходно направили.

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...";
}

Можете изменити излаз, додати слику за индикацију извршења итд.

Сада ћемо изградити нашу javascript функцију (myfunction):
Најпре ћемо наш ajax div element учинити видљивим. У нашем случају, то је ajaxMsg.

function myfunction(){
var e = document.getElementById('ajaxMsg');
Чинимо div видљивим
e.style.display = "";

Сада можемо подесити било коју променљиву, коју желимо да проследимо PHP скрипту. Ево неких примера:

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

Можемо да подесимо да променљива буде прочитана из елемента формулара унутар стране или путем њеног ID-ја и многе друге ствари
Пример:

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

Примедба: Можемо да проследимо променљиве и као улазе у овој функцији.

Сада морамо да кажемо AJAX-у коју PHP датотеку да позове. Ми ћемо позвати index3.php koji se налази у Elxis backend-u.
myajax.requestFile = "index3.php";

Сада можемо да проследимо променљиве путем POST или GET метода.
myajax.method = 'POST';

Кажемо AJAX Sack-у у ком div елементу желимо да прикажемо резултате.
myajax.element = 'ajaxMsg';

Кажемо AJAX sack-у шта да ради док се задатак учитава, кад је учитан или активан. У нашем случају, само ћемо додати имена претходно креираних функција.

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

На крају, извршимо AJAX и затворимо функцију.
myajax.runAJAX();

}

То је то!

Наравно да морамо да направимо и PHP skript који ће извршити наш AJAX задатак. У претходном примеру смо позвали компоненте које извршавају задатак.