Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
www.w3.org/
Skraćenica od JavaScript Object Notation
Predstavlja tekstualni zapis
Vrlo logi an i razumljiv za oveka
Predstavlja deo Java Script-a i može biti parsiran od strane Java Script parser-a
Koristi se kao format za razmenu informacija
između korisnika i servera
JSON predstavlja vrlo pogodan format da se
koristi kao „interface“ ili na in kako se podaci od klijenta prosleđuju serveru i obratno
Bilo koji JavaScript objekat može se lako konvertovati JSON i kao takav AJAX-om proslediti
serveru. Server takođe „razume“ JSON. Odgovor servera se takođe lako konvertuje u
JSON i AJAX-om vraća korisniku, i ko takav lako se konvertuje u JavaScript objekat, i postaje
sastavni deo korisni kog dela koda.
-
-
JavaScript objekat
-
-
-
-
Klijent Web server
JSON
JSON JSON JSON
JSON
JSON JSON
JSON
konverzija
Nezavistan je od konkretnog jezika, pa ga
„razumeju“ i klijentski i serverski jezici Lak za parsiranje
Tekstualno orijentisan
2002. pojavljuje se JSON.org a 2005. AJAX
Prednost mu daje mogućnost da predstavi neki od uobi ajenih struktura podataka: records, lists
i trees.
Nije markup language!
Podaci u JSON-u su naj ešće predstavljeni kombinacijom name:value
Podaci su razdvojeni sa ,
{ } sadrže objekte
[ ] sadrže nizove
Name je naj ešće string koji ukazuje na index asocijativnog niza
Value može biti: Strings, Numbers, Booleans, Objects, Arrays i null
Value NE može biti: function, date, undefined
Kombinacija name-value je odvojena sa { }
Između name i value su : Kombijacija name:value se odvaja sa ,
String se piše pod znacima navoda a broj ne! Primer { "ime": "Pera", "godiste": 1980 }
U slu aju niza ima se uređena kolekcija vrednosti U tom slu aju vrednosti su grupisane sa [], a
međusobno razdvojene sa , Primer [ "Pera", "Mika", "Zika" ]
Naj ešće je niz skup više name:value parova, kao što je klasi an niz skup više podataka
Primer (dodatno pogledati slajd 11 – Odgovor servera)
[ { "ime":"Pera" , "prezime":"Peric" }, { "ime ":"Mika" , "prezime":"Mikic" }, { "ime ":"Zika" , "prezime":"Zikic" } ]
Niz je esto value vrednost u paru name:value
{ "studenti": [ { "ime":"Pera" , "prezime":"Peric" }, { "ime ":"Mika" , "prezime":"Mikic" }, { "ime ":"Zika" , "prezime":"Zikic" } ]
}
Ne treba mešati više podataka grupisanih u niz od više „prostih“ podataka:
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021"
}
{
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address":
{
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021"
},
"phoneNumber": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "fax",
"number": "646 555-4567"
}
]
}
Kada se odgovor baze podataka direktno konvertuje u JSON file, pomoću PHP-a, dobija se format JSON fajla kao u primeru.
U ovom slu aju imena kolona u tabeli baze podataka su: idProizvoda, imeProizvoda, cenaProizvoda, putanjaSlika.
[ {"idProizvoda":"1","imeProizvoda":"KFD Kabl za tablete 2.5 x 0.7 mm","cenaProizvoda":"290","putanjaSlika":"slike\/1.png"},
{"idProizvoda":"2","imeProizvoda":"ANNEX Torba za Tablet 10.1\"","cenaProizvoda":"445","putanjaSlika":"slike\/2.png"},
{"idProizvoda":"3","imeProizvoda":"ANEEX 4-Ports USB Hub - E-B606","cenaProizvoda":"490","putanjaSlika":"slike\/3.jpg"}
]
Naj ešće se nudi kao alternativa XML-u
Sli nosti:
Oba su bliska itanju i tuma enju oveka Oba imaju vrlo prostu sintaksu Oba su hijerarhijski organizovana Oba su nezavisna od jezika Oba se mogu koristiti za AJAX
Razlike: Sintaksa je razli ita JSON je manje opisan JSON može biti parsiran sa JavaScript eval metodom JSON podržava nizove Name u JSON-u ne sme biti JavaScript rezervisana re XML može biti proverljiv (validated)
<?xml version='1.0' encoding='UTF-8'?>
<card>
<fullname>Sean Kelly</fullname>
<org>SK Consulting</org>
<emailaddrs>
<address type='work'>[email protected]</address>
<address type='home' pref='1'>[email protected]</address>
</emailaddrs>
<telephones>
<tel type='work' pref='1'>+1 214 555 1212</tel>
<tel type='fax'>+1 214 555 1213</tel>
<tel type='mobile'>+1 214 555 1214</tel>
</telephones>
<addresses>
<address type='work' format='us'>1234 Main StSpringfield</address>
<address type='home' format='us'>5678 Main StSpringfield</address>
</addresses>
<urls>
<address type='work'>http://seankelly.biz/</address>
<address type='home'>http://seankelly.tv/</address>
</urls>
</card>
{
"fullname": "Sean Kelly",
"org": "SK Consulting",
"emailaddrs": [
{"type": "work", "value": "[email protected]"},
{"type": "home", "pref": 1, "value": "[email protected]"}
],
"telephones": [
{"type": "work", "pref": 1, "value": "+1 214 555 1212"},
{"type": "fax", "value": "+1 214 555 1213"},
{"type": "mobile", "value": "+1 214 555 1214"}
],
"addresses": [
{"type": "work", "format": "us", "value": "1234 Main StnSpringfield"},
{"type": "home", "format": "us","value": "5678 Main StnSpringfield"}
],
"urls": [
{"type": "work", "value": "http://seankelly.biz/"},
{"type": "home", "value": "http://seankelly.tv/"}
]
}
www.w3.org/
<html>
<head>
</head>
<body>
<script type="text/javascript">
student = { "ime":"Petar", "prezime":"Petrovic", "godine":19 };
console.log(student);
</script>
</body>
</html>
itanje vrednosti iz objekta je moguće pomoću:
. notacije i pomoću [ ] notacije
<script type="text/javascript">
student = { "ime":"Petar", "prezime":"Petrovic", "godine":19 };
console.log(student);
var imeStudenta = student.ime;
console.log(imeStudenta);
var prezimeStudenta = student[“prezime”]; console.log(prezimeStudenta);
</script>
Dohvatanje svih name-ova je najlakše for-in
petljom gde se u svakoj iteraciji petlje u
promenljivoj npr. svojstvo dohvata jedan po jedan
name iz objekta
<script type="text/javascript">
student = { "ime":"Petar", "prezime":"Petrovic", "godine":19 };
for (svojstvo in student) {
console.log(svojstvo);
}
</script>
Kako se automatski može dohvatiti name, onda se dalje na bazi njega može automatki dohvatiti
svaki value
<script type="text/javascript">
student = { "ime":"Petar", "prezime":"Petrovic", "godine":19 };
for (svojstvo in student) {
var name = svojstvo;
var value = student[svojstvo];
console.log("name je: " + name + " a value je: " + value);}
</script>
Već je pomenuto da value može biti novi JSON objekat, pa se tada ta struktura zove ugnjeđdeni JSON
Bez obzira na stepen ugnježdenosti pravilo pristupa nekom value
je da se dođe do njegovog name, po ev od „vrha“ JSON-a pa
polako po dubini
student = { "ime":"Petar", "prezime":"Petrovic", "godine":19, "predmeti": {
"Matematika":"8",
"Engleski":"9",
"Programiranje":"7"}
};
var ocenaMat = student.predmeti.Matematika;
var ocenaEng= student.predmeti["Engleski"];
console.log(ocenaMat);
console.log(ocenaEng);
Sve do sada opisane aktivnosti su se odnosile na itanje name ii value vrednosti nekog JSON
objekta
Na isti na in kako je vršena selekcija name ili value da bi se pro itao, vrši se i selekcija za njegovu izmenu
Pravilo je isto kao i u klasi nom programiranju u smislu dodele vrednosti
x = y, dodeljuje vrednost y promenljivoj x
imeStudenta = student.ime; //value vrednost student.ime dodeljuje promenljivoj imeStudenta
student.ime = " Milan"; // vrednost Milan dodeljuje value vrednosti student.ime
student = { "ime":"Petar", "prezime":"Petrovic", "godine":19, "predmeti": {
"Matematika":"8",
"Engleski":"9",
"Programiranje":"7"}
};
student.ime = "Milan";
student.predmeti.Matematika = "10";
var ime = student.ime;
var ocenaMat= student.predmeti.Matematika;
console.log(ime);
console.log(ocenaMat);
student = { "ime":"Petar", "prezime":"Petrovic",
"godine":19, "predmeti": {
"Matematika":"8",
"Engleski":"9",
"Programiranje":"7"}
};
console.log(student.predmeti.Matematika);
delete student.predmeti.Matematika;
console.log(student.predmeti.Matematika);
student = {
"ime":"Petar",
"prezime":"Petrovic",
"godine":19,
"predmeti": [
{"naziv":"Matematika", "ocena":"8", "rok":"Januar"},
{"naziv":"Engleski", "ocena":"9", "rok":"Jun"},
{"naziv":"Programiranje", "ocena":"7", "rok":"Septembar"}
] };
for (zapis in student.predmeti) {
var jedanZapis= student.predmeti[zapis];
console.log(jedanZapis);
for (svojstvaPredmeta in jedanZapis) {
console.log("name je: " + svojstvaPredmeta + " a vrednost je: " + jedanZapis[svojstvaPredmeta] );
}
}
www.w3.org/
Već je naglašeno da je JSON vrlo pogodan za razmenu podataka se web severom
U toku rada sa JSON-om na strani klijenta on se ponaša kao JavaScript objekat i kao takav se ne može slati serveru
Slanje zahteva da to bude text
Zato je potrebno JavaScript objekat, koji ima strukturu JSON-a neposredno pre slanja konvertovati u text
Konverzija treba da zadrži svu sintaksu JSON-a da bi kasnije server mogao ispravno da je razume
Za te potrebe koristi se funkcija JSON.stringify()
student = {
"ime":"Petar",
"prezime":"Petrovic",
"godine":19,
"predmeti": [
{"naziv":"Matematika", "ocena":"8", "rok":"Januar"},
{"naziv":"Engleski", "ocena":"9", "rok":"Jun"},
{"naziv":"Programiranje", "ocena":"7", "rok":"Septembar"}
]
};
var konverzijaUString = JSON.stringify(student);
console.log(student);
console.log(konverzijaUString);
-
-
JavaScript
-
-
-
-
Klijent Web server
JSON
TEXT
TEXT TEXT
TEXT
TEXT TEXT
TEXT
TEXT
JSON.stringify()
JSON konverzija
JSON.parse()
Dobijanjem text formata, od server, potrebno je na
klijentu izvršiti konverziju u JSON format tj. JavaScript
objekat
To se realizuje funkcijom JSON.parse()
Ova funkcija iz teksta koji ima sintaksu JSON fajla
kreira JavaScript objekat
var x = '{ "ime":"Petar", "prezime":"Petrovic", "godine":19}';
var konverzijaUObjekat = JSON.parse(x);
console.log(x);
console.log(konverzijaUObjekat);
JSON podaci u JavaScript object-u se mogu realizovati
i pomoću funkcije eval:
Iz teksta u objekat:
var myObject = eval('(' + myJSONtext + ')');
var myObject = JSON.parse(myJSONtext);
Iz objekta u tekst:
var myJSONText = JSON.stringify(myObject);
www.w3.org/