web design umbria

Fare uscire un coniglio dal cilindro con JSON , AJAX e JQuery? Fatto!

All’ indirizzo http://umbriawayformazione.altervista.org/uwcode/ajaxjson/ abbiamo un test di autovalutazione fatto sfruttando la versatilità di tecnologie come Ajax asincrono che pesca i dati da JSON come formato supportato da JQuery. Facciamo una riflessione sull’ applicazione: intanto è sicura perché è piccola e non ci sono dati sensibili da scardinare all’ interno di un database, poi possiamo sottolineare la praticità nella visualizzazione, in quanto vedere graficamente il quadro generale delle proprie competenze può aiutare a sviluppare una best practice e sapere in quale materia migliorare e dove si è più vulnerabili. Detto questo il core dell’ applicazione è quello che ci preme studiare, quindi vediamo in dettaglio come è composta la pagina:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Esempi Ajax</title>
  <script src="jquery-3.3.1.min.js"></script>
  <style>
  * {margin: 0; padding: 0}

body {
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    background-color: #ff9900;
}
#centrale
{
    width: 50%;
    margin: auto;
    margin-top: 20px;
	text-align: center;
}

ul
{
	list-style-type: none;
}

li
{
	background-color: white;
	color: #F28918;
	margin: 25px;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px
}

  </style>
</head>

<body>
  <div id="centrale">
	<ul>
	</ul>
  </div>


  <script>
  $(document).ready(
	function(){

		$.ajax(
		{
			url:"autovalutazioni.json",
			success: function (result)
			{
				lista=$("ul");
				$.each(
					result, function(k,v)
					{
						li=$("<li>");
						li.text(v.materia+" "+v.know+
							" % ("+v.hint+")");
						lista.append(li);
					}
				);
			}
		}
		);


    });

  </script>
</body>
</html>

Interessante ricordare che dentro le graffe nei file JSON ci sono gli oggetti ma come tenere insieme tanti oggetti? Raggruppandoli con le quadre. Rispetto a sopra vediamo la potenza del metodo each che scorre tutti i valori legate alle chiavi, vediamo anche che JQuery é così potente nel creare dal nulla gli oggetti come un LI per esempio ed ha anche la capacità di APPENDERE i dati in scorrimento letti al nodo creato nel DOM. Insomma questa semplice funzione mostra la forza di queste tecnologie, con Ajax che preleva in punta di piedi i dati senza distrurbare nessuno e JQuery che esegue la materializzazione magica delle entità presenti nel file JSON, sembra davvero un’ opera di stregoneria:

[
	{
	  "materia":"HTML",
	  "know": 90,
	  "hint": "consolidato"
	},
		{
	  "materia":"CSS",
	  "know": 80,
	  "hint": "consolidato"
	},
	{
		"materia":"COPY",
		"know": 75,
		"hint": "consolidato"
	  },
	{
		"materia":"SEO",
		"know": 70,
		"hint": "consolidato"
	  },

	{
		"materia":"Bootstrap",
		 "know": 65,
		 "hint": "consolidato"
	   },
	   {
		"materia":"Flex & Grid",
		"know": 60,
		"hint": "da approfondire"
	  },
	   {
		"materia":"Sass",
		"know": 60,
		"hint": "da approfondire"
	  },
		{
	  "materia":"PHP BASE",
	  "know": 60,
	  "hint": "da approfondire"
	},
	{
		"materia":"PHP Procedural",
		"know": 60,
		"hint": "da approfondire"
	  },
	  {
		"materia":"Codeigniter base",
		"know": 60,
		"hint": "da approfondire"
	  },
	  {
		"materia":"MySql base",
		"know": 60,
		"hint": "da approfondire"
	  },
	  {
		"materia":"Photoshop base",
		"know": 60,
		"hint": "da approfondire"
	  },
	  {
		"materia":"Ajax",
		"know": 55,
		"hint": "da approfondire"
	  },
		{
	  "materia":"PHP OOP",
	  "know": 50,
	  "hint": "da approfondire"
	},
	  {
		"materia":"JQuery",
		"know": 50,
		"hint": "da approfondire"
	  },
	  {
		"materia":"Javascript",
		"know": 50,
		"hint": "da approfondire"
	  }
	  	  	  

]

Altri articoli di (auto)formazione su AJAX presenti su https://umbriawaysemplifica.wordpress.com/ , l’importante è tirare fuori degli esempi pratici che servano anche di fatto a risolvere problemi reali perché poi le astrazioni della teoria servono ma non diventano indelebili e questo JSON mostra chiaramente da che parte andare per colmare delle lacune.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...