Glossario

Glossario: AJAX (Asynchronous JavaScript And XML)

Sembra una squadra di calcio oppure un prodotto per pulire la casa, ma invece non è così! 😀

Potremmo definire AJAX come il sogno degli sviluppatori. E ti spiego perché 🙂

Con AJAX puoi:

  • Aggiornare il contenuto di una pagina senza che venga ricaricata.
  • Richiedere e ricevere dati da un server dopo che la pagina è stata caricata.
  • Inviare dati al server dopo che la pagina è stata caricata o in background (durante la navigazione).

Ma cos’è AJAX?

Non si tratta di un linguaggio di programmazione, AJAX (acronimo di Asyncronous JavaScript And XML) è una tecnica per realizzare applicazioni web interattive.

AJAX ti consente di aggiornare le pagine web in modo asincrono (asyncronous) scambiando dati con un server “dietro le quinte”. Questo significa che è possibile aggiornare parti di una pagina web senza che essa venga ricaricata.

Che differenza c’è con le applicazioni tradizionali?

Pensa a quando compili un form e trasmetti i dati. Le applicazioni web tradizionali inviano una richiesta al web server, il quale risponde mostrando una pagina nuova (fa un refresh, per capirci).

In questi casi, gran parte del codice HTML fra la prima pagina (il form) e la pagina refreshata è identico. Di conseguenza, ricaricare la pagina web da capo comporta sia uno spreco di banda sia una maggior lentezza dell’interfaccia utente.

Utilizzando AJAX, invece, è possibile inviare le richieste al server per ottenere solamente i dati necessari e aggiornarli dinamicamente nel DOM della pagina.

Ti faccio un esempio di utilizzo corretto di AJAX.

Immagina di registrarti ad un sito e di inserire il tuo nickname. Tramite AJAX è possibile capire se esiste un altro utente con il tuo stesso nickname e notificare l’errore fin da subito, evitando di ricompilare i campi.

Come funziona

Ok, ma come funziona il tutto? Dietro le quinte cosa diavolo succede?

Quando viene scatenato un evento, il browser (client) crea una XMLHttpRequest (in termini meno tecnici: una richiesta) e la invia al server. Quest’ultimo processa la richiestacrea una risposta e la inviata al client. Dopo che la risposta del server ha raggiunto il browser (client), il contenuto della pagina web viene aggiornato.

Vantaggi e svantaggi

Vantaggi

  • AJAX è molto più veloce rispetto all’architettura tradizionale.

Svantaggi

  • A volte non è possibile utilizzare il tasto “indietro” del browser.
  • È necessario che il client abbia attivato JavaScript (non è proprio uno svantaggio ma lo indico lo stesso)

Esempi di codice

Ora ti mostro un esempio di chiamata AJAX creata tramite JavaScript, il quale carica il contenuto di un file di testo e lo aggiunge nel DOM.

function caricaDocumento () {
  // Creo l'oggetto per la richiesta
  var req = new XMLHttpRequest();
  // Quando avviene un "change state"
  req.onreadystatechange = function () {
    // Se è arrivata una risposta valida
    if (this.readyState == 4 && this.status == 200) {
      // Inserisco la risposta nel DOM
      document.getElementById("contenuto").innerHTML = this.responseText;
    }
  };
  // Creo la richiesta e la invio
  req.open("GET", "file.txt", true);
  req.send();
}

 

Questa funzione può essere richiamata al click di un pulsante, ad esempio:

<div id="contenuto">
  <button type="button" >

Inutile dire che Ajax ha conquistato tutto il web 🙂

Link utili

Matteo Zambon

View Comments

Share
Published by
Matteo Zambon
Tags: UX

Recent Posts

Come tracciare la visualizzazione di una sezione specifica all’interno di una pagina web o landing page in GA4 con Google Tag Manager

Quando qualche anno fa Google Tag Manager lanciò l’Attivatore Visibilità di un Elemento ricordo ancora…

1 anno ago

Come tracciare i click al link di contatto WhatsApp in Google Analytics 4 con Google Tag Manager

Non credo sia necessario specificare che oggi la maggior parte delle visite e una bella…

1 anno ago

Privacy in GA4: i sistemi di protezione dei dati e del consenso degli utenti tua disposizione

Se sei un digital marketer o un digital analyst probabilmente saprai quanto oggi sia importante…

1 anno ago

E-commerce e Digital Analytics: il 32,5% delle aziende nel settore Food non usa strumenti di tracciamento dati per aumentare i propri profitti

In occasione dell’evento “ECOMMERCE FOOD CONFERENCE” di Bologna, Tag Manager Italia ha condotto una ricerca…

1 anno ago

Cos’è la Data Retention di GA4 e come gestirla nel modo corretto

Google Analytics 4 è uno strumento straordinario per raccogliere e analizzare i dati sul comportamento…

2 anni ago

Modelli di attribuzione di GA4: quali utilizzare e come analizzare i dati nei report

Se segui le guide e i webinar di Tag Manager Italia da un po’, probabilmente…

2 anni ago