Se usi Internet da un po’ di anni, forse ricorderai quando l’aggiornamento di una pagina web la ricaricava totalmente e, nota dolente, le connessioni del tempo non avevano la velocità di oggi. Poteva bastare la selezione di una voce in un menu a tendina per assistere al caricamento dell’intera pagina con lo scopo, magari, di aggiornare solo qualche campo di un form.
Poi tutto è cambiato. Ad un certo punto le pagine web hanno iniziato a ricaricarsi sempre meno e a sembrare molto più intelligenti oltre che intuitive. Toccavi un campo e di conseguenza si aggiornavano altre sezioni senza alcun bisogno di ridisegnare tutto il contenuto del browser. Passavi con il mouse da una parte e all’istante si apriva un’area a scomparsa che riportava tutta una serie di informazioni.
Il motivo di questo avanzamento improvviso della tecnologia non sta tanto nel linguaggio usato – diciamo che Javascript ha fatto sempre la sua parte – ma piuttosto nel modo in cui il dialogo tra client (il browser) ed il server (chi ti manda pagine web e dati) si è evoluto. La parola chiave di questa evoluzione è stata Ajax, il cuore di questa tecnologia e seppur oggi si lavori in modo differente è comunque importante conoscerne il funzionamento, vedremo quindi, in questa guida, come viene applicata e come una libreria fantastica (seppur ormai datata) chiamata jQuery sia stata in grado di facilitare il tutto.
Il contesto di cui parliamo è il rapporto tra client e server. Il client potrebbe essere una qualsiasi applicazione ma in questo caso ci stiamo concentrando sul browser, un qualcosa perciò che riguarda ogni tipologia di utente. Questi i passaggi di una tipica connessione ad una pagina web:
Così è sempre stato ed ogni volta che una pagina ha bisogno di richiedere elaborazioni o dati presenti sul server deve necessariamente avviare una nuova richiesta.
Ciò che Ajax ha portato di nuovo è che tali richieste possono essere eseguite in background ossia senza che l’utente si accorga di niente. In pratica, mentre l’utente sta tranquillamente leggendo i contenuti della pagina, compilando un form o facendo altro, la tecnologia Ajax è in grado di connettersi al server e senza alcun ricaricamento dell’interfaccia scaricare dati da usare per aggiornarla più o meno parzialmente. Va da sé che il guadagno in termini di interattività e dinamicità è grandissimo.
Per comprendere i capisaldi di questa tecnologia vediamo cosa significa Ajax. E’ l’acronimo di Asynchronous JavaScript and XML. Quindi la sua nascita scaturisce dall’incontro di tre fattori:
Immaginiamo di avere due menu a tendina in una pagina web di cui il primo contiene le regioni d’Italia ed il secondo le province. L’utente deve indicare un indirizzo pertanto dovrà scegliere anche alcuni di questi elementi. Per evitare che vengano erroneamente selezionati dati non coerenti (ad esempio: come regione il Lazio e provincia Lecce) vogliamo fare in modo che al momento della selezione di una regione, il menu delle province mostri solo quelle appartenenti ad essa. Questo è un classico caso da interazione in background: l’utente seleziona come regione il Lazio e, senza alcun ricaricamento della pagina, totalmente in background, il browser invia al server una richiesta chiedendo “Quali sono le province del Lazio?”. La risposta del server sarà altrettanto dietro le quinte e porterà una sequenza di stringhe tipo [Roma, Frosinone, Latina, Rieti, Viterbo] che sarà usata per ripopolare il secondo menu a tendina.
Affinchè tutto possa funzionare perfettamente, è necessario che lo scambio di richieste e risposte sia velocissimo ma al giorno d’oggi ciò non è assolutamente un problema.
In realtà, il server non deve cambiare granché per adattarsi a questo modo di lavorare: che siano in background o meno le richieste del client pervengono sempre allo stesso modo. Generalmente l’applicazione lato server disporrà di classiche API, magari in stile REST, per scambiare dati con software esterni.
Il client deve invece utilizzare apposite funzioni affiché possano essere svolte questo genere di operazioni. Diciamo che la nascita di Ajax si fa coincidere con la definizione di un oggetto, di nome XMLHttpRequest, che implementa tutto il suo meccanismo: invio di richieste (asincrone o eventualmente sincrone) ad un server , scambiando dati in XML, senza richiedere obbligatoriamente il ricaricamento della pagina web. In realtà, XMLHttpRequest è un’interfaccia di programmazione quindi può trovare applicazione in vari linguaggi. E’ stato infatti molto usato in Javascript ma potrebbe essere sfruttato anche in VBscript (il linguaggio derivato da Visual Basic per creare pagine con tecnologia ASP).
Il suo uso non è complesso e tra l’altro – didatticamente parlando – mostra passo passo come avviene una connessione al server. Non è il massimo tuttavia in quanto a produttività del programmatore e per questo, nel lavoro, ci si orienta verso alternative molto più sintetiche come le funzioni offerte da jQuery.
Per chi non lo conoscesse jQuery è una libreria che ha reso l’utilizzo di Javascript sintetico ed immediato. E’ riuscito così bene nella sua missione da diventare uno standard de facto nella stesura di pagine web. Infatti Javascript ha cambiato per sempre le vite degli esseri umani con il suo contributo di dinamicità ma il suo codice rischiava presto di diventare prolisso e frammentario. Da un lato ciò ha portato ad una serie di integrazioni con le versioni standardizzate che passano sotto il nome di ECMAScript, dall’altro ha visto l’insorgere di una serie di ottimi strumenti come appunto jQuery, nato nel 2006. Quest’ultimo dato ricorda che è praticamente coetaneo di Ajax e XMLHttpRequest pertanto un destino comune sembrava l’unica strada possibile.
La libreria jQuery ha un uso immediato. E’ necessario importarla nei propri progetti in una delle seguenti modalità:
<head> … <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> … </head>
La libreria jQuery dispone di varie funzioni, molto comode, per gestire chiamate Ajax. Hanno tra loro una serie di aspetti in comune ma un fattore con cui bisogna prendere confidenza subito sono le funzioni di callback. Visto che le chiamate sono generalmente asincrone, riceveremo la risposta non subito ma quando sarà resa disponibile dal server, per questo dovremo indicare a quale funzione recapitare i dati scaricati sia in caso di errore sia di successo. Queste funzioni Javascript che passeremo alle richieste Ajax prendono appunto il nome di callback.
Tra gli strumenti messi a disposizione da jQuery possiamo citarne alcuni di maggior rilievo. La generica funzione ajax ammette una serie di parametri per poter perfezionare la richiesta sotto ogni aspetto. Può sembrare meno comoda delle prossime che nomineremo ma sicuramente è adatta ad ogni scopo. Per gestire esplicitamente richieste GET (quando in http leggiamo dati) e POST (quando inviamo dati ad un server per modificare il suo set informativo) possiamo usare rispettivamente le funzioni get e post che essendo chiaramente mirate richiedono meno parametri di ajax. Ancora più istantanea è la funzione load che assolve una delle principali incombenze affidate ad Ajax: scaricare in modalità GET un testo da un indirizzo web (spesso un endpoint delle API REST) per immetterlo immediatamente in un campo HTML della pagina web.
Questa presentazione ha tratteggiato i fattori essenziali di jQuery Ajax: perché esiste, in cosa consiste e come usarlo. Ora non manca che la pratica. Saranno sufficienti un editor di testo, un browser e tanta voglia di scoprire come tutto ciò sia alla portata di chiunque. Le nostre pagine web, inizialmente così statiche, prenderanno vita, impareranno a dialogare con server e riceveranno informazioni costantemente aggiornate. Non solo saranno più intriganti, ma sembreranno acquisire un maggiore interesse in quanto riusciranno immediatamente a raccogliere dati di Borsa, news, oroscopi, previsioni meteo e tanto altro, basterà solo contattare i giusti provider.
Nel prossimo articolo vedremo nel dettaglio qualche esempio pratico, nel frattempo, se vuoi approfondire è disponibile un percorso di formazione online che parte dalle basi di Javascript all’uso completo di Ajax con jQuery. La strada è tracciata, basta seguirla: buono studio!
