Vuoi utilizzare JSON ma non sai da dove iniziare?

Con il passare del tempo, e l’aumento inarrestabile delle cosidette web application 2.0, si vede ormai AJAX sempre più utilizzato come tecnologia di sviluppo per lo scambio di dati in maniera asincrona.
A tale proposito, è diventato necessario un linguaggio che fosse versatile, facile da utilizzare e potesse “dialogare” tra più linguaggi di programmazione: JSON racchiude queste principali caratteristiche.
In questo articolo capiremo di cosa si tratta, qual’è la sua sintassi e vedremo un piccolo esempio per capire come utilizzarlo nelle nostre applicazioni web.

Che cos’è JSON ?

JSON è l’acronimo di JavaScript Object Notation ed è un formato adatto ad immagazzinare varie tipologie di informazioni, e quindi a scambiare queste informazioni tra applicazioni client/server.

Uno dei suoi punti di forza è la facilità di scrittura e di analisi dei dati; questo agevola notevolmente gli sviluppatori che ne faranno uso.

A conferma di ciò che abbiamo detto, Yahoo! supporta JSON come alternativa dei suoi servizi web, già dal 2005, e tantissime altre applicazione lo fanno.

XML o JSON ?

XML ha molti punti a suo favore, ad esempio, la versabilità che lo rende adattabile ad ogni situazione; infatti qualsiasi sia il nostro progetto, possiamo utilizzare xml creando nuovi tag e nidificandoli come si preferisce.
Questo linguaggio è inoltre conosciuto dalla maggior parte degli sviluppatori e, quasi in tutti i casi, è molto facile da manipolare.
A volte però, l’insieme di tanti (e diversi) tags fanno diventare il documento poco comprensibile, a prima vista, per gli sviluppatori.

JSON possiede una struttura semplicissima, che consente a chi sviluppa di capire quasi al volo il significato di ciò che stiamo vedendo; un dato da non sottovalutare mai, specialmente quando si lavora a progetti molto grandi e nei quali è richiesta la partecipazione di più persone.
L’accopiata JSON/JavaScript è, a mio avviso, perfetta poichè tutte le informazioni che vengono ricavate da JSON possono essere utilizzate in JavaScript utilizzando la funzione eval(), la quale controlla se il parametro che le viene passato, è una stringa valida; in caso positivo fa un parsing della stringa alla ricerca di codice JavaScript.

Questo non significa certo che XML è meglio di JSON o viceversa, ma che JSON è un linguaggio veramente semplice e versatile, il quale merita di sicuro un approfondimento.

Un primo sguardo alla struttura

var  person = {
	"name" 	: "Nicolas",
	"age" 	: "22",
	"alive" 	: true,
	"gender" 	: "Male",
	"power" 	: "1"
}

Nell’esempio appena visto abbiamo creato una nuova variabile, ed inserendo tutto il suo contenuto all’interno delle parentesi graffe, stiamo indicando che si tratta di un’oggetto.
All’interno dell’oggetto abbiamo inserito alcune proprietà, la sintassi è la seguente:

'nome-proprietà' : 'valore-proprietà'

nb: ricordiamoci di separare una proprietà dall’altra con una virgola, mentre dopo l’ultima proprietà non c’è il bisogno della virgola.

In JavaScript, per utilizzare una delle proprietà definite all’interno dell’oggetto “person”, si usa la seguente sintassi: nomeoggetto.nomeproprietà

console.log(  person.age ); // logs = 22
console.log( person.gender ); // logs =  Male

console.log( person.name + ' ha ' + person.age + ' anni' );

nb: il codice appena visto verrà eseguito solamente se la console del nostro browser risulta essere attiva.

  1. attivare la console in Google Chrome: Visualizza > Opzioni per sviluppatori > Console JavaScript
  2. attivare la console in Opera: Strumenti > Avanzante > Strumenti per gli sviluppatori
  3. attivare la console in Firefox: Strumenti > Console degli errori

L’esempio che abbiamo visto, si potrebbe riproporre in xml, con una struttura simile alla seguente:

<persone>
	<persona>
		<name>Nicolas</name>
		<age>22</age>
		<alive>true</alive>
 		<gender>Male</gender>
 		<power>1</power>
	</persona>
</persone>

L’esempio è molto banale, ma già a primo impatto, JSON si dimostra più chiaro e semplice.

Tipologie di dati

JSON supporta i seguenti tipi di dati:

  • Boolean ( true e false )
    "active" : true
  • Numeri
    "age"  : '22'
  • Stringhe
    "nome" :  "Nicolas"
  • Array
    "data" : [28, 02,  2010]
  • Oggetti
    "info" : {web: "Your  Inspiration Web"}

A prima vista la struttura è molto chiara, e questo ci aiuta nella comprensione del codice.
Nell’esempio precedente abbiamo creato un piccolo oggetto JSON che contiene una serie di attributi.

JSON si basa su due strutture: la prima l’abbiamo appena vista, e si tratta di un oggetto; la seconda invece sono gli array; un’oggetto è una raccolta di nomi e valori in modo non ordinato, mentre un’array è una raccolta ordinata di valori.

Oggetti nidificati

Nel primo esempio abbiamo visto come creare un’oggetto con nomi e valori che davano delle informazioni principali su una persona.
Se invece avessimo più di una persona per la quale inserire una serie di informazioni, potremmo nidificare più oggetti.
Vediamo, nel seguente esempio, come farlo:

var persone = {
	"nicolas" 	: {
		"name"     : "Nicolas",
		"age"     	:  "22"
 	},
	"piero" : {
		"name"  : "Piero",
		"age"     : "29"
	},
	"gianni" : {
		"name"  : "Gianni",
		"age"     : "20"
	}
}

In questo caso, l’oggetto persone, contiene tre “proprietà” : nicolas, piero, gianni; quest’ultime, a loro volta, sono degli oggetti che contengono una serie di nomi/valori.
Vediamo di seguito in che modo possiamo utilizzare questi dati:

alert(persone.nicolas.name);  // alert: Nicolas
alert(persone.piero.name); // alert: Pierto
alert(persone.piero.age);  // alert: 29
alert(persone.gianni.age) // alert: 20

Anche se in questo esempio, i dati contenuti nell’oggetto persone, sono più complessi rispetto al primo esempio che abbiamo visto, la struttura rimane molto chiara e semplice.

Come immagazzinare i dati in Arrays

Come abbiamo già visto, un’altra struttura con la quale immagazzinare dei dati in JSON sono gli Arrays. Vediamo di seguito un semplice esempio:

[
	{
		"name"  : "Nicolas",
		"age"     : "22"
 	},
 	{
		"name"    : "Piero",
		"age"       : "29"
 	},
 	{
		"name"     : "Gianni",
		"age"     :  "20"
	}
]

In questo esempio è stato creato un array con il nome di “persone”, ogni valore dell’array è un oggetto che contiene due coppie di nomi/valori: name ed age.
Per utilizzare tutti i dati contenuto all’interno dell’array persone, potremmo semplicemente utilizzare un ciclo for, in questo modo:

var  output = '';
for (var i = 0 ; i < persone.length; i++) {
	output += persone[i].name + ' ha ' + persone[i].age + ' anni<br  />';
}

Il risultato della variabile output, alla fine del ciclo for, sarà il seguente:

Nicolas  ha 22 Anni
Piero ha 29 anni
Gianni ha 20 anni

Un piccolo resoconto

Fin’ora abbiamo visto come sia semplice e chiara la sintassi da utilizzare in JSON.
Con l’uso sempre più frequente della tecnica di sviluppo AJAX, è diventato necessario un linguaggio quasi “universale” che potesse fungere da intermediario tra altri linguaggi di programmazione.

JSON non è solo questo, infatti, data la mancanza di un metodo nativo per utilizzare ajax in modo cross-domain, JSON sembra colmare proprio questo vuoto.

In JavaScript, JSON deve essere processato tramite la funzione eval() per poter interpretare quelle che altrimenti sarebbero delle semplici stringhe di testo.
Il problema di eval() è che incrementa i tempi di caricamento, dovendo rielaborare tutto il contenuto JSON, e che non è uno degli approcci più sicuri, dato che interpreta per intero tutto quello che può essere “trasformato” in codice JavaScript.
Questo significa che qualche malintenzionato potrebbe anche “infiltrare”, tra quello che dovrebbe essere del semplice JSON, qualche stringa in JavaScript, e quest’ultima verrebbe interpretata correttamente utilizzando la funzione eval().

Nel sito di JSON possiamo trovare, in fondo alla pagina, tantissime librerie per fare il parsing di JSON ed utilizzarlo nel linguaggio di programmazione che più preferiamo; infatti esistono anche delle librerie JavaScript, che fanno il parsing di JSON senza utilizzare la funzione eval().

Uso pratico

Nel seguente esempio utilizeremo JSON per scambiare dei dati e visualizzarli nella nostra applicazione web (per comodità, in questa guida viene utilizzata la libreria jQuery).
Potete vedere una demo di ciò che faremo facendo click qui.

Supponiamo di avere una piccola rubrica, da generare dinamicamente, caricando le persone all’interno della rubrica tramite JSON.

Per iniziare, XHTML e jQuery

Per iniziare ci serve una pagina xhtml, l’ultima versione di jQuery ed un file JavaScript nel quale inserire il nostro script.
Il codice da utilizzare potrebbe risultare simile al seguente:

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="https://www.w3.org/1999/xhtml">
<head>
	<title>Rubrica 1.0 - Your Inspiration Web</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"  />

	<script type="text/javascript"  src="./js/jquery-1.4.min.js"></script>
	<script  type="text/javascript" src="./js/site.js"></script>

	<link rel="stylesheet" href="./style/screen.css" type="text/css"  media="all" />
</head>
<body>

	<!--  contenuto html -->

</body>
</html>

Ora ci serve il file che conterrà il nostro codice JSON; in questo esempio utilizzeremo un file php, che quindi potrebbe generare in dinamico tutto il codice richiesto.
Creaiamo un nuovo file chiamato json.php ed al suo interno inseriamo il seguente codice:

[
	{
		"fname"		: "Nicolas",
		"lname"		:  "Gutierrez",
		"age"			: 22,
		"web"		: "yourinspirationweb.com",
		"number"		: "0065  5402468"
 	},
	{
		"fname"		: "Mario",
		"lname"		: "Bros",
		"age"			: 24,
		"web"		: "mariobros.com",
		"number"		: "0024  1291932"
 	},
	{
		"fname"		: "John",
		"lname"		: "Resig",
		"age"			: 25,
		"web"		: "ejohn.org",
		"number"		: "0010  5102012"
	}
]

Nel precedente codice possiamo notare la creazione di un Array contenente tre elementi; questi ultimi sono a loro volta degli oggetti che contengono una serie di proprietà/valori.

Una volta creato il file json.php, non ci resta che creare lo script che si occupi di caricarlo e rielaborare il suo contenuto.
Creiamo un nuovo file chiamato site.js, al suo interno inseriamo il seguente codice:

$(document).ready(
	function(){
		$.getJSON(
			'./json.php',
			function(data){
				// ciclo l'array
				for(i=0; i<data.length; i++){
					var  content  = '<li>';
						 content +=  data[i].fname + ' ' + data[i].lname;
						 content  += '<br />';
						 content +=  data[i].number;
						 content += '</li>';

					$('ul.rubrica').append(content);
				}

			}
		);
	}
);

Tutto il nostro script è stato inserito all’interno del metodo ready() di jQuery, il quale si occupa di eseguiro il suo contenuto solamente dopo che il DOM è stato caricato completamente.
All’interno del metodo ready() possiamo notare l’utilizzo del metodo getJSON().
Questo metodo si occupa di caricare dati in formato JSON dal server utilizzando una richiesta HTTP di tipo GET.

Il metodo getJSON accetta tre parametri:

  1. l’indirizzo del file al quale effettuare la richiesta
  2. i parametro da passare in get al file
  3. una funzione di callback per utilizzare il contenuto ottenuto

Noi utilizzeremo solo due di questi parametri: l’indirizzo (./json.php) e il callback.
Come parametro della funzione di callback, potete notare la variabile data, quest’ultima contiene tutto il codice JSON ottenuto dalla richiesta, già rielaborato; questo significa che è stato effettuato un parsing sul codice, e quindi che gli Oggetti e gli Array sono ora utilizzabili normalmente in JavaScript.

All’interno della funzione di callback puoi notare un ciclo for, che parte da 0 fino a quando la variabile i, raggiunge il valore di < (minore di) del numero totale di elementi all’interno dell’Array ottenuto (in questo caso 3).

All’interno di ogni elemento dell’array possiamo trovare, come avevamo già detto, un oggetto contenente delle proprietà e dei valori, ai quali possiamo accedere in questo modo:

data[indice_elemento].proprietà

dove indice_elemento viene definito dalla variabile i e il nome delle proprietà sono quelli inseriti nel file json.php.

All’interno del ciclo for, quindi, per accedere ad ogni proprietà dell’oggetto utilizziamo il seguente codice:

data[i].fname //  nome
data[i].lname // cognome
data[i].age // età

e così via per tutte le altre proprietà disponibili.

Nel nostro esempio è stata creata una variabile (content) nella quale viene inserito un <li> che ha come contenuto: Nome, Cognome e numero di telefono del contatto.
Questa variabile viene poi passata come parametro al metodo append() di jQuery che si occupa di inserirne il contenuto all’interno dell’elemento selezionato, specificato nel selettore, in questo caso tutti gli <ul> che abbiamo come classe ‘rubrica’ ( $(‘ul.rubrica’) );
Il risultato è una serie di <li> contententi i nomi e cognomi della nostra rubrica.

Considerazioni finali

L’esempio che hai visto in questo articolo è davvero banale, ma dimostra quanto sia comodo lavorare con JSON.
Ora che hai visto com’è facile utilizzare ed includere JSON nelle proprie applicazioni, pensi che ne farai uso in futuro?

Tag: , ,

L'autore

Nicolas è un programmatore web con la passione per il web design e per javascript. Passa la maggior parte del suo tempo libero alla ricerca di nuove idee e nuovi progetti da sviluppare. É fanatico di Wordress e jQuery e si diverte nella creazione di plugins per quest'ultimo.

Altri articoli scritti da

Articoli correlati

27 commenti

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by varsnic: RT @YIW Vuoi utilizzare JSON…
  2. I migliori post della settimana #58 | EmaWebDesign :: Web Programming / Web Design / SEO
    [...] 04) Vuoi utilizzare JSON ma non sai da dove iniziare? [...]
  3. 10 Utilissimi Frammenti di Codice jQuery per Il Vostro Sito Web
    [...] Cos’è JSON? Iniziare ad utilizzare JSON. [...]