jQuery: URL di dati con AJAX e web storage

  • jQuery
  • Gabriele Romanato

Gli URL di dati sono diventati popolari sul Web da quando la versione 8 di Internet Explorer ha cominciato a supportarli. In realtà gli sviluppatori più attenti li ricorderanno certamente come una caratteristica già presente nell'Acid Test 2 dei CSS. jQuery può gestire questo tipo di URL anche tramite AJAX.

Un URL di dati contiene semplicemente dei dati codificati in Base64. Possiamo vedere un esempio di questo tipo di URL nel codice che segue:


<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

Se copiate ed incollate nella barra degli indirizzi del browser l'URL contenuto nell'attributo src dell'immagine di esempio otterrete, premendo Invio, l'immagine originale. In PHP è semplice creare una stringa in Base64 da un file:


$file = file_get_contents('image.gif');
$encoded = base64_encode($file);
echo $encoded;

Ed è altrettanto semplice usare AJAX e jQuery per utilizzare la stringa appena creata:


$.ajax({
	type: 'GET',
	dataType: 'text',
	url: 'script.php',
	data: null,
	success: function(text) {
		var dataURL = 'data:image/gif;base64,' + text;
		$('img#test').attr('src', dataURL);
	}
});

L'uso degli URL di dati è indicato per immagini di piccole dimensioni, come le icone. Dato che anche IE8 supporta l'oggetto localStorage, si può creare una copia cache di ciascun URL di dati:


var dataURL = 'data:image/gif;base64,' + text;
localStorage.setItem('image', dataURL);

Altre soluzioni possono essere l'oggetto sessionStorage e i web database, caratteristica più appropriata quando i dati delle immagini cominciano ad essere numerosi.

Torna su