Sono anni che programmo in Ajax disse il candidato. Avanti il prossimo rispose il selezionatore!

web developer umbria

Ajax non è un linguaggio di programmazione: ecco spiegato il motivo perchè l’ennesimo Head Hunter abbia deciso di tagliare corto e non perdere tempo proseguendo la selezione. Ma come, cercate di abbozzare voi, io come programmatore esperto Senior di Ajax posso aggiornare una pagina Web senza ricaricare la pagina, posso richiedere dati da un server dopo che la pagina è stata caricata, posso ricevere dati da un server dopo che la pagina è stata caricata e inviare dati a un server in background. Ma ormai il danno è fatto perchè Ajax è solo un oggetto del browser il cui acronimo sta a significare AJAX = JavaScript asincrono e XML, è un oggetto quindi che permette comunicazioni asincrone ma non é un linguaggio di programmazione: utilizza solo una combinazione di XMLHttpRequest incorporato nel browser (per richiedere dati da un server Web) e JavaScript e HTML DOM (per visualizzare o utilizzare i dati). Certo è anche fuorviante perché le applicazioni AJAX potrebbero utilizzare XML per trasportare dati, ma è altrettanto comune trasportare altro come formato JSON per esempio. Il meccanismo di Ajax è semplice: ci sono due tennisti, uno serve, l’altro al di là della rete pronto a rispondere. Quando la palla passa la rete la richiesta del primo tennista si trasforma in risposta per l’altro che a sua volta battendo la palla invia i dati con una COMUNICAZIONE SINCRONA, costringendo al rendering della pagina e al blocco di risorse quindi. Ma Ajax è una magia come le palle tirate da Federer, per cui quando a fondo campo si ritrova a rispondere fa un colpo assurdo: anzichè mandare la palla dall’ altra parte, sembra sparare un colpo che va fuori dal campo, poi vediamo la palla impennarsi lontano e ricadere infine a terra svincolandosi dal perimetro di gioco rientrando misteriosamente in campo cadendo dal cielo e toccando l’incrocio delle linee avversarie. Vediamo il progetto di studio ispirato dalla bibbia di tutti gli sviluppatori, il sito https://www.w3schools.com/ . Sfruttando la versatilità di un componente che viene riconosciuto dagli sviluppatori come ACCORDION, all’ indirizzo https://www.farwebdesign.com/projectajax/ nella prima voce LOAD TEXT, abbiamo un caso reale: https://www.farwebdesign.com/projectajax/loadtxt.html. Analizziamo il contenuto del BODY:

<div id=”demo”>
<h1>The XMLHttpRequest Object</h1>
<button type=”button” onclick=”loadDoc()”>Change Content</button>
</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML =
this.responseText;
}
};
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
}

l’oggetto viene istanziato con variable = new ActiveXObject(“Microsoft.XMLHTTP”); a questo punto abbiamo a disposizione come allegato diversi metodi e diverse proprietà come evidenziato dalle immagine incluse. Per inviare una richiesta a un server, utilizziamo i metodi open () e send () dell’oggetto XMLHttpRequest per trasportare dati come testo semplice o testo JSON. AJAX consente alle pagine Web di essere aggiornate in modo asincrono scambiando dati con un server Web dietro le quinte. Ciò significa che è possibile aggiornare parti di una pagina Web, senza ricaricare l’intera pagina:

xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();

In questo esempio l’oggetto istanziato xhttp riceve una richiesta dopodichè una funzione verifica se si stabilisce il collegamento dati e se ci sono errori nella pagina, dopodichè se tutto a posto il contenuto della pagina viene caricato in RISPOSTA sul blocco divisore identificato come identificativo unico ID=”DEMO”. Fine della fiaba. A questo punto sorgono molti interrogativi tipo: ma è meglio spedire i dati in GET o in POST? E soprattutto le richieste devono per forza indirizzarsi sui file testo come risorsa? No, vediamo ad esempio che xhttp.open(“GET”, “demo_get.asp”, true); xhttp.send(); é una semplice richiesta GET che punta a una pagina ASP che dall’ altra parte evidentemente farà qualcosa. Vediamo che posso anche spedire dati sulla URL con xhttp.open(“GET”, “demo_get2.asp?fname=Henry&lname=Ford”, true); xhttp.send(); per esempio. O anche posso fare richieste in POST con xhttp.open(“POST”, “demo_post.asp”, true); xhttp.send(); dove potrebbe sorgere la domanda critica: ma adesso come faccio a spedire i dati  coppie nome/valore come facevo con il GET usando i punti interrogativi? Niente paura Ajax lo può fare con la sequenza di istruzioni xhttp.open(“POST”, “demo_post2.asp”, true); xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); xhttp.send(“fname=Henry&lname=Ford”); il dio AJAX alla fine della fiera inviando in modo asincrono con JavaScript non deve attendere la risposta del server, ma può invece eseguire altri script in attesa della risposta e gestire il tutto quando i dati sono impacchettati! Adesso usiamo uno script che impiega una funzione per rispondere, esempio LOAD TEXT FUNCTION presente nel progetto all’ indirizzo https://www.farwebdesign.com/projectajax/loadtxtfunction.html:

<div class=”topnav”>
<a class=”active” href=”index.html”>Home</a>
<a href=’txt/loadtxtfunction.txt’ target=’_blank’>download example</a>
</div>

<div id=”demo”>
<h1>The XMLHttpRequest Object</h1>
<button type=”button” onclick=”loadDoc()”>Change Content</button>
</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML =
this.responseText;
}
};
xhttp.open(“GET”, “txt/ajax_info.txt”, true);
xhttp.send();
}
</script>

Con l’oggetto XMLHttpRequest è possibile definire una funzione da eseguire quando la richiesta riceve una risposta. La funzione è definita nella proprietà onreadystatechange dell’oggetto XMLHttpResponse. Posso anche disabilitare true e portarlo a falso per rendere la chiamata SINCRONA per esigenze di lavoro, del tipo che dobbiamo ricaricare la pagina con il rendering per vedere la differenza con quella asincrona per esempio, ossia quando Federer deve rispondere a un servizio tirando la palla direttamente dall’ altra parte senza liberare il colpo della scuola di Hokuto che abbiamo visto sopra. Ma attenzione il FALSE non è raccomandato perché JavaScript si interromperà fino a quando la risposta del server non sarà pronta. Se il server è occupato o lento, l’applicazione si bloccherà o si arresterà. XMLHttpRequest sincrono è in procinto di essere rimosso dallo standard Web, ma questo processo può richiedere molti anni. I moderni strumenti di sviluppo sono incoraggiati a mettere in guardia sull’utilizzo di richieste sincrone e possono generare un’eccezione InvalidAccessError quando si verifica.


CONCLUSIONI
: alla fine del tutorial ispirato dal bellissimo sito di supporto didattico https://www.w3schools.com/, abbiamo capito che la risposta da dare al selezionatore al prossimo colloquio non è programmo in Ajax da tanti anni, ma quella corretta conosco le chiamate asincrone Ajax e so destreggiarmi con chiamate post e get se serve implementare questa situazione nei mie progetti. in uno dei prossimi articoli di approfondimento con Umbriaway Consulting vedremo le funzioni di callback, ossia una funzione passata come parametro a un’altra funzione. Se in un sito Web sono presenti più attività AJAX, è necessario creare una funzione per l’esecuzione dell’oggetto XMLHttpRequest e una funzione di richiamata per ciascuna attività AJAX. La chiamata di funzione deve contenere l’URL e quale funzione chiamare quando la risposta è confezionata e pronta per essere rispedita al mittente.

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

%d blogger hanno fatto clic su Mi Piace per questo: