Kada bih mom bratu spomenuo AJAX, odmah bi pomislio na fudbalski klub iz Holandije, dok bi majka verovatno pomislila na prašak za veš. Međutim, kada kolegi sa posla spomenem AJAX, jasno je da pričamo o opšte poznatoj JavaScript tehnologiji. Toliko poznatoj, da je fudbalski klub odavno nestao sa prve Google pretrage za tu ključnu reč.
Ne želim da pišem o tome kako je i zbog čega AJAX nastao jer su dosada napisano milioni HTML stranica o tome. Napisaću samo odgovor na jedno pitanje “Šta je to AJAX?”. I to u jednoj rečenici – Ajax je JavaScript tehnologija koja klijentima štedi vreme. Ostalu teoriju ne trebaš znati, ali kako se koristi – obavezno!
Jedna bitna stvar u vezi AJAX-a je – AJAX se ne programira. Nije potrebno ni da znate kako radi. AJAX se danas koristi kroz već gotove JavaScript frejmworke. Na primer – jQuery. Potrebno ti je samo 5 linija koda i već svoj CV možeš obogatiti time da imaš napredno znanje iz AJAX tehnologije. Ne veruješ? Čitaj dalje…
Ovo je jedan jednostavan primer. Postoje dva padajuća menija. Jedan je ispunjen listom država, dok drugi, lista lokacija, tek treba da se popuni na osnovu izabrane države.
<select id="drzava" name="drzava">
<option value="1">Srbija</option>
<option value="2">Grčka</option>
<!-- ... -->
</select>
<select id="lokacija" name="lokacija"></select>
Ukoliko si web developer već ti je jasno da je u ovakvim slučajevima AJAX najbolje rešenje. Ukoliko ne znaš kako to da uradiš, sledeći kod će ti sve razjasniti:
$(document).ready(function() {
$("#drzava").change(function() {
var id = $(this).val();
$.ajax({
type: "POST",
url: "ajax.php",
data: { lokacija : id },
success : function(response) {
$("#lokacija").html(response);
}
});
});
});
Malo više od 5 linija koda, ali hajde da objasnim liniju po liniju:
$(document).ready(function() { ... });
– je standardni izraz za jQuery unutar čijeg bloka se definišu izrazi koji mogu da se izvrše tek nakon što je HTML DOM potpuno učitan i spreman za manipulaciju.
$("#drzava").change(function() { ... });
– definisanje funkcije koja će se izvršiti nakon što je promenjena vrednost HTML elementa sa ID-em “drzava”. Osnove jQuery-ija se moraju znati.
var id = $(this).val();
– promenjivoj id dodeljujemo vrednost koju ima ovaj HTML element, u ovom slučaju select element „drzava“.
$.ajax({
type: "POST",
url: "ajax.php",
data: { lokacija : id },
success : function(response) {
$("#lokacija").html(response);
}
});
– Ukoliko ti po nazivima parametara unutar $.ajax-a nije jasno šta se dešava, evo i objašnjenja:
type služi za definisanje načina slanja podataka. Ukoliko staviš da bude POST, u php-u ćeš koristiti $_POST da bi pokupio te podatke. Ukoliko koristiš GET, koristićeš $_GET.
url je putanja do PHP fajla koji izvršava akciju. U ovom primeru poželjno je da ti ajax.php ispisuje listu lokacija, i to samo option elemente – npr:
<option value="1">Beograd</option> <option value="2">Novi Sad</option>
data služi za slanje podataka. U ovom slučaju, u PHP-u ćeš id lokacije pokupiti ako koristiš promenjivu $_POST[‘lokacija’], koji će sadržati value iz select elementa.
u success ćeš definisati funkciju koja će se izvršiti nakon što je izvršen AJAX. Sve ono što tvoja ajax.php skripta ispiše, nalaziće se u promenjivoj response. Taj response možeš upisati u select element sa ID-em “lokacija”.
Pošto sam već obećao 5 linija koda, sve ovo možete zapisati i kao:
$("#drzava").change(function() {
$.post("test.php", { lokacija: $(this).val() }, function (response){
$("#lokacija").html(response);
});
});
Ali, može to i manje…
$("#drzava").change(function() {
$("#lokacija").load("ajax.php", { lokacija : $(this).val() });
});
Sve zavisi od tebe, ali ako želiš da budeš web developer, jQuery i AJAX moraš znati. Vidiš da nije teško, nađi sat vremena i nauči ga.
15.10.2010 at 21:24
Uvažena gospodo,
razlog što Vam se obraćam upravo nalazi se u činjenici da sam naišao na par sajtova na
Internetu koji otprilike rade sledeće ( jedan od sajtova je na adresi http://web.informer.com/hide+link+on+mouseover+firefox),
kada učitam neku stranicu na kojoj imam link ka nekom skriptu na istom sajtu
prvo što se u Statusnom baru (kada se mišem nalazim iznad željenog linka) ne prikazuje link na koji ću da odem nakon pritiska na link na stranici, drugo kada prikažem sadržaj skripta na koji je ukazivao link ostaje nepromenjen i sadržaj u Adresnom baru. Pokušao sam da analiziram sadržaj skripta korišćenjem opcije View Source, međutim nisam uopše uspeo da identifikujem koji link je prosleđen do
servera kada sam pritisnuo željeni link.Da li postoji način da se “presretne”
komunikacija između Browsera i aplikativnog servera i da se “isčupa” link ili
informacija koja je prosleđena na server, pa da je nakon toga unesem u Adresni
bar i da mi server vrati upravo onaj sadržaj koji me zanima.
Dakle, u najkraćem pokušao sam da Vam iznesem svoj problem (nerazumevanje samog
mehanizma na koji način se obavlja komunikacija između Browsera i aplikativnog
servera), jer čini mi se da se u pozadini odvija efikasniji način prenosa
informacija.
Bio bih Vam zahvalan ukoliko bih mogli da mi pomognete oko problema koji
očigledno nisam u mogućnosti sam da razrešim.
Srdačan pozdrav.
Unapred zahvalan
27.11.2010 at 21:25
Kratko i jasno.. A mislio sam da je Ajax kompliciran ko i php (mozda nekome nije php tezak).
Imam pitanjce za vlasnika ovog uvazenog sajta, kolko je potrebno vremenski da zainteresiran covijek nauci programirat u php-u – pri tome mislim od najednostavnijeg sajta do neceg velicine facebooka!
Pozdrav i hvala
28.11.2010 at 14:40
Ćao,
ukoliko nemaš nikakvog iskustva, uz konstantan rad, čitanje raznih tutorijala, možda i uz neku knjigu, već u prvih mesec-dva možeš završiti neki omanji sajt. Da bi mogao da kažeš da si programer, potrebno ti je višegodišnje iskustvo, a isprogramirati nešto veličine facebooka je nezamislivo za jednog čoveka 🙂
Počeo sam već da pišem o tome kako sam postao programer, ali nisam siguran da ću uskoro završiti. No, budi u toku, biće ovde interesantnih stvari za tebe.
Pozdrav, hvala za komentar i pitanje!
01.12.2010 at 02:04
Pa Mark je prvu verziju napravio sam, doduse ona nije bila ni blizu danasnjega Facea ali to je skoro tu 🙂
Pokusat cu sad napravit nest jednostavno 🙂
Hvala tebi za odgovor i citamo se!
17.02.2011 at 12:37
clanak je odlican ali moram da ti zamerim zbog jedne stvari.
kucao sam na guglu “php tehnologija” i “HTML tehnologija” i tvoj clanak izlece u prvom slucaju na prvom mestu, a u drugom slucaju na drugom mestu.
odlican SEO, svaka cast, ali sta cemo sto rezultati nemaju direktne veze sa tvojim sadrzajem ove strane? sredi to…
21.05.2011 at 09:50
Sale odličan tekst. Od skora sam i ja imao priliku da se bavim web gui-jem i da koristim AJAX.
Koristio sam ExtJs bibiloteku na klijentu a na serveru je java koja koristi Jackson kao JSON serializer.
Ta kombinacija mi se čini lakšom od ove prikazane. Jer se sa serverske strane vraća JSON a ne html, a sa klijentske se koriste data store objekti (JSONStore) koji mogu raditi automatski (autoload) ili u nekim zahtevnijim primenama ručno pozivajući store.load(response).