在网络上,我们经常看到各种各样的投票,五花八门,今天我们一起来看一看大厂做的网络投票,有需要的小伙伴可以参考一下。
今天看优酷正巧看到优酷牛人–我是传奇的网络投票,很好奇这些牛逼的大公司是怎么做网络投票的,特此分析一下优酷是怎么做网络投票。
正文:
优酷牛人–我是传奇的网络投票页面:http://c.youku.com/niuren
自己随便选择一个选手,会弹出一个播放的浮动层,上面的投票按钮,点击投票成功后,
再次投票,为提示你:你已经投过,请一个小时后在投票!—–看起来这个投票很正常,但是这些都是表面现象。
使用firebug我们可以发现,每次投票都会触发一个http请求,
我们可以把这个http的链接:
http://minisite.youku.com/pub2/i_am_legend/vote.php?id=XMjc1NzExMzE2&callback=c&来源gao($daima.com搞@代@#码网amp;i=0.19621988418141467
我的第一感觉这个是使用getjson方式做的投票,我们把这个放在浏览器里,刷新几次发现数据一直是增加的
,,689票,这样就可以刷票??
带着好奇我打开页面发现这个选手的票数情况:
我擦,我第一感觉这个怎么跟我平时做的投票很类似啊,赶紧找列表页的ajax请求文件;
果然发现是:
这是一个很典型的jquery里面的getjson方式返回的数据
(我使用的jquery框架,优酷不是使用jq框架,但是原来类似),我又找了一个这个请求的源码:
function vTpListGet(pg, pz, t){ pg = (pg || 1); pz = (pz || 8); t = (t || false); cc = function(oList, total){ if(oList.length > 0){ var html = ""; for(var i=0;i < oList.length;i++){ html += "<ul class=\"x\">\n"; html += " <li class=\"x_thumb\"><a href=\"javascript:;\" onclick=\"vTpSet('"+oList[i].videoid+"','"+oList[i].title+"');\" title=\""+oList[i].title+"\"><img src=\""+oList[i].thumburl+"\" alt=\""+oList[i].title+"\" /></a></li>\n"; html += " <li class=\"x_title\"><a href=\"javascript:;\" onclick=\"vTpSet('"+oList[i].videoid+"','"+oList[i].title+"');\" title=\""+oList[i].title+"\">"+oList[i].title+"</a></li>\n"; html += " <li class=\"x_data\">票数:<span class=\"num\">"+oList[i].total+"</span></li>\n"; html += " <li class=\"x_btn\"><span class=\"btn\" onclick=\"vTpSet('"+oList[i].videoid+"','"+oList[i].title+"');\"></span></li>\n"; html += "</ul>\n"; } html += "<p class=\"clear\"></p>"; //alert(html); document.getElementById('videosTpList').innerHTML = html; if(t){ //显示分页 max_cnt = pz; var js_pager = new jsPager(); js_pager.init(total, pz, pg, "vTpPager"); document.getElementById('videosTpPager').style.display = ""; document.getElementById('videosTpPager').innerHTML = js_pager.getHtml(); } } }; js_request("http://minisite.youku.com/pub2/i_am_legend/getvote.php?page="+pg+"&callback=cc&count="+pz+"&i=" + Math.random()); }