web design umbria

Dostoevsky? Ha fatto anche cose buone! Differenza tra SINCRONO e ASINCRONO in Ajax con Delitto e Castigo

il terzo blocco viene caricato solo dopo l’attesa del secondo

Diciamocelo all’ indirizzo http://umbriawayformazione.altervista.org/uwcode/ajaxfedor/index.html siamo di fronte a delle frasi che si pongono come fondamenta della moderna letteratura, ma se la penna del grande Fedor non scherza mettendo a nudo la miserevole condizione umana, non scherza neanche AJAX a mostrare la sua vera natura ipertecnologica. Sappiamo che il mistero sta tutto racchiuso in quella A iniziale di ASINCRONO. Ma che significa esattamente? Ce lo spiegano le frasi dello scrittore che ruotano intorno alla nostra labile transitorietà. Infatti quello che si vede alla pagina citata non è altro che una richiesta sincrona, caratterizzata impostando il parametro ASYNC a FALSE:

<!doctype html>
<html lang="en">
<title>Fëdor Michajlovic Dostoevskij, I fratelli Karamazov</title>
<head>
  <meta charset="utf-8">
  <title>Fedor con delitto e castigo SINCRONO</title>
  <script src="jquery-3.3.1.min.js"></script>
  <style>
  body { 
  padding: 40px;
  background: url(karamazov.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  }
    </style>
</head>

<body>
  <div id="pannello">
  <h1 style="text-align:center;margin-bottom: 30px;">Delitto e castigo romanzo di Fëdor Dostoevskij, ti trovi sulla pagina di caricamento dati SINCRONA</h1>
      <h1 style="text-align:center;margin-bottom: 30px;"><a href="fedor.html">Vai alla pagina Asincrona dove Ajax viene abilitato (di default il valore della proprietà async é true, quindi il parametro si omette) - LATENZA 8 SECONDI</a></h1>
	<div class="fedor"></div>
	<div class="fedor"></div>
	<div class="fedor"></div>
  </div>


  <script>

  $(document).ready(
	function(){

		$(".fedor:eq(0)").text("Io sono un Karamazov! Perché, se precipito in un abisso, è a capofitto, con la testa in giù e i piedi in su, e sono anzi contento di esservi caduto in maniera così degradante: lo considero bello");

		$.ajax(
		{
			url: "latenzaottosecondi.php",
			async: false,
			success: function(data)

			{
				$(".fedor:eq(1)").text(data);
			}
		});

		$(".fedor:eq(2)").text("Vi sono tre forze, tre sole forze sulla Terra in grado di vincere e incatenare per sempre la coscienza di questi esseri miseri e ribelli, per garantire loro la felicità: il miracolo, il mistero e l'autorità. Tu rifiutasti la prima, la seconda e la terza, dando così l'esempio");


    });

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

Questa pagina essendo caratterizzata dal parametro async: false, nello script JQuery che richiama il metodo AJAX di fatto annula la potenza fornita dall’ oggetto XMLHTTPREQUEST di DEFAULT che appunto fa intervenire lo scaricamento di dati come asincrono. Infatti osservando il comportamento della pagina, notiamo che a un certo punto la pagina http://umbriawayformazione.altervista.org/uwcode/ajaxfedor/index.html carica il primo DIV, poi aspetta 8 secondi come impostato dalla lettura del file PHP (parametro URL) e solo dopo carica il terzo DIV! Ma a questo punto togliamo async: false e vediamo l’effetto che fa all’ indirizzo: http://umbriawayformazione.altervista.org/uwcode/ajaxfedor/fedor.html

qui prima vengono caricati in modalità asincrona primo e terzo blocco

Notiamo che adesso non vi è nessun blocco della pagina perché anche senza aspettare 8 secondi di fatto anche il terzo blocco viene caricato e questa è una meravigliosa funzionalità, perchè di fatto qualcosa agisce di nascosto in background senza ostacolare il caricamento tutto di un pezzo della pagina (rendering)! Se Fedor merita giustamente il nome di un cratere sul pianeta Mercurio non possiamo certo ambire simili pretese per Ajax a livello cosmico, però rimane il fatto che uno sviluppatore che usa soluzioni sincroniche nelle sue applicazioni web è come se usasse una pistola contro Clint in una scena western.

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