Razvoj Web aplikacija Ajax ta je AJAX Asynchronous

Razvoj Web aplikacija Ajax

Šta je AJAX? � Asynchronous Java. Script 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 Java. Script, HTML i CSS na strani klijenta (u browser – u), kao i neku serversku tehnologiju (PHP, Java, ASP, . . . ).

Ajax ciklus Browser (trenutna strana) Java. Script preuzima rezultat i prikazule podatke u prozoru. Browser prosleđuje rezultate trenutnom prozoru. 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

Na čemu se AJAX bazira � XMLHttp. Request objekat ◦ Za asinhronu razmenu podataka sa serverom � Java. Script/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 XMLHttp. Request objekta ◦ Svi moderni browseri podržavaju ovaj objekat. IE 5 i IE 6 koriste Active. XObject. var xmlhttp; if(window. XMLHttp. Request){ xmlhttp = new XMLHttp. Request(); } else { //IE 5, IE 6 xmlhttp = new Active. XObject("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 Java. Script nastavlja sa radom po završetku slanja zahteva. Ukoliko se pošalje zahtev koji nije asinhron, Java. Script 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. set. Request. Header("Content-type", "application/xwww-form-urlencoded”); xmlhttp. send(“drzava=“ + val);

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

ready. State Značenje 0 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.

Odgovor servera � response. Text ◦ Dobijeni odgovor se koristi kao string. � response. XML ◦ Dobijeni odgovor je XML. ◦ Pri slanju XML fajla, poslati i 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", data. Type : "json", success: function( json ) { $( "<h 1>" ). text( json. title ). append. To( "body" ); $( "<div class="content">"). html( json. html ). append. To( "body" ); }, error: function( xhr, status, error. Thrown ) { alert( "Sorry, there was a problem!" ); console. log( "Error: " + error. Thrown ); 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/ � j. Query. ajax( url [, settings ] ) ◦ url – String sa url-om do traženog resursa. ◦ settings – skup key/value parova kojima se konfiguriše zahtev. � j. Query. ajax(settings) � Setting – opis podataka i način rada ◦ async (true) – način slanja zahteva ◦ cache (true, false za data. Type ‘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 ◦ data. Type – 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 before. Send – pre slanja zahteva complete – kada se zahtev završi error – kada se desi greška success – kada se uspešno vrati odgovor