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()
, 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.
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.