Predavanje iz Dinamičkih web aplikacija, 10. predavanje Video: https://www.youtube.com/watch?v=9Nx_yF9BMOM&index=11&list=PLYqeapOP_CtS0kbdbo_GXFgnS81JGAd8L Tema: AJAX Datum snimanja: 12.5.2016

1. AJAX
Stipe Predanić

2. AJAX
● Asynchronous JavaScript and XML
● zašto koristiti AJAX?
● Asinkrono
● JavaScript
● XML
– ili zamjene...

3. Asinkronost
● JavaScript izvršava UI dretvu (jednu!)
● web worker u HTML-u 5 ne radi kroz UI dretvu, ve uć
dodatnim dretvama
● asinkrono slanje dopušta
● slanje i primanje podataka prema/od servera bez
uplitanja u normalan tijek rada JS koda
● kad stigne odgovor – obradi se.
● prednost: brži odziv jer je komunikacija “nevidljiva”
korisniku
● nedostatak: kompleksnost sustava

4. JavaScript & XML
● JavaScript
● osnovni jezik na webu.
● XML
● eXtensible Markup Language
● služi za razmjenu podataka izme u sustavađ
● u AJAX-u se za razmjena podataka mogu koristiti i
drugi na inič
● isti tekstč
● JSON

5. Zašto je AJAX popularan?
● Server – klijent arhitektura vs Debeli - tanki
klijenti
● AJAX dopušta debele klijente u web okruženju!
● klijent dobiva
– bolji odaziv i interaktivnost aplikacije
– manje optere enje mrežnih resursa (!?!?)ć

6. Nije sve tako lijepo
● AJAX aplikacije je
● kompleksnije izvesti
● inicijalno u itavanje aplikacije (uobi ajeno) traječ č
duže
● kompatibilnost izme u browserađ
● sigurnost

7. Usamljeni otok?
● AJAX nije jedina tehnologija koja nudi (ili je
nudila) ovakve mogu nostić
● FLASH
● SilverLight
● Java appleti
● Mozilla XUL
● i drugi (npr. OpenLaszlo)

8. Ideja AJAX-a
● napravi zahtjev
● stvaranje XMLHttpRequest (ili sli no)č
● poslati zahtjev poslužitelju
● standardni GET/POST
● obraditi odgovor
● osvježiti HTML dokument
● vlastiti JS kod ili neki od JS frameworka

9. Izrada zahtjeva
var request = false;
try {
request = new XMLHttpRequest();
} catch (ms) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (ms2) {
request = new
ActiveXObject("Microsoft.XMLHTTP");
}
}

10. Slanje zahtjeva
● otvori zahtjev (postavi parametre)
● postavi callback funkciju
● pošalji zahtjev
function myAjaxFunction() {
request.open("GET", "resource.txt", true);
request.onreadystatechange = updatePage;
request.send(null);
}

11. Stvaranje zahtjeva
● open()
● parametri: HTTP metoda (GET, POST, HEAD...),
URL, asinkroni (true) ili sinkroni (false) mod rada
● zahtjev je sandboxan na domenu
● priprema zahtjev, ne zapo inje konekcijuč
● onreadystatechange
● postavite gotovu funkciju ili umetnite novu
request.onreadystatechange =
function() { // JS kod }

12. Stvaranje zahtjeva
● send()
● šalje zahtjev
● parametar: što se šalje
– ako je GET ili HEAD onda šaljemo null (sve je kodirano u
URI-ju)

13. Obrada odgovora: callback funkcija
● callback funkcija se zove više puta, za svaki odgovor
poslužitelja
● treba testirati u kakvom je statusu zahtjev i primiti
odgovor
● readyState
– u kojoj je fazi rada (0 – prije open(), 1 – sve namješteno (prije
send()), 2 – poslan zahtjev (server radi), 3 – primljeno djelomi no,č
4 – primljeno sve)
● status
– HTTP response kodovi (5 predavanje! :D 200 – uspješna
komunikacija)
● responseText
– dobiveni odgovor

14. Obrada odgovora
function updatePage() {
if (request.readyState == 4 &&
request.status == 200)
{ var odgovor = request.responseText;
//obrada odgovora
}
}

15. Osvježavanje DOM-a
● standardni rad sa HTML DOM-om
● Važno je obraditi dobiveni odgovor
● obrada XML-a
– XML koristi XML DOM.
● obrada JSON-a
● isti tekst (HTML kod)č
document.geteElementById('nekiId').innerHTML= odgovor;

16. Rad sa XML-om
var xml = "<order><table>" + escape(table) + "</table><line><beer>"
+ escape(beer) + "</beer><quantity>" + escape(quantity) +
"</quantity></line></order>";
request.open("POST", "services/order", true);
//promjeni Content-type kako bi podaci bili prepoznati kao XML
request.setRequestHeader("Content-Type", "text/xml");
// odredi callback funkciju
request.onreadystatechange = updatePage;
//pošalji XML
request.send(xml);
function updatePage() {
if (request.readyState == 4 && request.status == 200) {
var xml = request.responseXML;
//rad sa odgovorenim XML dokumentom
}
}

17. Rad sa JSON-om
● obrada XML-a je teška. JSON objekti su jednostavni
var jsonObjekt={"order": [ “table”: table, line:[ "beer": beer,
“quantity”:quantity ]]};
request.open("POST", "services/order", true);
// odredi callback funkciju
request.onreadystatechange = updatePage;
//pošalji JSON
request.send(jsonObjekt.toJSONString());
function updatePage() {
if (request.readyState == 4 && request.status == 200) {
var noviJSONobjekt = JSON.parse(request.responseText);
//rad sa JSON objektom
}
}

18. Može li se lakše?
● gotovo svaki JS framework ima AJAX pozive
● jQuery
● ajax funkcija
● callback funkcija ovisno o uspjehu konekcije
– beforeSend, error, dataFilter, success, complete
● možete imati više callback funkcija za isti uspjeh
var jqxhr = $.ajax({ url: "example.php" })
.success(function() { alert("success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
// perform other work here ...
// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });

19. jQuery AJAX
● jQuery pokušava prepoznati podatke
● prepoznaje XML prema Content-type-u koji šalje server
● ako je primljen HTML (opet Content-type), JavaScript iz tog
koda se izvršava
● ako je JSON objekt, postoji jQuery .parseJSON() funkcija
koja parsira JSON (ako browser nema ugra enu sigurnuđ
verziju parsera)
// ovaj primjer šalje podatke na server POST metodom
// i u alert box-u daje informaciju koju je vratio server
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

20. COMET
● AJAX napravi zahtjev koji se izvrši
● PULL pristup server-klijent arhitekturi
● kako poslati podatke sa servera prema klijentu
bez da on posebno zatraži
● PUSH pristup
– Mogu sa HTML 5 i Server Side Eventsć
● COMET je skupni naziv za neke od tehnologija koje
omogu uju PUSHć
– ideje:
● streaming - jedna konekcija koja se nikad ne gasi (npr iframe)
● AJAX sa dugim vremenom ekanja dok server ne isporu i podatkeč č

21. Idu e predavanjeć
● Izrada stranica za mobilne platforme