Moćna kombinacija tehnologija – Ajax i jQuery

U ovom članku ćemo pružiti uopšten pregled obe tehnologije i objasniti kako je jQuery omogućio da Ajax razvoj bude lakši nego ikada ranije.

Šta je Ajax?

Od svog nastanka 2005. godine, Ajax (Asynchronous JavaScript and XML) je promenio internet kakvog poznajemo danas. Ajax je omogućio web sajtovima da evoluiraju u Rich Internet Aplications (RIAs), dozvoljavajući stanicama da šalju direktne zahteve web serverima bez ponovnog učitavanja stranica. Ova mogućnost je od vitalnog značaja za postizanje boljeg korisničkog iskustva u klijentskim aplikacijama.

Ajax u praksi

Recimo da imate login formu za vašu web aplikaciju. Da bi obezbedili proveru da li se unešeno korisničko ime i lozinka poklapaju sa stvarnim bez korišćenja Ajaxa, web aplikacija bi morala učitati još jednu novu stranicu koja pokazuje da li je login uspešan ili neuspešan. Ovo je stari način korišćenja login formi.

Mnogo bolji pristup ovome problemu bi bila provera login podataka upotrebom Ajaxa.

Evo kako Ajax funkcioniše: kada ukucate login podatke i kliknete da se ulogujete, pomoću JavaScript funkcije poziva se Ajax koji šalje dva parametra – korisničko ime i lozinku.

Web server (uobičajno preko nekog serverskog skriptnog  jezika kao što je PHP) uzima ta dva parametra i vrši upit u bazu podataka da proveri da li ima poklapanja. Ako pronađe podatke u bazi podataka, server vraća poruku da se unos poklapa ili u drugom slučaju vraća poruku o grešci.

Sledeće, treba da imamo JavaScript funkciju koja prihvata Ajax odgovor. Ako je odgovor uspešan, može se koristiti window.location da pošalje korisnika na njegov korisnički panel.

Ako odgovor sadrži poruku o grešci, aplikacija je može prikazati  na ekranu bez ponovnog učitavanja stranice.

Glavna poenta u ovom primeru je da ne morate ponovo učitavati celu stranu pri jednostavnoj verifikaciji korisnika, time se postiže da web aplikacija bude mnogo efikasinja i ima brži odgovor, a pogotovo ako je stranica velika dobićete i znatnu uštedu uštedu u protoku podataka.

Šta je jQuery?

Objavljen u januaru 2006. godine, jQuery je cross-browser JavaScript biblioteka dizajnirana da pojednostavi skripte na klijentskoj strani u Html-u.

Sa upotrebom na skoro milion web sajtova, Jquery je najpopularnija JavaScript biblioteka trenutno.

jQuery čini lakšim upravljanje DOM objektima, događajima (events), efektima i Ajaxom, automatski se brine o JavaScript curenju memorije/resursa i ima bezbroj dodataka od razvijenih od strane trećih lica.

Problem sa Ajaxom

Uprkos njegovom revolucijonarnom uticaju na web, Ajax može biti komplikovan za upotrebu čak i za iskusne developere.

Ustaljena praksa je da se kreiraju prilagođene funkcije za rukovanje sa Ajax pozivima, tako da funkcionalnost može biti ponovno upotrebljena širom web aplikacije.

Ovo može postati malo nezgodno kada aplikacija koristi različite vrste Ajax poziva – kao što je mogućnost rukovanja sa sinhronim i asinhronim pozivima – ili mogućnost rukovanja različitim formatima odgovora kao što su string poruke, HTML, CSV, XML, JSON, itd.

Standardni ajax pozivi imaju sledeću formu:

[css]
function httpRequest(id) {
if (window.XMLHttpRequest) { // code for IE7+, FF, Chrome, Opera, Safari
http=new XMLHttpRequest();
}
else { // code for IE6, IE5
http=new ActiveXObject("Microsoft.XMLHTTP”);
}
http.onreadystatechange=function() {
if (http.readyState==4 && http.status==200) {
response = http.responseText;
// do something with response
}
}
dest=”servlet.php?id=” + id;
http.open("GET”, dest);
http.send();
}
[/css]

Ako vaša web aplikacija koristi samo jedan Ajax poziv, to nije preterano zahtevno za inplementaciju. Međutim, problemi mogu nastati kada aplikacija ima više poziva, a vi pokušavate da napravite kod koji se može ponovo iskoristiti.

Koncept Ajaxa je poslati zahtev web serveru, sačekati na odgovor i ažurirati HTML stranicu. Bilo bi zgodno kreirati prilagođene funkcije  kao httpRequest() koja uzima dva parametra – url adresu i funkciju odgovora – koja bi mogla biti više puta iskorišćena na celoj aplikaciji.

Jednom kada počnete da radite sa Ajaxom, videćete da i jednostavan proces kreiranja Ajax poziva može postati veoma komplikovan kada pokušavate napraviti funkciju odgovora upotrebom eval()  i pronalaženju načina kako nova funkcija treba da rukuje sa sinhronim pozivima, asinhronim pozivima i različitim formatima odgovora.

Na kraju dana i jednostavna ideja kreiranja prilagođene funkcije httpRequest() može da se pretvori u veliki projekat.

Druga prednost jQuery je da ima dodatne Ajax funkcije i metode koje možete da koristite i koje mogu dalje da ubrzaju razvoj projekta.

Ajax i jQuery

Pored drugih prednosti, jedna od najboljih mogućnosti jQuery je sposobnost da iskoristite Ajax sa malo truda. Primer takvog Ajax poziva može izgledati ovako:

[css]
$.Ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
[/css]

Ako ste razvijali Ajax aplikacije ranije bez jQuery, na primeru iznad možete videti prednosti. jQuery pomoću ovog jednostavnog API-ja komunicira sa Ajaxom. Možete kontrolisati sve uključujući url-ove, keš, success funkcije, razne vrste podataka, čak i sinhornizaciju, sve preko jedne kratke deklaracije.

Ako kreirate ozbiljne web aplikacije sa brzim odgovorom, obavezno iskoristite prednosti JavaScript razvojnih okurženja kao što su jQuery ili MooTools.