1. Razvoj Web aplikacija
Ajax

2. Šta je AJAX? Asynchronous JavaScript And XML
Skup tehnika koje se koriste da bi se poboljšao korisnički interfejs web aplikacije menjanjem sadržaja stranice bez ponovnog učitavanja.
Uključuje JavaScript, HTML i CSS na strani klijenta (u browser – u), kao i neku serversku tehnologiju (PHP, Java, ASP, ...).

3. Ajax ciklus Browser (trenutna strana)
Neki događaj pokreće iz browsera novu konekciju ka serveru (XMLHTTP request)
Serverski skript obrađuje ulazne podatke i vraća rezultate browser – u
Browser prosleđuje rezultate trenutnom prozoru.
JavaScript preuzima rezultat i prikazule podatke u prozoru.

4. Na čemu se AJAX bazira XMLHttpRequest objekat JavaScript/DOM CSS
Za asinhronu razmenu podataka sa serverom
JavaScript/DOM
Za prikaz podataka i interakciju sa njima
CSS
Za stilizovanje podataka
XML, JSON
Najčešći formati za prenos podataka

5. Osnovni elementi AJAX – a
Kreiranje XMLHttpRequest objekta
Svi moderni browseri podržavaju ovaj objekat. IE5 i IE6 koriste ActiveXObject.
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
//IE5, IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }

6. Osnovni elementi AJAX – a
Slanje zahteva serveru
Tip zahteva (GET/POST)
Najčešće se koriste GET metodi jer su, u principu, brži. POST metod treba koristiti kada se prenosi veća količina podataka ili neki korisnikovi lični podaci.
Ime skript fajla koji se izvršava na serveru
Logička promenljiva koja određuje da li će zahtev biti asinhron ili ne. Najčešće su zahtevi asinhroni. To znači da JavaScript nastavlja sa radom po završetku slanja zahteva. Ukoliko se pošalje zahtev koji nije asinhron, JavaScript kod se blokira dok ne stigne odgovor.

7. Osnovni elementi AJAX – a
Slanje zahteva serveru
xmlhttp.open("GET", “/xml", true);
xmlhttp.send();
U slučaju GET metoda se parametri mogu proslediti kroz drugi parametar funkcije open().
Ako se koristi POST metod, parametri mogu da se pošalju kao parametar funkcije send().

8. Osnovni elementi AJAX – a
GET metod
xmlhttp.open("GET", “createxml?drzava="+val, true);
xmlhttp.send();
POST metod
xmlhttp.open("POST",“createxml",true);
xmlhttp.setRequestHeader("Content-type","application/x- www-form-urlencoded”);
xmlhttp.send(“drzava=“ + val);

9. Osnovni elementi AJAX – a
Obrada odgovora
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
... }

10. readyState readyState Značenje
Objekat nije inicijalizovan (open() metod još uvek nije pozvan). 1
Zahtev je otvoren (open() metod), ali još uvek nije pozvan metod send(). 2
Zahtev je poslat, ali još uvek nema odgovora. 3
Deo odgovora je stigao, ali još uvek nije završen transfer. 4
Ceo odgovor je stigao.

11. header('Content-Type: application/xml; charset=utf-8');
Odgovor servera
responseText
Dobijeni odgovor se koristi kao string.
responseXML
Dobijeni odgovor je XML.
Pri slanju XML fajla, poslati i header
header('Content-Type: application/xml; charset=utf-8');
Obrađuje se kroz DOM.

12. Primer

13. JQuery i Ajax
$.ajax({ url: “getdata", data: { id: 123 }, type: "GET", dataType : "json", success: function( json ) { $( "<h1>" ).text( json.title ).appendTo( "body" ); $( "<div class=\"content\">").html( json.html ).appendTo( "body" ); }, error: function( xhr, status, errorThrown ) { alert( "Sorry, there was a problem!" ); console.log( "Error: " + errorThrown ); console.log( "Status: " + status ); console.dir( xhr ); complete: function( xhr, status ) { alert( "The request is complete!" ); } });

14. JQuery i Ajax - opcije http://api.jquery.com/jquery.ajax/
jQuery.ajax( url [, settings ] )
url – String sa url-om do traženog resursa.
settings – skup key/value parova kojima se konfiguriše zahtev.
jQuery.ajax(settings)
Setting – opis podataka i način rada
async (true) – način slanja zahteva
cache (true, false za dataType ‘script’ i ‘json’) – ako se postavi na false, ukazuje browseru da ne kešira podatke. Radi sa GET i HEAD zahtevima.
data – podaci koji se šalju serveru
dataType – tip podataka koji se očekuje od servera.

15. JQuery i Ajax – opcije (nastavak)
Setting – opis podataka i način rada
method – tip zahteva koji se šalje
timeout – vreme u milisekundama posle koga se računa da zahtev nije prošao
url – url na koji se šalje zahtev
username, password – korisničko ime i šifra ukoliko je potrebna autentifikacija za zahtev
Settings – callback funkcije
beforeSend – pre slanja zahteva
complete – kada se zahtev završi
error – kada se desi greška
success – kada se uspešno vrati odgovor