Ajax je pravzaprav beseda, ki stoji za tem, da omogočimo spreminjanje vsebine spletne strani brez osveževanja (resfrashanja) le-te.
Služi tudi temu, da na strežnik lahko pošiljamo podatke, recimo da imamo anketo in nekdo oceni neki sliko in klikne na ocene od 1 do 5, pri tem na ni potrebno osveževati strani, saj želimo le zapisati ta glas v podatkovno bazo in mogoče prikazati nov rezultat iz nje.
Uvod
V tem članku ne bomo pisali svoje ajax knjižnice, ampak bomo uporabili javascript knjižnico miniajax, ki deluje v vseh najbolj pogosto uporabljenih brskalnikih.
Knjižnico dobite TUKAJ
Preden začnemo naj tudi povem, da boste za delovanje spodnjih primerov morali postaviti datoteke na spletni strežnik (lahko tudi na localhost), ki omogoča php.
Preko AJAXa lahko dostopamo le do datotek, ki se nahajajo na isti domeni, to pomeni, da ne moremo preko AJAXa brati podatkov iz npr. http://www.google.com
Vsi primeri imajo vnešeno zakasnitev treh sekund (sleep(3)), da je bolj opazno, da gre za dinamično nalaganje iz druge datoteke, drugače bi bil rezultat viden v skoraj istem trenutku. Zato pričakujte zelo hitro delovanje ajax skript, ko jih boste uporabljali sami brez zakasnitev.
Spreminjanje vsebine elementa preko AJAXa
V prvem primeru si bomo ogledali funkcijo ajax.update(). Funkcija ima 2 parametra, prvi parameter je ime datoteke, ki jo pokličemo, drugi parameter pa je id elementa v katerega bomo vstavili vsebino dobljeno preko klicane datoteke preke ajaxa.
Najprej moramo imeti element z nekim unikatnim idjem:
[koda]
Nalagam..
[/koda]
Preko javascripta pa pokličemo funkcijo ajax.update, ki bo poklicala datoteko example1.php in bo vpisala v element (v našem primeru div) z IDjem content vsebino dobljeno iz datoteke example1.php:
V tem primeru si bomo ogledali kako lahko pošljemo podatke drugi datoteki preko metode GET.
Uporabili bomo zopet funkcijo ajax.update dve vnosni polji, z IDji myname (ime) in myage (starost). Ob kliku gumba za pošiljanje podatkov pokličemo funkcijo sendData(), ki bo izvedla potrebne spremembe. Zopet bomo uporabili element z IDjem content za izpisovanje dobljene vsebine preko ajaxa.
Oglejmo si funkcijo sendData() z opisom posameznih vrstic:
[koda][/koda]
Za vse tiste, ki še niste delali veliko z javascriptom naj povem da preko document.getElementById('ID_ELEMENTA').value dobimo vrednost tega elementa.
V tem primeru si bomo ogledali kako lahko dobimo več podatkov naenkrat iz strežnika in jih vpišemo v različne elemente na spletni strani.
Tokrat bomo uporabili funkcijo ajax.get(), ki zahteva 2 parametra, ta 2 parametra sta datoteka, ki jo kličemo in funkcija, ki se izvede ko dobimo rezultat iz klicane datoteke.
V naslednji vrstici je primer klica datoteke example3.php, po vrnitvi rezultata iz datoteke example3.php pa kličemo funkcijo insertData:
[koda]ajax.get('example3.php', insertData);[/koda]
Funkciji insertData funkcija ajax.get kot parameter poda vsebino dobljeno preko ajax klica. Zato deklaracija funkcije izgleda takole:
[koda]function insertData(ajaxResponseText)[/koda]
Sedaj imamo v spremenljivki ajaxResponseText vsebino dobljeno iz datoteke example3.php.
Datoteka example3.php nam vrne podatke neke osebe v takšni obliki ime|priimek|starost, torej imamo podatke ločene z znakom |, v primeru je vrnjena vsebina Janez|Novak|23
Torej najprej moramo razbiti te podatke na posametne dele, zato uporabimo funkcijo split(), v našem primeru torej:
[koda]ajaxData = ajaxResponseText.split('|');[/koda]
To pomeni da je spremenljivka ajaxData array, ki hrani 3 vrstice, saj je bil naš niz (Janez|Novak|23) razdeljen preko znakov |
Ker imamo sedaj vse vrednosti v svojem delu ajaxData arraya lahko nastavimo spremenljivke s podatki:
[koda]name = ajaxData[0]; // nastavimo ime osebe, ker se nahaja na indexu 0 arraya ajaxData
lastname = ajaxData[1]; // nastavimo priimek osebe
age = ajaxData[2]; // nastavimo starost osebe[/koda]
Vse kar nam ostane je le še to, da v elemente vpišemo ustrezne podatke, npr. v element z IDjem Xname bomo vpisali ime osebe, ki je v spremenljivki name:
[koda]document.getElementById('Xname').innerHTML = name;
document.getElementById('Xlastname').innerHTML = lastname;
document.getElementById('Xage').innerHTML = age;[/koda]
Za tiste, ki nimate veliko znanja javascripta naj povem da document.getElementById('ID_ELEMENTA').innerHTML = 'Neki' spremeni vsebino elementa ID_ELEMENTA v 'Neki'.
V zadnjem primeru si bomo pogledali več funkcij hkrati, ki jih bomo združene uporabili v funkciji ajax.submit(). Preko te funkcije si bomo ogledali ajax.post(), ajax.serialize(), $ in collect().
Za pošiljanje parametrov preko POST medote s funkcijo ajax.post potrebujemo dodaten parameter args, kjer so vrednosti različnih vnosnih polj/gumbov/itd. nekega obrazca, to nam namesto nas naredi funkcija ajax.serialize().
Funkcija $(ID_ELEMENTA) je okrajšava za document.getElementById(ID_ELEMENTA), collect(TAG) pa vrne imena in vrednosti elementov zahtevanega TAGa.
Ta razlaga vam bo služila, če boste želeli ajax.post() ali ajax.serialize() uporabiti samostojno, ajax.submit() pa vse to že naredi namesto vas, če uporabljate obrazec.
Za delovanje skripte moramo ustvariti najprej obrazec, v našem primeru sem naredil obrazec za pošiljanje emailov z IDjem "sendmail_form" in vnosnimi polji za ime pošiljatelja, email pošiljatelja, temo emaila in vsebino emaila.
Ob kliku na gumb tipa submit (potrdi) se izvrši klic funkcije sendData in vrnemo false (da se podatki ne pošljejo preko običajnega načina, torej z refreshanjem/osveževanjem strani). Koda gumba za potrditev obrazca je takšna:
[koda][/koda]
Funkcija ajax.sebmit() sprejme 3 parametre. Prvi je datoteka, ki ji bomo poslali podatke, drugi je ID elementa v katerega bomo zapisali vrnjeno vsebino in tretji parameter je obrazec, ki ga bomo poslali preko AJAXa z metodo POST.
V tem primeru bomo uporabili eno od mnogokrat uporabljenih slikic za dinamično spreminjanje vsebin preko AJAXa. Sliko si lahko shraniti, če z desno miškini tipko kliknete na njo in kliknete "Save picture as.." oz. nekaj podobnega:
Pa si oglejmo še funkcijo sendData(), ki jo kličemo ob pritisku na gumb potrdi:
[koda][/koda]
Gotovo ste opazili, da sem kot tretji parameter podal $('sendmail_form') in ne le 'sendmail_form'. To je zato, ker funkcija zahteva obrazec že kot objekt in mora zato biti že naslovljen. $('sendmail_form') je torej enako kot, če uporabimo document.getElementById('sendmail_form'). Funkcija $ je vgrajena v miniajax knjižnici.
Ko si boste ogledali primere si lahko ogledate tudi izvorno kodo le-teh in boste našli popolno kodo do željenih rezultatov, če vam mogoče ni uspelo razbrati kako kaj deluje iz zgornjih opisov.
Odličen članek. problem je samo v tem, da mi v IE6 javlja napako, ko mi php skripta vrača podatke nazaj na page. Ali je potrebno v php (ajax.php) skripti kaj posebej nastaviti?
Zdravo
Iščem program ali pa kodo za drop down menu, katero vstavim v php stran narejeno z DW CS4.
Takšno u izi in da lahko spreminjam barvo gumbov menijev in podmenijev oziroma zamenjam barvo gu
če ima kdo čas (5 minut) in bi rad izvedel tudi koliko se česa pri plačevanju uporablja na spletu bi ga prosil za izpolnitev ankete (pišem diplomo): http://bit.ly/asrv nd
pa tut anketo sm izpolnu
<script type="text/javascript">
ajax.update('ajax.php', 'content');
</script>