AJAX – La principale rivoluzione del WEB 2.0

07 May 2019 | M.A.D.R.

Cos'è AJAX, a cosa serve e come funziona. Piccola giuda turistica sulle funzionalità base di questa filosofia!

Partiamo subito con la definizione di AJAX : “Asynchronous JavaScript And XML", cosa vuol dire questo che la nostra applicanzioncina oltre al classico modo di recuperare le risorse sul server può avvalersi di questo splendido e insidioso strumento.

La vera rivoluzione AJAX:

  1. Aumenta la dinamicità di pagine web, grazie allo scambio di piccole quantità di dati
  2. Permette alle pagine web di cambiare il proprio contenuto senza effettuare refresh dell’intera pagina
  3. Tecnologia web indipendente dal software del web server
  4. Le richieste possono essere fatte asincronamente e sincronamente
  5. È usato tipicamente sul client
  6. i messaggi di request/response possono contenere XML

Reali vantaggi sull’utilizzo di AJAX:

  1. Ottimizzazione di banda, ossia il server fornisce solo i dati necessari all’applicazione
  2. Ottimizzazione caricamento della pagina.

Ma dopo tutto io ho le pagine html statiche a cosa servirebbe effettuare il cambiamento e strutturare il tutto con AJAX?

Come tutti sappiamo il caricamento della pagina a volte può risultare scomodo, attendere il download di tutte le risorse per effettuare solo dopo il rendering della pagina oggi non funziona più… Immaginate… Nel vostro sito il layout è fatto con degli stili, con degli script e con delle immagini il tutto quantificabile in “2MB", ad ogni richiesta di cambio pagina il server (a patto che non siano state definite politiche di caching) fornirà le stesse risorse che avevamo già scaricato (altri 2MB), questo non è abbastanza funzionale, in quanto con l’accesso simultaneo di 2000/3000 utenti la banda del nostro server sarà il collo di bottiglia.

Invece adesso immaginiamo di caricare solo il layout e scrivere del codice per recuperare le risorse in maniera asincrona, il tutto funzionerebbe più velocemente, caricheremo solo le parti che in quel momento ci interessano… Avremo divincolato le viste (layout in questo momento) dai dati, il che rende tutto più veloce… SI mi emoziono….!

Allora se siete arrivati a questo punto andiamo a vedere come possiamo fare una semplice chiamata in get al server, in questo piccolo esempio do per scontato il caricamento della Lib jQuery!!!

$.get('/cosa_recuperiamo_dal_server.ext',function(data){
      console.log(data);
});

Bene la nostra risorsa è bella pronta, la funzione ha restituito i dati necessari e sono stati stampati nella console (tasto F12 browser Chrome).

Significa, che dopo aver caricato la pagina abbiamo iniziato a recuperare i dati dal server, e sono stati stampati solo quando disponibili (ma ricordate la paginetta è stata già caricata…. ;)).

Analizziamo nel dettaglio:

$.get questo è il metodo che jQuery utilizza per effettuare la chiamata (in questo caso “GET"),

‘/cosa_recuperiamo_dal_server.ext’ Url della nostra risorsa che dobbiamo recuperare

function(data) Questa non fa altro che catturare l’output della nostra pagina chiamata in precedenza (cosa_recuperiamo_dal_server.ext)  e la inserisce nella variabile data:

console.log(data) Stampiamo i dati nella console….

Niente di più facile…

E la risposta del server come la faccio… Una possibile soluzione sarebbe utilizzare la notazione JSON e recuperare i dati necessari per la visualizzazione corretta dalla pagina,  ma andiamo con ordine… Abbiamo visto come effettuare una chiamata in get, e in post? Se dovessimo inviare dei dati al server e solo dopo dovremo effettuare qualche cambiamento come faccio???

$.post('cosa_inviamo_al_server.ext',{p1:parametro,p2:parametro1,....,pN:paramN},function(data){

});

Analoga a quella get, con l’aggiunta di dati da passare al server… Tutto qui…

Una possibile risposta, magari uniformata con tutte le funzione potrebbe essere una cosa del genere, dove il “code" indica lo stato della risorsa (200 ok, 404 not found) …

{
  "code":200,
  "data": {
    "id": 1001,
    "name": "Wing"
  }
}

Soluzioni complete per ogni esigenza