Il metodo .ajax() per le richieste Ajax

Nelle lezioni precedenti, abbiamo visto come eseguire richieste GET e POST e come usare il metodo .load(). Questi metodi sono delle semplificazioni per eseguire più facilmente richieste Ajax. In questa lezione, vediamo come funziona .ajax(), il metodo più completo per le richieste Ajax.

Il metodo .ajax()

Il metodo .ajax(), come abbiamo detto nell'introduzione, permette di effettuare richieste Ajax. Rispetto ai metodi .get() e .post(), .ajax() offre maggiore controllo su tutti gli aspetti di una richiesta, inclusi i parametri, i tipi di dati, e molto altro.

La sua sintassi è: $.ajax({parametro:valore, parametro:valore, ...}).

Vediamo i parametri che possiamo utilizzare:

Parametro	Descrizione
`accepts`	Tipo di dati accettato dalla richiesta (predefinito: uguale a `dataType`).
`async`	Indica se la richiesta è asincrona (predefinito: `true`).
`beforeSend(xhr)`	Funzione chiamata prima dell'invio della richiesta.
`cache`	Indica se memorizzare nella cache la risposta della richiesta (predefinito: `true`)
`complete(xhr, status)`	Funzione chiamata quando la richiesta è completata, indipendentemente dall'esito.
`contentType`	Tipo di contenuto dei dati inviati (predefinito: "application/x-www-form-urlencoded").
`crossDomain`	Indica se la richiesta è cross-domain (predefinito: `false` per richieste dello stesso dominio, `true` per richieste tra domini diversi).
`data`	Dati da inviare al server (predefinito: `undefined`).
`dataType`	Tipo di dati atteso nella risposta della pagina richiesta: "xml", "html", "script", "json" o "text". Se non inserito, verrà scelto automaticamente.
`error(xhr, status, error)`	Funzione chiamata in caso di errore della richiesta.
`global`	Indica se gestire l'evento in modo globale (predefinito: `true`).
`headers`	Intestazioni personalizzate da inviare con la richiesta.
`ifModified`	Indica se la richiesta deve essere eseguita solo se la risorsa è stata modificata (predefinito: `false`).
`jsonp`	Nome del parametro per le richieste JSONP.
`jsonpCallback`	Nome della funzione di callback per le richieste JSONP.
`method`	Tipo di richiesta HTTP da utilizzare: "GET" o "POST" (predefinito: "GET"). Funzionamento uguale a `type` (non inserire sia `type` che `method` nella stessa richiesta).
`password`	Password per richieste HTTP con autenticazione.
`processData`	Indica se elaborare i dati inviati (predefinito: `true`).
`statusCode`	Oggetto di codici di stato e le relative funzioni di callback.
`success(result, status, xhr)`	Funzione chiamata in caso di successo nella richiesta.
`timeout`	Tempo massimo (in millisecondi) entro cui deve essere completata la richiesta.
`type`	Tipo di richiesta HTTP da utilizzare: "GET" o "POST" (predefinito: "GET"). Alternativa a `method` (non inserire sia `type` che `method` nella stessa richiesta).
`url`	URL della risorsa da richiedere (predefinito: la pagina corrente).
`username`	Nome utente per richieste HTTP con autenticazione.
`xhr`	Oggetto XMLHttpRequest da utilizzare.
`xhrFields`	Oggetto di campi aggiuntivi da impostare sull'oggetto XMLHttpRequest.

Tutti questi parametri possono essere utilizzati come si preferisce. I parametri che contengono delle funzioni possono utilizzare i parametri inseriti tra parentesi.

Esempi di richieste Ajax

Vediamo un esempio di configurazione per una richiesta Ajax:

$.ajax({
  url: "pagina.html",
  method: "POST",
  data: { nome: nome, cognome: cognome },
  dataType: "text",
  success: function(result) {
    alert("Risposta dal server: " + result);
  },
  error: function(xhr) {
    alert("Errore nella richiesta AJAX: " + xhr.status);
  },
  complete: function() {
    alert("Richiesta Ajax completata.");
  }
});

In questo esempio, il codice effettua una richiesta POST al server utilizzando i dati specificati. La risposta dal server viene quindi elaborata dalla funzione di success, mentre eventuali errori vengono gestiti dalla funzione di error. La funzione di complete viene eseguita indipendentemente dall'esito della richiesta.

Vediamo ora come modificare il contenuto degli elementi con le richieste Ajax:

<button id="pulsante">Inserisci contenuto</button>
<div></div>

<script>
$("#pulsante").click(function(){
  $.ajax({
    url: "esempio.txt",
    success: function(result){
      $("div").html(result);
    }
  });
});
</script>

Nell'esempio, utilizziamo il metodo .html() per cambiare il contenuto dell'elemento <div>. L'abbiamo visto nella lezione Cambiare il contenuto degli elementi.

Prova!Completa gli spazi vuoti con il testo appropriato.

// Crea una richiesta Ajax di tipo POST con jQuery
$.({
url: "pagina.txt",
method: "",
success: function(result){
$("div").html(result);
}
)}

Prova!Scegli l'opzione corretta tra quelle elencate.

// Crea una funzione in caso di errore in una richiesta Ajax
$.ajax({
url: "esempio.php",
____: function(){
alert("C'è stato un errore. Riprova");
}
)}

	error
	errorType
	success