Categorie
Tips WordPress

Come fare una chiamata AJAX ( GET / POST )

Una chiamata AJAX è una tecnologia di client-side che permette di ottenere dati da un server senza dover ricaricare la pagina.
E’ l’acronimo di “Asynchronous JavaScript and XML”, ed è alla base dello sviluppo web moderno.

Nell’articolo mostrerò alcuni esempi di codice per effettuare una chiamata AJAX.

Come fare una chiamata AJAX con JavaScript (senza jQuery)

JQuery è una libreria JavaScript molto comoda, non sempre però è disponibile.
Esistono due modi per fare una chiamata AJAX con JavaScript “nativo”: XMLHttpRequest e Fetch API.

Testare gli esempi proposti

Puoi testare comodamente gli esempi proposti utilizzando la funzionalità “code snippet” del tuo browser, come descritto nel mio articolo “Eseguire codice JavaScript su qualunque pagina web

Effettuare una chiamata AJAX con XMLHttpRequest

XMLHttpRequest è stato il primo metodo messo a disposizione degli sviluppatori per effettuare chiamate AJAX.

Nonostante il nome, XMLHttpRequest può essere usato per effettuare una chiamata HTTP per ottenere qualunque tipo di dato (Plain Text, XML, JSON, immagini, video, …).

Effettuare una chiamata GET con XMLHttpRequest

Il seguente codice mostra come fare una chiamata GET usando XMLHttpRequest.

var xhr = new XMLHttpRequest();
var url = "server-side.php";
var parametri = "?parametro1=valore1&parametro2=valore2";
xhr.open('GET', url + parametri);

// questa funzione verrà chiamata al cambio di stato della chiamata AJAX
xhr.onreadystatechange = function () {
	var DONE = 4; // stato 4 indica che la richiesta è stata effettuata.
	var OK = 200; // se la HTTP response ha stato 200 vuol dire che ha avuto successo.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText); // Questo è il corpo della risposta HTTP
		} else {
			console.log('Error: ' + xhr.status); // Lo stato della HTTP response.
		}
	}
};

// Invia la richiesta a server-side.php
xhr.send(null);

La richiesta creata da questo codice sarà simile alla seguente
xmlhttprequest get

Effettuare una chiamata POST con XMLHttpRequest

Il codice incluso qui sotto permette di effettuare una chiamata POST usando XMLHttpRequest.

var xhr = new XMLHttpRequest();
var url = "server-side.php";
var parametri = "parametro1=valore1&parametro2=valore2";
xhr.open('POST', url);

// imposto l'header per informare che stiamo facendo una richiesta POST application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// questa funzione verrà chiamata al cambio di stato della chiamata AJAX
xhr.onreadystatechange = function () {
	var DONE = 4; // stato 4 indica che la richiesta è stata effettuata.
	var OK = 200; // se la HTTP response ha stato 200 vuol dire che ha avuto successo.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText); // Questo è il corpo della risposta HTTP
		} else {
			console.log('Error: ' + xhr.status); // Lo stato della HTTP response.
		}
	}
};

// Invia la richiesta a server-side.php
xhr.send(parametri);

Lo snippet di codice precedente creerà una richiesta simile alla seguente
xmlhttprequest post

Effettuare chiamate AJAX con Fetch API

La Fetch API è uno standard più moderno e flessibile per la creazione di chiamate AJAX.
Essendo stata introdotta più recentemente, non è supportata dai browser datati, come Internet Explorer.

Effettuare una chiamata GET con Fetch API

Di seguito troverai il codice per fare una chiamata GET usando Fetch API.

fetch('/?parametro1=valore1&parametro2=valore2')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.text().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

Effettuare una chiamata POST con Fetch API

Il seguente codice mostra come fare una chiamata POST usando Fetch API.

fetch('/', {
    method: 'post',
    headers: {
     'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: "parametro1=valore1&parametro2=valore2"
  })
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.text().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

Come fare una chiamata AJAX con jQuery

Usando jQuery è possibile chiamate AJAX utilizzando una sintassi più concisa.
Nel seguito vedrai alcuni esempi pratici di chiamate GET / POST utilizzando jQuery.

Effettuare una chiamata GET con jQuery

Il seguente codice mostra un semplice esempio per effettuare una chiamata AJAX GET.

jQuery.ajax({
  method: "GET",
  url: "/",
  data: { parametro1: "valore1", parametro2: "valore2" },
  success: function(data, textStatus, jXHR) {
     console.log("funzione chiamata quando la chiamata ha successo (response 200)", data, textStatus, jXHR);
  },
  error: function(jqXHR, textStatus, errorThrown) {
     console.log("funzione chiamata quando la chiamata fallisce", jqXHR, textStatus, errorThrown);  
  }
})

Effettuare una chiamata POST con jQuery

Il metodo per fare una chiamata AJAX POST usando jQuery è simile a quanto è necessario fare per eseguirne una di tipo GET.

jQuery.ajax({
  method: "POST",
  url: "/",
  data: { parametro1: "valore1", parametro2: "valore2" },
  success: function(data, textStatus, jXHR) {
     console.log("funzione chiamata quando la chiamata ha successo (response 200)", data, textStatus, jXHR);
  },
  error: function(jqXHR, textStatus, errorThrown) {
     console.log("funzione chiamata quando la chiamata fallisce", jqXHR, textStatus, errorThrown);  
  }
})

Effettuare una chiamata AJAX con jQuery in WordPress

Solitamente, quando si usa jQuery, gli esempi che si trovano fanno uso della notazione “$”, quindi una chiamata AJAX ha una forma simile a

$.ajax({...})

Tuttavia quando si sviluppa del codice per un sito fatto usando WordPress, non è possibile usare questa notazione, poiché la libreria jQuery inclusa è in modalità noConflict.

Per questo motivo, gli esempi di chiamate AJAX jQuery inclusi in questa pagina fanno uso della notazione “jQuery”, invece di quella “$”.

Conclusioni

In questo articolo ho elencato alcuni esempi pratici per effettuare chiamate AJAX in GET / POST.
Se si ha la necessità di supportare i browser obsoleti, consiglio di usare XMLHttpRequest, altrimenti è consigliabile utilizzare Fetch API.

Hai bisogno di una privacy policy per il tuo sito?

Scopri Iubenda

Seguimi su