jQuery: differenze tra i formati di una richiesta AJAX

Esistono vari formati per le risposte AJAX in jQuery. Poco spazio tuttavia è dedicato all'analisi delle differenze tra questi formati e a ciò che implica scegliere un formato piuttosto che un altro. Vediamo come colmare questa lacuna.

Testo

Si tratta del formato più semplice attualmente disponibile. Questo formato è raccomandato quando dovete semplicemente aggiornare il testo di un elemento o quando avete dati atomici.

Una particolarità di questo formato è che può anche essere utilizzato per aggiornare i contenuti HTML di un elemento. In pratica se assemblate una stringa HTML lato server e poi usate il metodo .html() o la proprietà innerHTML, jQuery interpreterà correttamente questo formato come stringa HTML.

HTML

Questo formato può essere usato sia come semplice stringa che come un oggetto di tipo HTMLDocument. Nel primo caso serve semplicemente ad aggiornare la struttura DOM di un elemento di destinazione, nel secondo caso invece può essere usato per estrarre elementi specifici.

Esempio:

$.ajax({
	url: 'ajax.php',
	type: 'GET',
	dataType: 'html',
	data: 'q=test',
	success: function(html) {
	
	  var test = $(html).find('#test');
	  $('#output').html(test.html());
	
	
	}
});

XML

Il formato XML serve a gestire dati complessi. In questo caso viene sempre restituito un oggetto di tipo DOMDocument di cui occorre effettuare il parsing prima di poterne utilizzare i dati:

$.ajax({
	url: 'ajax.php',
	type: 'GET',
	dataType: 'xml',
	data: 'q=test',
	success: function(xml) {
	
	  var items = $(xml).find('item');
	  items.each(function() {
	  
	  	//...
	  
	  });
	
	
	}
});

JSON

Anche questo formato, come quello XML, serve a gestire dati complessi, ma ha l'indubbio vantaggio di essere molto più leggero e performante del formato XML. Quello che viene restituito è un oggetto JavaScript.

Il formato di una risposta si può presentare come segue:

{
  "proprieta": "Test"
}

Il parsing viene effettuato in questo modo:

$.ajax({
	url: 'ajax.php',
	type: 'GET',
	dataType: 'json',
	data: 'q=test',
	success: function(data) {
	
		var prop = data.proprieta;
		console.log(prop); // 'Test'
	
	}
});

JSONP

JSONP (JSON with Padding) è identico al formato JSON, ad eccezione del fatto che viene usato per richieste remote, al di fuori cioè del server su cui risiede lo script che esegue la richiesta.

Una policy AJAX, la famosa same domain, di fatto impedirebbe questo tipo di richieste, ma con questo formato sono invece possibili. La differenza sta nel formato dell'URL: se avete usato le API di Twitter avrete notato che l'URL termina con ?callback=.

Questo URL indica appunto che stiamo usando JSONP.