Il metodo $.ajax() di jQuery

Il metodo $.ajax() è considerato come un interfaccia AJAX di base da cui sono stati derivati altri metodi AJAX più evoluti. Nonostante questa definizione, questo metodo possiede una vasta gamma di opzioni che ci permettono di gestire ogni aspetto di una richiesta AJAX. Vediamolo in dettaglio.

Sintassi di base

$.ajax(opzioni)

Per un elenco completo delle opzioni disponibili, si consulti la documentazione ufficiale.

Esempi

Partiamo da un esempio base con le seguenti opzioni:

• url: l'URL a cui indirizzare la richiesta
• type: il tipo di richiesta (POST o GET)
• dataType: il tipo di dati restituito (HTML, JSON, JSONP, XML, testo semplice)
• data: i dati passati al server (sia sotto forma di query che di oggetto letterale)
• success: la funzione da eseguire quando la richiesta ha avuto successo.

$.ajax({
	url: 'ajax.php',
	type: 'POST',
	dataType: 'html',
	data: $('#form').serialize(),
	success: function(html) {
	
		$('#form').before(html);
	
	}
});

L'opzione success viene eseguita quando lo status dell'oggetto XMLHttpRequest restituisce un valore che indica il successo della richiesta. Se vogliamo invece eseguire il nostro codice quando la richiesta è stata completata, dobbiamo utilizzare l'opzione complete:

$.ajax({
	url: 'ajax.php',
	type: 'POST',
	dataType: 'html',
	data: $('#form').serialize(),
	success: function(html) {
	
		$('#form').before(html);
	
	},
	complete: function() {
	
		$('#form').slideUp(600);
	
	}
});

Ovviamente il server potrebbe restituire un errore, per esempio con il codice 404 che indica che la risorsa non è stata trovata. In questo caso possiamo utilizzare l'opzione error che ha tra i suoi argomenti lo stesso oggetto XMLHttpRequest:

$.ajax({
	url: 'ajax.php',
	type: 'POST',
	dataType: 'html',
	data: $('#form').serialize(),
	success: function(html) {
	
		$('#form').before(html);
	
	},
	complete: function() {
	
		$('#form').slideUp(600);
	
	},
	error: function(xhr) {
	
		console.log(xhr.status); // es. 404 Not Found
	
	}
});

Il parsing dei dati restituiti cambia ovviamente in base al tipo di dati. Per esempio se specifichiamo json come tipo di dati avremo:

$.ajax({
	url: 'ajax.php',
	type: 'POST',
	dataType: 'json',
	data: $('#form').serialize(),
	success: function(json) {
	
		$('#form').before('<p>' + json.message + '</p>');
	
	},
	complete: function() {
	
		$('#form').slideUp(600);
	
	},
	error: function(xhr) {
	
		console.log(xhr.status); // es. 404 Not Found
	
	}
});

Il caso del tipo di dati xml è particolare: infatti ciò che viene restituito è un intero oggetto di tipo DOMDocument, l'equivalente del classico oggetto document a cui siamo abituati in HTML.

In questo caso siamo costretti ad usare il metodo find() per accedere agli elementi XML:

$.ajax({
	url: 'ajax.php',
	type: 'POST',
	dataType: 'xml',
	data: $('#form').serialize(),
	success: function(doc) {
	
		var items = $(doc).find('item'),
			i,
			len = items.length;
		for(i = 0; i < len; i++) {
		
			//...
		
		}
			
	
	},
	complete: function() {
	
		$('#form').slideUp(600);
	
	},
	error: function(xhr) {
	
		console.log(xhr.status); // es. 404 Not Found
	
	}
});

Come si può notare, il metodo $.ajax() offre un controllo ed un livello di dettaglio maggiore rispetto ad altri metodi AJAX di jQuery.