Il metodo/wrapper $.ajax() di jQuery è un metodo molto potente ma in un certo senso non pienamente utilizzato. Nello specifico il metodo di callback error() raramente viene usato a scopo di debugging. Questo metodo infatti restituisce l'intero oggetto XMLHttpRequest e può essere sfruttato per capire cosa non ha funzionato in una chiamata AJAX.
Immaginiamo di avere un form di contatti in AJAX. Solitamente usiamo questo approccio:
$('#contacts').submit(function(event) {
var $form = $(this);
$.ajax({
url: $form.attr('action'),
type: 'POST',
dataType: 'html',
data: $form.serialize() + '&action=send',
success: function(html) {
//...
}
});
event.preventDefault();
});
Il problema con questo tipo di approccio è che stiamo usando solo il metodo success(), che viene eseguito solo quando la richiesta AJAX ha avuto successo. Ma se la richiesta fallisce, l'utente non vedrà alcun risultato, anche se noi sviluppatori possiamo sempre controllarne l'esito nella console JavaScript.
Quindi dobbiamo usare anche il metodo error():
$('#contacts').submit(function(event) {
var $form = $(this);
$.ajax({
url: $form.attr('action'),
type: 'POST',
dataType: 'html',
data: $form.serialize() + '&action=send',
success: function(html) {
//...
},
error: function(xhr) {
var message = 'Errore nell\'invio del form: ';
var status = xhr.status;
var text = xhr.statusText;
message += status + ': ' + text;
$('<div class="error"/>').text(message).
appendTo($form);
}
});
event.preventDefault();
});
Così facendo i nostri utenti saranno informati se qualcosa è andato storto e potranno anche aiutarci nel debugging comunicandoci l'errore AJAX prodotto dall'invio del form.