HTML5 - Ajax

Fino a qualche anno fa si pensava Ajax come il futuro delle applicazioni web, dopo che è iniziata la sua massificazione con Gmail, tuttavia oggi bisogna considerare che è la realtà, infatti un sito che in questo momento non incorpora Ajax in qualche modo non è molto ben visto.
Ajax è un insieme di tecniche che ci permettono di inviare e ricevere informazioni senza dover aggiornare il documento o ricaricare la pagina, quindi semplificando potremmo dire che è uno strumento per salvare e velocizzare la navigazione.
Cos'è l'Ajax?
Ajax risponde a un acronimo per Javascript e XML asincroni vale a dire Javascript sì XML asincrono, tuttavia attualmente viene utilizzato il formato JSON più comunemente di XML, JSON è persino considerato da molti lo standard.
Tutto questo si traduce in qualcosa di molto semplice da spiegare, la ricezione e l'invio dei dati indipendentemente dal caricamento e dall'aggiornamento delle pagine, ad esempio se vogliamo che ogni volta che clicchiamo su un pulsante e una parte della pagina porti dati da un database , invece di inviare una richiesta al server inviando un form e aggiornando l'intera pagina, ciò che faremo sarà tramite una funzione Javascript e una richiesta XMLHttpRequest comunicare con il server per recuperare i dati e modificare solo la parte della pagina di cui abbiamo bisogno.
Come vediamo questo, sembra e suona meraviglioso, l'unico problema o limite è l'uso del Javascript, poiché se lo disattiviamo nel nostro browser non saremo in grado di godere di queste funzionalità.
Il nostro primo documento con Ajax
Ora che conosciamo le basi e i fondamenti dell'Ajax, elaboreremo un piccolo esempio che può illustrarci questa tecnica.
Per prima cosa vediamo il seguente codice poi spiegheremo a cosa corrisponde:

 EsempioMele Ciliegie Bananepremere un pulsante

Questo esempio semplicemente ciò che fa è che quando facciamo clic su un pulsante attiviamo una funzione chiamata HandleButtonPress (), questo crea un nuovo oggetto di tipo XMLHttpRequest e con questo possiamo prendere l'HTML all'interno del pulsante, prendere il suo testo e concatenarlo all'estensione .HTML per poter chiamare un documento con lo stesso nome creato in precedenza.
Allora la funzione handleResponse effettua una verifica dello stato della richiesta se è andata a buon fine, in un contenitore già designato caricherà il documento corrispondente che abbiamo chiamato.
Vediamo in immagini come sarà il flusso del processo:

Nella prima immagine ci viene chiesto di fare clic su uno dei pulsanti, quindi quando lo facciamo nella seconda immagine vediamo come viene caricato il contenuto, che in base alla funzione Ajax descritto nell'esempio il codice proviene da un documento HTML già creato, questo contenuto viene caricato nel div in cui si trovava l'istruzione che diceva di premere un pulsante.
Con questo finiamo il tutorial, abbiamo già la possibilità di iniziare a sperimentare Ajax per arricchire l'esperienza di navigazione all'interno delle nostre pagine o documenti HTML.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo