web design umbria

Ma allora ha fatto anche cose buone: ma chi? Per fortuna Ajax!

All’ indirizzo http://umbriawayformazione.altervista.org/ci_impossible_questions/ abbiamo un bel pulsante che se cliccato ci porta a scaricare localmente dei dati. Bello e funzionale, potrei ad esempio usare questo meccanismo anche per fare test. Ma come funziona? Cioè abbiamo un testo sul server, in formato txt consegnato a una apposita cartella, abbiamo JQuery che è il linguaggio che supporta Ajax e infine abbiamo la parte statica HTML che ha delle caratteristiche, ossia delle parti didentificabili da ID che ci consentono di operare dinamicamente al click evento che scatena una reazione propositiva, tanto che alla fine anche il pulsante cambia testo e ci spinge in una certa direzione. Ok l’approccio Learning by doing funziona nella didattica ma adesso facciamo un passo indietro e cerchiamo di focalizzarci sui capisaldi di questo meccanismo con delle domande:

La pagina quando io clicco e leggo i risultati comparsi a video subisce dei saltelli?

E’ difficile integrare Ajax nei propri progetti?

E’ vera questa cosa che Ajax ti consente di prelevare dati in background senza ricaricare la pagina? Vero o falso?

Come faccio a osservare dal vivo Ajax senza avere dei progetti già pronti per l’uso?

Siamo partiti direttamente dalla pratica, ma adesso facciamo un passo indietro e troniamo alla pratica e torniamo ai fondamenti cercando di trovare delle risposte. Ajax sta per javascript asincrono e XML ed è sempre presente nelle nostre pagine web grazie all’ oggetto xmlhttprequest, visionare https://it.wikipedia.org/wiki/XMLHttpRequest , integrato nei browser. L’idea di fondo che la pagina che vediamo è ferma mentre in sottofondo ci sono processi in corso che vengono risolti. Chi ci guadagna è la User Experience (UX) perché quando le richieste partono le risposte non obbligano la pagina iniziale a ricaricarsi, provocando quel fastidioso saltino che costringe tutto il processo a rimanere bloccato fino al compimento del task. Gestire Ajax con JQuery ci semplifica ulteriormente la vita anche se naturalmente possiamo farlo anche con javascript. All’ indirizzo https://www.postman.com abbiamo anche la possibilità di scaricare un software che ci consentirà di testare ed analizzare tutte le REST CLIENT. Si trata di una applicazione leggera gratuita installabile nel nostro sistema operativo per sperimentare tutte le configurazioni da dare alle nostre richieste, è un IDE semplice e intuitivo. Possiamo invocare dei servizi con alcuni caratteristiche e anche metodi per procedere come GET o POST. La praticità di postman é che possiamo vedere la risposta del server subito dopo aver inviato la richiesta. Quindi possiamo simulare un servizio rest semplice o complesso con l’autenticazione anche in locale se non abbiamo la possibilità di trasferire i nostri file sul server. Possiamo quindi studiare connessioni e richieste con molta praticità e completezza di dati. Adesso manca la parte divulgativa, il pusher di zona che cosa ti ha messo nello zainetto per far funzionare la dinamica presente all’ indirizzo http://umbriawayformazione.altervista.org/ci_impossible_questions/ ? Intanto nella pagina va integrato il link per JQuery. Detto questo sappiamo di aver messo esternamente un filo testo da dove vogliamo attingere su comando dell’ evento click per estrapolare dati. Quindi quello che bisogna fare è scrivere una bella funzione con il nostro javascript semplificato all’ interno dell’ area focalizzata:

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

		$("button").click(
			function()
			{
				$.ajax(
					{
						url: "http://nomedominio/nomedirectoryproject/nomerisorsa/txt/paroleday.txt",
						success: function(result)
						{
							$("#nomearea").html(result);
              							$("#nomedelpulsante").html('Scrivi ogni giorno!');

						},
						error: function (request, status, error)
						{
							alert("Errore nella richiesta");
						}

					}
				);

			}

		);

  });
  </script>

Notiamo un’ insieme di funzioni annidate, l’ultima delle quali nasconde il core di tutta la nostra potentissima applicazione ossia un array di dati contraddistinti da proprietà come URL, SUCCESS, ERROR che gestiscono chiamata e risposta! Notare come con il semplice simbolo del dollaro seguito dal METODO AJAX posso interagire facilmente con JQuery dentro l’oggetto xmlhttprequest presente all’ interno del browser. Notare anche come sia facile anche cambiare il testo del pulsante dopo l’estrazione volendo potrei anche farlo scomparire cambiando metodo! Questa volta è proprio il caso di dire che il nostro PUSHER di zona ha proprio messo nello zainetto roba decente e ha fatto davvero cose buone!

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...