Ajax ajax-xml

json-java script

Dr Nenad Kojić

AJAX www.w3.org/

Uvod

• AJAX nije poseban programski jezik

• AJAX je skraće i a od Asynchronous JavaScript And XML

• Pored JavaScript-a i XML azič o se osla ja a ko išće je HTTP request-a

• Nesta da d i ko išće je HTTP e uest-a AJAX ože da t aži i do ije od e se e a azličite ste i fo a ija uključujući i HTML, XML i tekstualne fajlove

• Cilj ko išće ja AJAX-a je da se na web stranici prikazuju i fo a ije zat aže e i do ije od se e a, ali ez po o og učita a ja st a e

• Postao popularan 2005. godine upotrebom od strane Google-a (Google Suggest )

Google Suggest

• Uku a a je eči za p et agu u tekstual o polje Google-a, Ja aS ipt šalje u ete ka akte e, i od se e a do ija listu

ogućih desti a ija koje udi ko is iku i te akti o sa daljim kucanjem

Nekad i sad

• U standardnoj klijent-server komunikaciji klikom na taste se šalje zahtev serveru za neko st a i o , ili delo koda postojeće st a e,

• Tada server interpretira zahtev, prevodi serverski kod, i nazad šalje novi HTML kod, koji predstavlja novu stranu

• Kod AJAX-a se p a st a i a učita a sta da d o, bez upotrebe AJAX-a i to na zahtev korisnika, ali se dalje iz e e sad žaja u sa oj st a i prikazuju u skladu sa zahtevima korisnika (uz kontakt sa serverom), ali bez ponovnog slanja koda cele strane sa se e a i učita a ja u browser istog

• Cilj primene AJAX-a je da se do iju že, olje i ko is ički o ije tisa e web stranice

• AJAX je jedna od tehnologija koja je doprinela kreiranju pojam WEB 2.0 i promeni standardnih pristupa web stranama

Gde može da radi ?

• Upotreba AJAX-a je og a iče a a o se -e koji pod ža aju ad sa XML-om, i to sa XMLHttpRequest

• XMLHttpRequest je pod ža u tj. od e zija: • Internet Explorer 5.0+,

• Safari 1.2,

• Mozilla 1.0 / Firefox,

• Opera 8+,

• Netscape 7.

Kreiranje XMLHttpRequest

• Različiti o se -i i aju azličit p istup k ei a ju ko u ika iji kroz) XMLHttpRequest-u

• Skoro svi browser-i koriste objekat JavaScript-a koji se zove XMLHttpRequest, za komunikaciju sa serverom, dok Internet

Explorer koristi ActiveXObject

• Dodatni uslov je što ko u ika ija za Internet Explorer zavisi i od verzije browser-a (5.5+ i 6.0+)

• Ove razlike se ogledaju u konkretnom kodu koji se zahteva za azličite e zije Internet Explorer-a

Kreiranje objekta / osim IE-a

• Os o i ači k ei a ja ez p o e a

• Sa proverom kreiranja

Kreiranje objekta za Explorer

6.0 +

5.5 +

Objedinjavanje kroz funkciju

Nakon pozivanja funkcije

za kreiranje (i kreiranja

objekta) počinje da se nešto radi sa podacima

Pozivanje AJAX-a

• Kako se eo AJAX s ešta u Ja aS ipt, to z ači da aže s a p a ila koja dolaze od ovog script-a

• Kod se ože s i iti i u ekste i fajl i učita ati kao ilo koji d ugi Ja a S ipt, ili klasič o u isti fajl

• Ukoliko se kod s i i u sek iji ody, iz šiće se jed o p i p olasku k oz kod što u o o slučaju ože da ude i do o je se sigu o kreira objekat), ili se snima u sekciji head, u formi funkcije koja se inicijalno mora pozvati

• Pozivanje AJAX-a ože iti sta da d o eki od događaja JavaScript-a (onchange, onblur, onfocus, onkeyup, onload ...)

Slanje zahteva

• Za slanje zahteva serveru koriste se dva metoda JavaScript-a: open() i send()

• Metod open() ima tri argumenta: • Prvi koji se defi iše etod: POST ili GET

• Drugi koji se defi iše puta ja URL do stra i e koja sadrži želje i kod a serveru, koji tre a da se izvrši

• Treći defi iše da li se ko u ika ija izvršava asi hro o

• Metod se d zati šalje podatke koje se e t e a da p ih ati, o adi i ati odgo a ajući ezultat.

• Poda i koji se šalju i aju istu ulogu kao i kada se iz ši submit podataka u fo ula u, koji se p osleđuju se e u, a se e ski kod dalje z a šta t e a da radi sa njima

• Primer:

U ovom primeru obaraća se stranici strana.php, i ne šalje joj se ni jedan podataka, što znača da ona već ima spreman odgovor (kao funkcija bez argumenata)

AJAX-xml www.w3.org/

Prihvatanje podataka

• Nako sla ja zahte a se e u, i o ade, se e će t aže e podatke atiti • Bit o je da postoji ači da se ti poda i p ih ate i dalje ko iste

• Za tu svrhu koristi se:

responseXML

• Ukoliko je ime promenljiva za XMLHttpRequest nazove p . X lHttp, tada se po oću koda

xmlhttp.responseXML;

• doh ata eo sad žaj XML doku e ta.

• Taj sad žaj t e a s estiti u eku lokal u p o lji u da i se njoj dalje pristupalo

xmlDoc= xmlhttp.responseXML;

Rad nad xml-OM

• Pristup SVIM tagovima predmet

var svi_predmeti = xmlDoc.getElementsByTagName("predmet");

• Pristup prvom tagu predmet

var prvi_predmet = xmlDoc.getElementsByTagName("predmet")[0];

• Pristup tagu ime unutar prvog taga Predmet

var ime_prvog_predmeta = prvi_predmet.getElementsByTagName("ime")[0]

• P istup tekstual o sad žaju taga i e

var ime_prvog_predmeta = prvi_predmet.getElementsByTagName("ime")[0].childNodes[0].nodeValue;

Primeri – Izgled XML FAJLA

Napisati kod kojim se dohvataju

podaci iz prvog child-a i prikazuju

u HTML-u

Primer 2 – Prikaz svih podataka u tabeli

Primer 3 – Prikaz svih podataka u tabeli sa navigacijom

JQUERY-xml

www.w3.org/

Primer 1

Primer 2

JSON-java script

www.w3.org/

XML ili JSON

JSON - JavaScript

JSON podaci u JavaScript object-u se realizuju kao

var myObject = eval('(' + myJSONtext + ')');

var myObject = JSON.parse(myJSONtext);

JavaScript sadržaj u JSON strukturi podataka

var myJSONText = JSON.stringify(myObject);

Konvertuje vrednost u

JSON

Java Script sa JSON podacima

function myHandler()

{

if (req.readyState == 4 /*complete*/)

{

var addrField = document.getElementById('addr');

var card = eval('(' + req.responseText + ')');

addrField.value = card.addresses[0].value;

}

}

Primer 1

Primer 2

Primer 3

Primer 4

Primer 5

Ajax ajax-xml

json-java script

Dr Nenad Kojić