165 Идея Spyjax не нова. У себя в блоге Дэвид уже рассматривал, как можно следить за пользовательской историей с помощью MooTools и jQuery.
Сегодня мы рассмотрим, как можно пошпионить за пользователем с помощью набора инструментов Dojo.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<ul> <li><a href="http://davidwalsh.name" class="checkme">David Walsh Blog</a></li> <li><a href="http://css-tricks.com" class="checkme">CSS Tricks</a></li> <li><a href="http://snook.ca" class="checkme">Snook</a></li> <li><a href="http://cnn.com" class="checkme">CNN</a></li> <li><a href="http://digg.com" class="checkme">Digg</a></li> <li><a href="http://flickr.com" class="checkme">Flickr</a></li> <li><a href="http://php.net" class="checkme">PHP.Net</a></li> <li><a href="http://reddit.com" class="checkme">Reddit</a></li> <li><a href="http://yahoo.com" class="checkme">Yahoo!</a></li> <li><a href="http://google.com" class="checkme">Google!</a></li> <li><a href="http://msn.com" class="checkme">MSN</a></li> <li><a href="http://gmail.com" class="checkme">Gmail</a></li> <li><a href="http://ajaxian.com" class="checkme">Ajaxian</a></li> <li><a href="http://imdb.com" class="checkme">IMDB</a></li> <li><a href="http://mootools.net" class="checkme">MooTools</a></li> <li><a href="http://jquery.com" class="checkme">jQuery</a></li> <li><a href="http://wordpress.org" class="checkme">Wordpress</a></li> <li><a href="http://dlisted.com" class="checkme">DListed</a></li> <li><a href="http://foxnews.com" class="checkme">Fox News</a></li> <li><a href="http://dzone.com" class="checkme">DZone</a></li> <li><a href="http://nettuts.com" class="checkme">NetTuts</a></li> <li><a href="http://youtube.com" class="checkme">YouTube</a></li> <li><a href="http://diggnation.com" class="checkme">Diggnation</a></li> <li><a href="http://collegehumor.com" class="checkme">College Humor</a></li> <li><a href="http://facebook.com" class="checkme">Facebook</a></li> <li><a href="http://myspace.com" class="checkme">MySpace</a></li> </ul> |
Создадим, для примера, список ссылок. Особо умные разработчики могут такой список спрятать у себя на странице через “display:none;”. Таким образом пользователь даже его и не увидит.
CSS
|
1 2 3 |
a.checkme { color:#00ff00; } a.checkme:visited { color:#ff0000; } .highlight { background:#fffea1; } |
Идея состоит в том, чтобы в CSS прописать для ссылки :visited цвет отличаемый от исходного цвета ссылки — таким образом мы будем знать, что пользователь такую ссылку ранее уже посещал.
Dojo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
(function(d,$,$$) { d.ready(function() { d.connect($('tell-me'),'onclick',function() { var sitesFound = 0; $$('a.checkme').forEach(function(node) { var color = d.style(node,'color'); if(color == '#ff0000' || color == 'rgb(255, 0, 0)') { d.addClass(node,'highlight'); sitesFound++; } }); //output stuff if(sitesFound) { alert('I know ' + sitesFound + ' websites you\'ve been to. This is where I save your information via an AJAX call to a PHP script.'); } else { alert('Darn, couldn\'t find any!'); } }); }); })(dojo,dojo.byId,dojo.query); |
Способ работы скрипта очень прост. JavaScript проверяет каждую ссылку на изменение ее цвета, если цвет отличим от исходного состояния, то пользователь в своем браузере такую ссылку уже посещал. Как это не грустно, но это действительно очень просто.
Как это можно использовать?
Представьте, вы знаете, что пользователь посещал сайт Apple Store ). Вы можете показать на своем сайте рекламу связанную с iPods, iPads и так далее.
Это очень простой пример.
Вы можете следить за пользователем в своих интересах. Что вы думаете об этом?
