SlideShare a Scribd company logo
JSON
JSON – JavaScript Object Notation reprezintă un format folosit pentru schimbul de
informa ii (într-un mod oareacum similar cu XML, este o nota ie care descrie felul în care
sunt încapsulate obiecte precum stringuri, numere, array-uri dupa reguli bine stabilite).
Formatul JSON a fost definit în RFC 4627 de Douglas Crockford.
De ce a fost necesară apari ia unei noi nota ii ?
Odată cu creşterea popularită ii AJAX şi a serviciilor web, aplica iile web au început
să se bazeze din ce în ce mai mult pe Javascript pentru a intermedia transferul de informa ii
dintre client şi server precum şi pentru interpretarea răspunsurilor primite de la server.
Aceste informa ii puteau fi trimise fie text fie în format XML. XML-ul nefiind un format
nativ JavaScript, este nevoie de parsarea acestuia pentru extragerea datelor, însemnând un set
de functii in plus şi mărirea timpulului de procesare.
JSON este în schimb perfect compatibil cu JavaScript şi nu necesită parsare pentru a
putea fi interpretat. Stringul primit de la server poate fi păstrat în interiorul codului
JavaScript al paginii şi nu trebuie decat evaluat (cu functia eval()) si este automat transformat
in variabila, nefiind necesara folosirea niciunei librarii externe. Functia eval() executa stringul
dat ca parametru ca si cum ar fi cod JavaScript.
Cum se foloseşte această nota ie?
Tipurile de date care pot fi reprezentate folosind JSON sunt :
• Number (integer, real, sau float)
• String ( Unicode, între “ şi având ca şi caracter de backslash)
• Boolean
• Array (secven ă ordonată de valori, separată prin virgule şi inclusă între paranteze
pătrate)
• Object ( colec ie de perechi cheie:valoare, separată prin virgule şi inclusă între
accolade)
• null
Exemplu de obiect reprezentat folosind JSON – obiectul descrie o persoană , având numele
şi prenumele câmpuri de tip string, adresa un alt obiect iar ca număr de telefon un Array de
numere de telefon
{
"firstName": "John",
"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumbers": [
"212 555-1234",
"646 555-4567"
]
}
Textul de mai sus poate fi păstrat ca o variabilă de tip string (să zicem cu numele contact).
Deoarece JSON este un subset al nota iei JavaScript, acest obiect poate fi recreat cu uşurin ă
folosind un apel al func iei eval().
var p = eval('(' + contact + ')');
Astfeul campurile acestui obiect devin uşor accesibile - p.firstName, p.address.city,
p.phoneNumbers[0].În general eval() ar trebui folosit pentru parsarea JSON doar dacă
sursa acestuia este sigură. pPentru a evita problemele de securitate precum code injection se
recomandă validarea stringului JSON folosind expresii regulate sau parsere pentru procesare.
RFC-ul JSON recomandă folosirea următorului cod pentru a valida JSON înainte de a aplica
eval (variabila text reprezintă stringul JSON)
var my_JSON_object = !(/[^,:{}[]0-9.-+Eaeflnr-u nrt]/.test(
text.replace(/"(.|[^"])*"/g, ''))) &&
eval('(' + text + ')');
Cum poate fi folosit JSON în paginile web?
Una din metode este folosirea JSON cu AJAX ca modalitate de încapsulare a datelor primite
de la server.
Exemplu
var the_object;//obiectul Javascript in care vom pastra raspunsul JSON
var http_request = new XMLHttpRequest();
http_request.open( "GET", url, true );
http_request.onreadystatechange = function () {
if ( http_request.readyState == 4 ) {
if ( http_request.status == 200 ) {
//populam obiectul cu răspunsul de la server
the_object = eval( "(" + http_request.responseText + ")" );
} else {
alert( "There was a problem with the URL." );
}
http_request = null;
}
};
O altă metoda o reprezintă includerea în pagină a datelor JSON folosind taguri dinamice
<script> .
Asemănări între JSON şi XML
1. Formate uşor de citit şi în eles
2. Nota ii ierarhice
3. Pot fi parsate şi utilizate în combina ie cu un număr mare de limbaje de programare
4. Pot fi folosite cu AJAX
Exemplu
String cu sintaxa JSON:
{
"numeMagazin" : "SC Gigel impex SRL",
"produse" : [
{ "nume" : "Tricou", "cantitate" : 2, "pret" : 120 },
{ "nume" : "Telefon", "cantitate" : 6, "pret" : 500 },
{ "nume" : "Creion", "cantitate" : 10, "pret" : 20 }
],
"adresa" : "Strada Primaverii nr. 3"
}
O structura echivalenta in XML:
<?xml version='1.0' encoding='UTF-8'?>
<numeMagazin>SC Gigel impex SRL</numeMagazin>
<produse>
<produs>
<nume>Tricou</nume>
<cantitate>2</cantitate>
<pret>120</pret>
</produs>
<produs>
<nume>Telefon</nume>
<cantitate>6</cantitate>
<pret>500</pret>
</produs>
<produs>
<nume>Creion</nume>
<cantitate>10</cantitate>
<pret>20</pret>
</produs>
</produse>
<adresa>Strada Primaverii nr. 3</adresa>
</xml>
Bibliografie
1. JSON RFC http://www.ietf.org/rfc/rfc4627.txt
2. Limitations of JSON http://blogs.sun.com/bblfish/entry/the_limitations_of_json3
3. JSON for the masses http://www.dustindiaz.com/json-for-the-masses/
4. Introducere JSON http://www.idevelop.ro/introducere-in-json-javascript-object-
notation.htm

More Related Content

More from Vlad Posea

HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francaisVlad Posea
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5Vlad Posea
 
Ghidul Bobocului de la Facultatea de Automatica si Calculatoare vers 2011-2012
Ghidul Bobocului de la Facultatea de Automatica si Calculatoare vers 2011-2012Ghidul Bobocului de la Facultatea de Automatica si Calculatoare vers 2011-2012
Ghidul Bobocului de la Facultatea de Automatica si Calculatoare vers 2011-2012Vlad Posea
 
Usability and accessibility on the web
Usability and accessibility on the webUsability and accessibility on the web
Usability and accessibility on the webVlad Posea
 
utilisabilite et accessibilite au web
utilisabilite et accessibilite au webutilisabilite et accessibilite au web
utilisabilite et accessibilite au webVlad Posea
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript FrenchVlad Posea
 
IPW Course 3 CSS
IPW Course 3 CSSIPW Course 3 CSS
IPW Course 3 CSSVlad Posea
 
IPW 3rd Course - CSS
IPW 3rd Course - CSSIPW 3rd Course - CSS
IPW 3rd Course - CSSVlad Posea
 
IPW HTML course
IPW HTML courseIPW HTML course
IPW HTML courseVlad Posea
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTMLVlad Posea
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Vlad Posea
 
Javascript ajax tutorial
Javascript ajax tutorialJavascript ajax tutorial
Javascript ajax tutorialVlad Posea
 
Studiu Referitor La Insertia Pe Piata Muncii (1)
Studiu Referitor La Insertia Pe Piata Muncii (1)Studiu Referitor La Insertia Pe Piata Muncii (1)
Studiu Referitor La Insertia Pe Piata Muncii (1)Vlad Posea
 
Aplicații Web Semantice - Descriere Proiect
Aplicații Web Semantice - Descriere ProiectAplicații Web Semantice - Descriere Proiect
Aplicații Web Semantice - Descriere ProiectVlad Posea
 
Stagii In Strainatate
Stagii In StrainatateStagii In Strainatate
Stagii In Strainatate
Vlad Posea
 
Student si/sau Angajat
Student si/sau AngajatStudent si/sau Angajat
Student si/sau Angajat
Vlad Posea
 

More from Vlad Posea (20)

HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Ghidul Bobocului de la Facultatea de Automatica si Calculatoare vers 2011-2012
Ghidul Bobocului de la Facultatea de Automatica si Calculatoare vers 2011-2012Ghidul Bobocului de la Facultatea de Automatica si Calculatoare vers 2011-2012
Ghidul Bobocului de la Facultatea de Automatica si Calculatoare vers 2011-2012
 
Usability and accessibility on the web
Usability and accessibility on the webUsability and accessibility on the web
Usability and accessibility on the web
 
utilisabilite et accessibilite au web
utilisabilite et accessibilite au webutilisabilite et accessibilite au web
utilisabilite et accessibilite au web
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
Css+html
Css+htmlCss+html
Css+html
 
IPW Course 3 CSS
IPW Course 3 CSSIPW Course 3 CSS
IPW Course 3 CSS
 
IPW 3rd Course - CSS
IPW 3rd Course - CSSIPW 3rd Course - CSS
IPW 3rd Course - CSS
 
IPW HTML course
IPW HTML courseIPW HTML course
IPW HTML course
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTML
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1
 
Javascript ajax tutorial
Javascript ajax tutorialJavascript ajax tutorial
Javascript ajax tutorial
 
Studiu Referitor La Insertia Pe Piata Muncii (1)
Studiu Referitor La Insertia Pe Piata Muncii (1)Studiu Referitor La Insertia Pe Piata Muncii (1)
Studiu Referitor La Insertia Pe Piata Muncii (1)
 
Aplicații Web Semantice - Descriere Proiect
Aplicații Web Semantice - Descriere ProiectAplicații Web Semantice - Descriere Proiect
Aplicații Web Semantice - Descriere Proiect
 
Stagii In Strainatate
Stagii In StrainatateStagii In Strainatate
Stagii In Strainatate
 
Student si/sau Angajat
Student si/sau AngajatStudent si/sau Angajat
Student si/sau Angajat
 

Json tutorial

  • 1. JSON JSON – JavaScript Object Notation reprezintă un format folosit pentru schimbul de informa ii (într-un mod oareacum similar cu XML, este o nota ie care descrie felul în care sunt încapsulate obiecte precum stringuri, numere, array-uri dupa reguli bine stabilite). Formatul JSON a fost definit în RFC 4627 de Douglas Crockford. De ce a fost necesară apari ia unei noi nota ii ? Odată cu creşterea popularită ii AJAX şi a serviciilor web, aplica iile web au început să se bazeze din ce în ce mai mult pe Javascript pentru a intermedia transferul de informa ii dintre client şi server precum şi pentru interpretarea răspunsurilor primite de la server. Aceste informa ii puteau fi trimise fie text fie în format XML. XML-ul nefiind un format nativ JavaScript, este nevoie de parsarea acestuia pentru extragerea datelor, însemnând un set de functii in plus şi mărirea timpulului de procesare. JSON este în schimb perfect compatibil cu JavaScript şi nu necesită parsare pentru a putea fi interpretat. Stringul primit de la server poate fi păstrat în interiorul codului JavaScript al paginii şi nu trebuie decat evaluat (cu functia eval()) si este automat transformat in variabila, nefiind necesara folosirea niciunei librarii externe. Functia eval() executa stringul dat ca parametru ca si cum ar fi cod JavaScript. Cum se foloseşte această nota ie? Tipurile de date care pot fi reprezentate folosind JSON sunt : • Number (integer, real, sau float) • String ( Unicode, între “ şi având ca şi caracter de backslash) • Boolean • Array (secven ă ordonată de valori, separată prin virgule şi inclusă între paranteze pătrate) • Object ( colec ie de perechi cheie:valoare, separată prin virgule şi inclusă între accolade) • null Exemplu de obiect reprezentat folosind JSON – obiectul descrie o persoană , având numele şi prenumele câmpuri de tip string, adresa un alt obiect iar ca număr de telefon un Array de numere de telefon { "firstName": "John", "lastName": "Smith", "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumbers": [ "212 555-1234", "646 555-4567" ]
  • 2. } Textul de mai sus poate fi păstrat ca o variabilă de tip string (să zicem cu numele contact). Deoarece JSON este un subset al nota iei JavaScript, acest obiect poate fi recreat cu uşurin ă folosind un apel al func iei eval(). var p = eval('(' + contact + ')'); Astfeul campurile acestui obiect devin uşor accesibile - p.firstName, p.address.city, p.phoneNumbers[0].În general eval() ar trebui folosit pentru parsarea JSON doar dacă sursa acestuia este sigură. pPentru a evita problemele de securitate precum code injection se recomandă validarea stringului JSON folosind expresii regulate sau parsere pentru procesare. RFC-ul JSON recomandă folosirea următorului cod pentru a valida JSON înainte de a aplica eval (variabila text reprezintă stringul JSON) var my_JSON_object = !(/[^,:{}[]0-9.-+Eaeflnr-u nrt]/.test( text.replace(/"(.|[^"])*"/g, ''))) && eval('(' + text + ')'); Cum poate fi folosit JSON în paginile web? Una din metode este folosirea JSON cu AJAX ca modalitate de încapsulare a datelor primite de la server. Exemplu var the_object;//obiectul Javascript in care vom pastra raspunsul JSON var http_request = new XMLHttpRequest(); http_request.open( "GET", url, true ); http_request.onreadystatechange = function () { if ( http_request.readyState == 4 ) { if ( http_request.status == 200 ) { //populam obiectul cu răspunsul de la server the_object = eval( "(" + http_request.responseText + ")" ); } else { alert( "There was a problem with the URL." ); } http_request = null; } }; O altă metoda o reprezintă includerea în pagină a datelor JSON folosind taguri dinamice <script> . Asemănări între JSON şi XML 1. Formate uşor de citit şi în eles 2. Nota ii ierarhice 3. Pot fi parsate şi utilizate în combina ie cu un număr mare de limbaje de programare 4. Pot fi folosite cu AJAX Exemplu
  • 3. String cu sintaxa JSON: { "numeMagazin" : "SC Gigel impex SRL", "produse" : [ { "nume" : "Tricou", "cantitate" : 2, "pret" : 120 }, { "nume" : "Telefon", "cantitate" : 6, "pret" : 500 }, { "nume" : "Creion", "cantitate" : 10, "pret" : 20 } ], "adresa" : "Strada Primaverii nr. 3" } O structura echivalenta in XML: <?xml version='1.0' encoding='UTF-8'?> <numeMagazin>SC Gigel impex SRL</numeMagazin> <produse> <produs> <nume>Tricou</nume> <cantitate>2</cantitate> <pret>120</pret> </produs> <produs> <nume>Telefon</nume> <cantitate>6</cantitate> <pret>500</pret> </produs> <produs> <nume>Creion</nume> <cantitate>10</cantitate> <pret>20</pret> </produs> </produse> <adresa>Strada Primaverii nr. 3</adresa> </xml>
  • 4. Bibliografie 1. JSON RFC http://www.ietf.org/rfc/rfc4627.txt 2. Limitations of JSON http://blogs.sun.com/bblfish/entry/the_limitations_of_json3 3. JSON for the masses http://www.dustindiaz.com/json-for-the-masses/ 4. Introducere JSON http://www.idevelop.ro/introducere-in-json-javascript-object- notation.htm