logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

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:

ParametroDescrizione
acceptsTipo di dati accettato dalla richiesta (predefinito: uguale a dataType).
asyncIndica se la richiesta è asincrona (predefinito: true).
beforeSend(xhr)Funzione chiamata prima dell'invio della richiesta.
cacheIndica se memorizzare nella cache la risposta della richiesta (predefinito: true)
complete(xhr, status)Funzione chiamata quando la richiesta è completata, indipendentemente dall'esito.
contentTypeTipo di contenuto dei dati inviati (predefinito: "application/x-www-form-urlencoded").
crossDomainIndica se la richiesta è cross-domain (predefinito: false per richieste dello stesso dominio, true per richieste tra domini diversi).
dataDati da inviare al server (predefinito: undefined).
dataTypeTipo 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.
globalIndica se gestire l'evento in modo globale (predefinito: true).
headersIntestazioni personalizzate da inviare con la richiesta.
ifModifiedIndica se la richiesta deve essere eseguita solo se la risorsa è stata modificata (predefinito: false).
jsonpNome del parametro per le richieste JSONP.
jsonpCallbackNome della funzione di callback per le richieste JSONP.
methodTipo di richiesta HTTP da utilizzare: "GET" o "POST" (predefinito: "GET"). Funzionamento uguale a type (non inserire sia type che method nella stessa richiesta).
passwordPassword per richieste HTTP con autenticazione.
processDataIndica se elaborare i dati inviati (predefinito: true).
statusCodeOggetto di codici di stato e le relative funzioni di callback.
success(result, status, xhr)Funzione chiamata in caso di successo nella richiesta.
timeoutTempo massimo (in millisecondi) entro cui deve essere completata la richiesta.
typeTipo di richiesta HTTP da utilizzare: "GET" o "POST" (predefinito: "GET"). Alternativa a method (non inserire sia type che method nella stessa richiesta).
urlURL della risorsa da richiedere (predefinito: la pagina corrente).
usernameNome utente per richieste HTTP con autenticazione.
xhrOggetto XMLHttpRequest da utilizzare.
xhrFieldsOggetto 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");
  }
)}