Ajax e JQuery: fuga per la vittoria

web developer umbria

web developer umbriaNon è un film ma una verità, come quella che afferma che lo scomparso Albin Planinc rimane un agonista di scacchi geniale negli eoni: le sue partite sono sempre una sorpresa, ricche di imprevedibilità e di magia e anche di colpi tattici formidabili, vedere profilo completo https://it.wikipedia.org/wiki/Albin_Planinc. Conoscere il suo modo di pensare per un agonista moderno è un obbligo visto che arrivava pari merito ai tornei degli anni settanta con gente del calibro del campione del mondo Petrosjan. Per unire l’utile al dilettevole e come si professa in gergo, cogliere due piccioni con una fava, ci siamo messi al lavoro con tecnologie come AJAX, JQUERY, JSON, CSS e JS per mettre in piedi una portentosa applicazione che vista da fuori non ha nulla di significativo se non un paio di interessanti soluzioni proposte da JQuery per risolvere il mistero dei falchi romolani (chi conosce la saga di Star Trek sa bene che i falchi da guerra romolani dei cattivi vicini di cancello spaziale hanno il potere di sparire e ricomparire e JQUERY consente queste soluzioni di occultamento e di ripristino con gli elementi della pagina WEB usando soluzioni come il TOGGLE per esempio, una sorta di interruttore che ha due stati alternativamente, ossia accendi e spegni o se vogliamo anche vero o falso e anche 1 e 0. Esempio applicativo: https://www.farwebdesign.com/video/planinc.mp4 . Il motore che c’è sotto è un banale database composto da un  file dal formato json, che incorpora i seguenti dati:

[
{
“id”: 0,
“move”: “mossa 22 del nero e miniatura”,
“foto”: “planinc1.jpg”,
“play”: “Vaganian vs Albin Planinc”,
“luogo”: “Hastings ENG, rd 5, Jan-02-75”,
“descrizione”: “English: Symmetrical (A32) “,
“moreInfo”: “17..Dc7!! 0-1:<br><br>1.d4 Nf6 2.c4 c5 3.Nf3 cxd4 4.Nxd4 e6 5.Nc3 Bb4 6.Ndb5 O-O 7.a3 Bxc3+ 8.Nxc3 d5 9.Bg5 h6 10.Bxf6 Qxf6 11.cxd5 exd5 12.Qxd5 Rd8 13.Qf3 Qb6 14.Rd1 Rxd1+ 15.Nxd1 Nc6 16.Qe3 Nd4 17.Qe8+ Kh7 18.e3 Nc2+ 19.Kd2 Bf5 20.Qxa8 Qd6+ 21.Kc1 Na1 22.Qxb7 Qc7+ 0-1”
},
{
“id”: 1,
“move”: “15..il nero genera mondi”,
“foto”: “planinc2.jpg”,
“play”: “Minic vs Albin Planinc”,
“luogo”: “Rovinj/Zagreb (1975)”,
“descrizione”: “Spanish Archangelsk (C78)”,
“moreInfo”: “15..De8!? idea come in partita 16 Cd6+ Ad6 e forte attacco, 0-1 30m:<br><br>1. e4 e5 2. Nf3 Nc6 3. Bb5 a6 4. Ba4 Nf6 5. O-O b5 6. Bb3 Bb7 7. d4 Nxd4 8. Nxd4 exd4 9. e5 Ne4 10. c3 d3 11. Qf3 Qe7 12. Nd2 O-O-O 13. Nxe4 Qxe5 14. Re1 f5 15. Qg3 Qe8 16. Nd6+ Bxd6 17. Rxe8 Rhxe8 18. Bf4 d2 19. Rf1 Re1 20. Bxd6 Rde8 21. f3 Bd5 22. Qf4 Bc4 23. h4 Rxf1+ 24. Kh2 Re2 25. Bxc7 Rff2 26. Qd6 Rxg2+ 27. Kh3 Rh2+ 28. Kg3 Reg2+ 29. Kf4 Rxh4+ 30. Kxf5 Rh6 0-1 “
},
{
“id”: 2,
“move”: “17..il nero muove e crea”,
“foto”: “planinc3.jpg”,
“play”: “Ljubojevic vs Albin Planinc”,
“luogo”: “Kostic Memorial (1971)”,
“descrizione”: “Spanish Archangelsk (C78)”,
“moreInfo”: “17..gf6!? idea come in partita 18 Te1 000!! 0-1 35m:<br><br>1.e4 e5 2.Nf3 Nc6 3.Bb5 a6 4.Ba4 Nf6 5.O-O b5 6.Bb3 Bb7 7.d4 Nxd4 8.Nxd4 exd4 9.e5 Ne4 10.c3 d3 11.Qxd3 Nc5 12.Qg3 Nxb3 13.axb3 Qe7 14.Bg5 Qe6 15.f4 f6 16.exf6 Bc5+ 17.Kh1 gxf6 18.Re1 O-O-O 19.Rxe6 dxe6 20.Qe1 fxg5 21.Nd2 gxf4 22.Qxe6+ Kb8 23.Nf3 Rhg8 24.c4 b4 25.Rf1 Rg6 26.Qf5 Be3 27.h3 Rg3 28.Qxh7 Bxf3 29.Rxf3 Rd1+ 30.Kh2 Bg1+ 31.Kh1 Rg7 32.Qh8+ Kb7 33.Rd3 Re1 34.g3 Bd4 35.Kh2 Rge7 0-1”
}

]

Ora la parentesi graffa sta ad indicare un array di dati. Per sapere se questo file funziona e va bene come struttura, virgole, graffe ci sono molti validatori anche on-line che possono fare al caso nostro come https://jsonformatter.curiousconcept.com/ per esempio e tanti altri che macinano tutto il codice in una finestra di input e che in uscita ci diranno se un un file è valido o non è valido, ad esempio nel mio caso la risposta è Valid (RFC 8259). Se volessi generare un errore volutamente potrei copiare tutto il contenuto senza le quadre e vediamo che tipo di situazione genera: Invalid (RFC 8259), Fixer/Validator Output,

Error: [Code 22, Structure 30]
Error: [Code 22, Structure 60]

sweb developer umbriaostanzialmente mi dà un errore specifico dichiarato sulla ROOT dell’ elemento per cui so capire che manca il famoso armadio globale intorno agli oggetti che vanno rinchiusi dentro a dei cassetti simbolici. Ok per questa applicazione semplice di studio abbiamo provato un JSON in locale nella stessa cartella, ma in rete si sente sempre di più parlare di MONGO DB https://www.mongodb.com/ e quindi la crescita delle nostre future applicazione è assicurata anche grazie a strumenti diversi da quelli usati qui come node ed express. Ma TORNIAMO A BOMBA come dicono alcuni pittoresci personaggi perugini. Ok e l’applicazione quali risorse ha nel progetto, come sono strutturate le parti dinamiche, quale inclusioni ho fatto, come ho vestito la parte nuda dei dati con i CSS? Ma la questione nodale è invece quella tennistica della rete, perchè le mie richieste in questo lavoro vengono inviate sì a un servr, ma in modalità asincrona, questo significa che mentre lancio la palla aspettando la risposta, non sono obbligato a fissare la rete per rispondere, ma posso anche fare altro finchè l’avversario non si decide a rispondere, perchè magari sta facendo altro (la metafora non suona bene del tutto ma ha un suo perchè, da un momento che i sistemi sincroni sono obbgliato ad aspettarsi l’uno con l’altro per esaurire una singola richiesta prima di fare altro. Come è permessa questa magia? Grazie all’ oggetto XMLHTTPREQUEST perchè come ogni partita a tennis che si rispetti servirà qualcuno che lancia per primo e chiede qualcosa (metodo REQUEST) e qualcun’altro che dall’ altra parte si fa carico di rispondere (la famosa RESPONSE come metodo). Ma chi è costui? Vediamo il mio file esterno JS che verrà incorporato nella pagina principale di visualizzazione che si fa carico di andare a cercare i dati in modalità asincrona per restituirmi il tutto alla velocità della luce senza che io utente debba subire il rendering della pagina e quindi aspettare, soffermarsi in particolare sulle parti in neretto:

$(document).ready(function() {

//richiamare il file JSON
$.ajax(‘planinc.json’, {
dataType: ‘json’,

})

.done(function(response){
console.log(response);

var html;
$.each(response, function(index, element){

//creiamo con jQuery la struttura html
html+= ‘<div>’
html = ‘<div class=”item-box” data-id=”‘+element.id+'”>’
html += ‘<center><span class=”item-title”>’+element.move+'</span></center>’ + ‘<br>’;
html += ‘<img src=”immagini/’+element.foto+'” />’;
html += ‘<center><span class=”item-title”>’+element.play+'</span></center>’ + ‘<br>’;
html += ‘<center><span class=”item-razza”>’+element.luogo+'</span></center>’ + ‘<br>’;
html += ‘<center><div class=”item-info”>’+element.descrizione+'</div></center>’;
html += ‘<div class=”toggle”><a href=”#” class=”info-link”>Dettagli</a></div>’;
html += ‘<div class=”more-info”><p>’+element.moreInfo+'</p></div>’;
html += ‘</div>’;

$(‘.container’).append(html);
});
});

//bottone toggle
$(‘body’).on(‘click’, ‘.info-link’, function() {

$(this).closest(‘.item-box’).find(‘.more-info’).slideToggle();
});
});

in questo caso il file essendo incluso nella stessa directory di progetto e non interrogato esternamente avrà una gestione di interrogazione semplificata rispetto a quelle situazioni dove bisogna chiedere prima a un server se è disponibile e aspettare una sura risposta prima di ricevere dei messaggi di conferma sui dati ricevuti. Ci sono delle parti a carico di JQuery che sono intuitivamente riconoscibili , metodi come append o console o come il ciclo $each per esempio che ruota tutti gli elòementi del file JSON che fa da banca dati, grazie al dollaro iniziale che richiama guarda caso un metodo AJAX all’ inizio che attinge ai dati e che in caso di conferma sulla loro esistenza avvierà un processo di impacchettamento dinamico generando la parte di HTML statica che servirà per mostrare i singoli box, contrassegnati da classi specifiche che serviranno non solo per i CSS per l’addobbo ma anche al pulsante TOGGLE in fondo per scatenare le sue azioni di click. Il contenuto dello script che ho posizionato direttamente nella pagina iniziale e che farà comparire un testo nascosto con immagine direttamente richiamando una pagina HTML che avrà un nome specifico (e non un file in formato JSON) ha questa caratteristica:

<script>
document.getElementById(‘ricevi’).addEventListener(‘click’ , caricaContenuto);

function caricaContenuto(){

var ajax = new XMLHttpRequest();

ajax.open (‘GET’ , ‘planinc.html’ , true);

ajax.onload = function(){

if(this.status == 200){

document.getElementById(‘contenuto’).innerHTML = this.responseText;
}else if(this.status == 404){
document.getElementById(‘contenuto’).innerHTML = “Risorsa non trovata!”;

}

}

ajax.send();

}

</script>

Qui c’è molta roba interessante o come si dice in gergo stradale TANTA ROBA perchè abbiamo un oggetto istanziato che apre una porta di dialogo e quindi un canale di comunicazione con l’atro tennista addetto alla RESPONSE dove chiediamo espressamente di farsi carico di OTTENERE (GET parola magica in programmazione per tutti linguaggi) un file che dovrà essere incorporato nel nostro DOM senza se e senza ma. Dall’ altra parte il tennista verifica che la richiesta abbia avuto successo in tutte le sue forme (ho torvato quello che cercavo? Lo posso mandare come da richiesta? Ci sono problemi di connessione?) dopodichè se sono dentro la parte VERA del flusso , ossia quella dove è andato tutto bene il processo avrà termine con l’assolvimento della richiesta e l’appagamento dei sensi del richiedente (si fa per dire). ALTRIMENTI invia un messaggio di errore all’ utente che qualcosa è andato storto! Rispetto al primo esempio di AJAX qui c’è un evento che viene scatenato da un bottone che caricherà la pagina fisica HTML, mentre prima il caricamento dei dati avveniva senza incorporare nulla e direttamente come situazione di default, per cui il TOGGLE Interveniva come evento solo per togliere dall’ occultamento solo una piccola parte del box. Sostanzialmente quello che si intuisce è che scrivere codice con tecniche AJAX è molto più facile rispetto all’ uso che dovremmo gestire con javascript, ma questo è lapalissiano, perchè se la seconda soluzione qui presentata ha maggiore livello di complessità, è solo perché usa javascript e non il simbolo del dollaro che caratterizza JQuery! Se ne deduce che con questi sistemi e tecnologie potrei costruire applicazioni fantastiche, magari integrando il framework bootstrap nei miei progetti e curando meglio i colori con i CSS (qui siamo pericolosamente accecanti per rivitalizzare l’economia nel settore OTTICA) . Immaginiamo di avere un parco clienti dislocato vunque e di mettere sulla pagina tanti bottono che richiamano dati diversi tipo roma. milano firenze con box che potrei aggiungere e disabilitare. Si intuisce che usando JQuery ho un notevole potenziale di sviluppo, per ora ci resta da ammirare solo le fantastiche partite di Abin Planinc in attesa di sperimentare altre applicazioni asincrone, una tecnica richiestissima per mettere in piedi interfacce veloci e performanti. Non deve allarmare tutta l’elaborata sintassi presenti negli script perchè un aspirante sviluppatore deve saper prima di tutto andare a cercarsi le informazioni che non ricorda e che sono sempre disponibili velocemente in rete, con ducumentazioni sempre prolisse offerte dagli erogatori dei servizi che sono sempre a portata di click.

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