热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

优酷的投票

正文:优酷牛人--我是传奇的网络投票页面:http:c.youku.comniuren自己随便选择一个选手,会弹出一个播放的浮动层,上面的投票按钮,点击投票成功后,再次投票,为提示你:你已经投过

正文:

优酷牛人--我是传奇的网络投票页面:http://c.youku.com/niuren

自己随便选择一个选手,会弹出一个播放的浮动层,上面的投票按钮,点击投票成功后,再次投票,为提示你:你已经投过,请一个小时后在投票!-----看起来这个投票很正常,但是这些都是表面现象。

image

使用firebug我们可以发现,每次投票都会触发一个http请求,

我们可以把这个http的链接:http://minisite.youku.com/pub2/i_am_legend/vote.php?id=XMjc1NzExMzE2&callback=c&i=0.19621988418141467

我的第一感觉这个是使用getjson方式做的投票,我们把这个放在浏览器里,刷新几次发现数据一直是增加的,image,689票,这样就可以刷票??

带着好奇我打开页面发现这个选手的票数情况:

image

我擦,我第一感觉这个怎么跟我平时做的投票很类似啊,赶紧找列表页的ajax请求文件;果然发现是:http://minisite.youku.com/pub2/i_am_legend/getvote.php?page=1&callback=cc&count=8&i=0.42276474971249034

image

这是一个很典型的jquery里面的getjson方式返回的数据(我使用的jquery框架,优酷不是使用jq框架,但是原来类似),我又找了一个这个请求的源码:

?
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
29
30
31
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
        html += "
    \n";
        html +=
  • 票数:"+oList[i].total+"
  • \n";
            html +=
  • +oList[i].videoid+"','"+oList[i].title+"');\">
  • \n";
            html += "\n";
          }
          html += "
    "
    ;
          //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());
    }

    再来看优酷关于限制频繁投票的方法:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function vTp(vid){
      c = function(num,vid){
        alert("投票成功,目前票数为:"+num+"票!");
        var exp = new Date ();
        exp.setTime(exp.getTime() + 3600000);
        setCOOKIE("nrtp", "true", exp);
      }
      if(getCOOKIE("nrtp") != "true"){
        js_request("http://minisite.youku.com/pub2/i_am_legend/vote.php?id="+vid+"&callback=c&i=" + Math.random());
      }else{
        alert("一小时内只能投票一次!");
        return false;
      }
    }

    竟然是在客户端写COOKIEs来判断,不禁有点坑爹了,之前我们做网络投票经常被刷票,但是毕竟我们在使用服务端验证,记录一下ip来限制,但是优酷这个投票完全是靠客户端验证来实现。

    总结一下优酷的投票:

      1. 列表页的数据是实时显示的,也就是说投票后立刻显示----我们当年投票也是实时显示,但是服务器压力太大,越到刷票的,数据库被频繁的插入读取,对数据压力也是蛮大的,经常把数据库服务器宕机了,后来采用缓存机制也解决这个问题,一分钟后显示数据。
      2. 这个投票的api文件写的有问题,我把http://minisite.youku.com/pub2/i_am_legend/vote.php?id=XMjc1NzExMzE2&callback=c&i=0.19621988418141467放在浏览器,不停的刷新居然可以不停的增加票数,很显然优酷的#偷懒了,起码也要判断一些提交页面的路径啊,提交方式啊 的什么,判断我是否来自正常的投票请求,如果这样的话这个投票也太容易刷票了,直接把这个url放在浏览器不同的F5就可以了,实在不行直接写个js定时刷新页面也可以。
      3. 防止刷票机制,决然是使用客户端COOKIE做验证,这个就有点菜鸟了,最普通的方式也是根据ip做验证(虽然这个方式在专业刷票公司哪里也是小儿科,但是应付非专业人士还是足够了),防止频繁刷票。

        总结;

        有点失望了,本以为大公司的技术都比我们成熟,看来有点高估了吧,看来不要盲目的迷恋和崇拜大公司,做好自己,相信自己的才是关键!

      4. 本文链接: 看看优酷是怎么做网络投票的?
        联系作者: PHP淮北,交流QQ群:群1:153856687,群2:198110186
        版权所有: 非特殊声明均为本站原创文章,转载请注明出处:PHP10086博客网
        订阅更新: 欢迎通过RSS订阅我们的内容更新
    推荐阅读
    • JavaScript与DOM(上)——也适用于新手 – 深入理解JavaScript系列 23
      本文是《JavaScript深度解析》系列文章第23篇(共51篇)文档对象模 ... [详细]
    • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
    • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
    • Java实战之电影在线观看系统的实现
      本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
    • WebSocket与Socket.io的理解
      WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
    • 本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ... [详细]
    • 网络请求模块选择——axios框架的基本使用和封装
      本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
    • SpringMVC接收请求参数的方式总结
      本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
    • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
    • 工作经验谈之-让百度地图API调用数据库内容 及详解
      这段时间,所在项目中要用到的一个模块,就是让数据库中的内容在百度地图上展现出来,如经纬度。主要实现以下几点功能:1.读取数据库中的经纬度值在百度上标注出来。2.点击标注弹出对应信息。3 ... [详细]
    • Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]
    • 我将SpringMVC升级到Spring3.2.5.我的一些剩余调用即使存在,也会返回无法识别的字段异常.这是错误.Resolvingexceptionfrom ... [详细]
    • 这篇文章给大家讲解如何利用dhtmlxGantt在服务器端集成数据。脚本数据保存如果您已初始化dataProcessor,则用户或以编程方式所做的任何更改都将自动 ... [详细]
    • Voicewo在线语音识别转换jQuery插件的特点和示例
      本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
    • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
    author-avatar
    粉红的少女
    网络借贷平台http://www.kljie.com/
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有