Razvoj Web aplikacija Ajax

Š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, ...).

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.

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

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"); }

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.

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().

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);

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

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.

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.

Primer

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!" ); } });

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.

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