Classi e Web Services

Il modo più semplice per scambiare informazioni tra una pagina HTML e dei Web Services è creare delle classi speculari sia lato client (JavaScript) che lato server (php, aspx, ...) e utilizzare il formato JSON per serializzare il contenuto delle istanze di queste classi, trasmetterlo e ricrearlo dall'altra parte.

Ecco un esempio di definizione di una classe Persona

class Persona
{
	Id = 0;
	Nome = "";
	Cognome = "";
	DataNascita = "";
	Note = "";
}

La serializzazione in una stringa in formato JSON di una struttura dati JavaScript avviene attraverso il comando: JsonString = JSON.stringify(MyObject)

La deserializzazione di una stringa in formato JSON nella struttura dati originaria avviene attraverso il comando: MyObject = JSON.parse(JsonString)

Per inviare una stringa JSON ad un Web Services come parametro di una chiamata POST o GET occorre anche encodare eventuali caratteri speciali attraverso: encodeURIComponent(JsonString);

Ecco un esempio di creazione di una Persona, trasformazione in JSON e ritrasformazione in persona

// Creo una Persona
let Persona1 = new Persona();
Persona1.Id = 123;
Persona1.Nome = "Mario";
Persona1.Cognome = "Rossi";
Persona1.DataNascita = new Date(2004, 11, 31, 0, 0, 0);
Persona1.Note = "A<br>\\n/d'e\"f?g!h&€ùZ";

// Trasformo la Persona1 in una stringa JSON (Oggetto -> JSON)
let Json1 = JSON.stringify(Persona1)
// Adesso lo posso mandare al server in formato JSON facendo attenzione ad encodare eventuali caratteri speciali con: encodeURIComponent(Json1);

// Supponiamo di aver ricevuto un elemento di Persona dal server attraverso una stringa Json2 in formato JSON
// Ritrasformo la stringa JSON in una Persona (JSON -> Oggetto)
let Persona2 = JSON.parse(Json2);

// Questo è un esempio di stringa Json contenente una lista di elementi Persona
let Json3 = "[{\"Id\":123,\"Nome\":\"Mario\",\"Cognome\":\"Rossi\",\"DataNascita\":\"2004-12-30T23:00:00.000Z\",\"Note\":\"A<br>\\\\n/d'e\\\"f?g!h&€ùZ\"},{\"Id\":124,\"Nome\":\"Luisa\",\"Cognome\":\"Bianchi\",\"DataNascita\":\"2005-12-30T23:00:00.000Z\",\"Note\":\"Ciao\"}]";

// Supponiamo di aver ricevuto Json3 da una chiamata ad un Web Services, ecco come ricreare una lista di Persona a partire dal Json3
let LstDatiPersona = JSON.parse(Json3);

Abbiamo accennato alla necessità di encodare caratteri speciali, a questo scopo nell'esempio è stata usata la stringa A<br>\n/d'e"f?g!h&€ùZ

Questa stringa contiene dei caratteri speciali sia per HTML che per JavaScript che per GET/POST e ne consiglio l'utilizzo per testare il corretto funzionamento delle pagine, tenendo anche aperta la Console del Browser (F12) per accorgersi di eventuali errori JavaScript.

Per comodità creo una funzione HtmlEncode che serve a trasformare in HTML una stringa che può contenere dei caratteri speciali.

// Trasforma una stringa in formato HTML codificando i caratteri speciali
function HtmlEncode(Valore)
{
	if(Valore == null || Valore == "")
	{
		return("");
	}
	return(Valore.toString().replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"));
}

Un suo esempio d'uso è:

document.getElementById("MyTxt").innerHTML = HtmlEncode(Persona1.Note);

Sempre per comodità creo una funzione GetElemProperties che serve a creare una stringa contenente tutte le propieta di una istanza di classe o di un array di istanze di classe.

// Scrive tutte le proprieta di un elemento o di un array di elementi
function GetElemProperties(Elem)
{
	let Ret = "";
	if(Elem == null)
	{
		return(Ret);
	}
	if(Array.isArray(Elem))
	{
		let n = Elem.length;
		for(let i = 0; i < n; i++)
		{
			Ret += GetElemProperties(Elem[i]);
		}
		return(Ret);
	}
	for(let PropName in Elem)
	{
		if(Elem.hasOwnProperty(PropName))
		{
			Ret += PropName + ": " + Elem[PropName] + "\n";
		}
	}
	return(Ret);
}

Un suo esempio d'uso è:

document.getElementById("MyTxt").innerHTML = HtmlEncode(GetElemProperties(LstDatiPersona ));