Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Creare richieste asincrone in formato JSON

Sfruttare il formato JSON per le interazioni Ajax
Sfruttare il formato JSON per le interazioni Ajax
Link copiato negli appunti

Nella precedente lezione abbiamo imparato a creare richieste asincrone utilizzando la classe Request.HTML e abbiamo dato uno sguardo alle funzionalità di base offerte dalla superclasse Request. Se desideriamo colloquiare con il server scambiando dati in formato JSON piuttosto che in formato HTML, possiamo utilizzare la classe Request.JSON, che, come Request.HTML, eredita tutte le funzionalità di Request.

Questo costruttore accetta come unico parametro un oggetto, le opzioni della richiesta, che a sua volta accetta "secure" come unica proprietà. Se quest'ultima è settata a true (è conveniente non cambiare il valore a false) verrà effettuato un controllo sulla risposta per evitare di trovare codice pericoloso.

Notazione JSON

Per informazioni sul formato JSON, sul suo utilizzo e sulle sue funzionalità vi rimando alla pagina in italiano del sito JSON.org.

Richieste con oggetti JSON

Vediamo subito come utilizzare questa classe per effettuare la nostra richiesta. L'evento onComplete contiene come parametro l'oggetto "globale" JSON restituito dal server:

	// creiamo l'istanza
	var req = new Request.JSON({
		url: 'items.php', 
		onComplete: function(item) {
			alert(item.id);		// l'id dell'articolo
			alert(item.name);	// il nome dell'articolo
		}
	});
	
	// azioniamo la richiesta
	req.get();
	
	// creiamo una nuova istanza e prendiamo in considerazione solo gli articoli che hanno costo pari a 10:
	var req2 = new Request.JSON({
		url: "items.php", 
		onComplete: function(art){
			alert("L'articolo il cui costo è pari a 10 si chiama '" + art.nome + "'"); 
		}
	}).get({'costo': 10});
	

Ovviamente l'oggetto JSON restituito dal server può anche essere un array:

	var req3 = new Request.JSON({
		url: "items_array.php", 
		onComplete: function(art){
			alert('Risultato: ' + art[0] + ', ' + art[1] + ', ' + art[2]); 
		}
	}).get();
	

Come possiamo notare, tutto ruota attorno a due parti fondamentali:

  • l'evento onComplete, che ci permette di lavorare con i dati ricevuti dal server;
  • i parametri che passiamo tramite il metodo get, che permettono di creare determinate elaborazioni sul server

Conclusione

In questa sezione all'argomento AJAX abbiamo imparato come utilizzare MooTools per creare richieste asincrone in formato HTML e JSON. Imparare ad utilizzare le classi Request, Request.HTML e Request.JSON è fondamentale per la scrittura di applicazioni di nuova generazione, quindi vi rimando anche alle pagine della documentazione ufficiale dove vengono elencate tutte le opzioni ed i metodi pubblici con tutti i loro possibili utilizzi: Request - Request.HTML - Request.JSON.

Ti consigliamo anche