jQuery sa AJAX-om

AJAX je skraćenica za Asinhroni JavaScript i XML. Korišćenjem AJAX-a, Internet aplikacija može da šalje i prima podatke sa servera asinhrono (u pozadini) bez smetnji na postojećoj strani (nema potrebe za osvežavanjem strane). Možemo ažurirati delove stranice bez prekidanja korisnika. Zbog ovoga korisnik može dobiti utisak da je odziv sajta mnogo bolji i utisak je približniji desktop aplikacijama.

Podaci se preuzimaju preko XMLHttpRequest objekta. Iako sadrži XML u imenu, upotreba XML-a nije neophodna, već se često podaci razmenjuju preko JSON-a (JavaScript Object Notation) ili samog HTML. Pošto Internet pretraživač pokreće AJAX poziv, postoji mala razlika u pokretanju AJAX poziva između različitih Internet pretraživača. Upravo iz ovog razloga jQuery je idealno rešenje, jer je biblioteka kompatibilna za različite internet pretraživače, a AJAX poziv će biti identičan za sve Internet pretraživače. jQuery će nam biti od pomoći i pri manipulaciji sadržaja strane (u četvrtom poglavlju ovog tutorijala smo videli manipulaciju sa DOM-om), jer je u većini slučajeva potrebno da sa odgovorom koji dobijemo od servera ažuriramo deo strane.

jQuery poseduje više različitih AJAX metoda i one se razlikuju po tipu podataka koji se šalju ili primaju (JSON ili HTML) i po načinu slanja podataka (POST ili GET). Ipak sve ove metode su skraćenice jedne metoda koja obuhvata sve pomenute načine, a to je metoda ajax().

Najjednostavnija AJAX metoda je load(). Ona učitava HTML sadržaj fajla sa servera unutar elementa za koji se poziva. Prilikom učitavanja sadržaja fajla koristi se metoda innerHTML() kako bi se sadržaj ubacio u odgovarajući element, pa zbog toga postoji mogućnost da učitan sadržaj bude različit od onog sadržaja kada bi fajl bio pozvan samostalno. Ograničenje load() metode je da fajl koji učitavamo mora biti na istom domenu kao i internet strana koja ga poziva, jer u određenim slučajevima Internet pretraživači će blokirati ovaj AJAX zahtev. Primer na strani

$("#rezultat").load("fajl_koji_želimo_da_učitamo.html", "podaci_koje_šaljemo");