• 不蒜子等网站统计的前端简单实现方式


    不蒜子前端简单实现:

    当然,牛逼的不蒜子源码(比较绕,主要是考虑到代码健壮性的问题)是比这个轻量级多了。是使用js请求的方式,进行加载数据的。

    网站统计主要看请求头Referer参数,一般是这个页面的链接。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script  src="https://blog-static.cnblogs.com/files/xunhanliu/jquery.js"></script>>
     7 </head>
     8 <body>
     9 本站总访问量<span id="busuanzi_value_site_pv"></span>10 本站访客数<span id="busuanzi_value_site_uv"></span>人次
    11 本文总阅读量<span id="busuanzi_value_page_pv"></span>12 <script>
    13     function BusuanziCallback_1048604830937(b) {
    14        console.log(b);
    15     }
    16     $.ajax({
    17             type: "get",
    18             url: "//busuanzi.ibruce.info/busuanzi",
    19             dataType: 'jsonp',
    20             jsonp: 'jsonpCallback',
    21             jsonpCallback:'BusuanziCallback_1048604830937',  //后面跟的这个是个随机数,能跟上面那个函数对应起来就行了。
    22             beforeSend: function (xhr) {   //beforeSend定义全局变量
    23                 xhr.setRequestHeader("Referer", "http://www.xunhanliu.top");  //浏览器上无效!!W3C标准文档规定,此header只能由浏览器进行设置,不允许开发者设置。当然你用其他语言开发就另说了。
    24             },
    25             success: function (data) {
    26                 $('#busuanzi_value_site_pv').text(data.site_pv);
    27                 $('#busuanzi_value_site_uv').text(data.site_uv);
    28                 $('#busuanzi_value_page_pv').text(data.page_pv);
    29             },
    30 
    31         }
    32     );
    33 </script>
    34 </body>
    35 </html>

     跨域问题:

    参见:https://blog.csdn.net/yesbuy201701/article/details/72616955 (这篇排版确实不咋地,还是转载。。。。,比较切中要害,凑合着看吧。)

    setRequestHeader设置请求头

     注:下面的内容来源于上面的这个链接!

    设置html设置哪些请求头无效。当然你使用python中的request等,那这个东西就限制不住你了。

    后来看W3C标准文档发现,这个请求头不是什么都可以设置的,标准里面明确规定了以下请求头信息是浏览器控制,开发者不允许设置这些请求头

    Terminate these steps if header is a case-insensitive match for one of the following headers:

    • Accept-Charset
    • Accept-Encoding
    • Access-Control-Request-Headers
    • Access-Control-Request-Method
    • Connection
    • Content-Length
    • Cookie
    • Cookie2
    • Date
    • DNT
    • Expect
    • Host
    • Keep-Alive
    • Origin
    • Referer
    • TE
    • Trailer
    • Transfer-Encoding
    • Upgrade
    • User-Agent
    • Via

    … or if the start of header is a case-insensitive match for Proxy- or Sec- (including when header is just Proxy- or Sec-).

    The above headers are controlled by the user agent to let it control those aspects of transport. This guarantees data integrity to some extent. Header names starting with Sec- are not allowed to be set to allow new headers to be minted that are guaranteed not to come fromXMLHttpRequest.

  • 相关阅读:
    微信扫码
    vue h5公众号支付
    vue h5支付宝支付
    vue PDF预览
    vue 中AES加密
    vue 动态路由配置
    移动端调试工具
    Ajax工作原理
    yahoo军规
    Flex 布局教程
  • 原文地址:https://www.cnblogs.com/xunhanliu/p/10817403.html
Copyright © 2020-2023  润新知