其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况。但是有些时候,由于一些特殊情况,我们需要自己来设计统计系统。由于前段时间公司的业务需求,我也是自己尝试了下,本文提供的是一个基本思路,统计系统也比较简单。

 
几个基本统计需求:
1.统计web每个页面用户访问量
2.统计用户访问者的和IP地址信息
3.页面之间的跳转情况
4.访问高峰时间段
 
服务器结构:
数据库表设计:
     以上只是我简单列举的需求,这边简单的就一张统计表,而这张统计表能满足的需求是不仅仅只是上面四个基本的需求的,可以看需求情况再做相应的业务处理。
 
tb_visit_count_log
 
ID ip (varchar) IP地址 title(varchar)标题 cur_page(varchar) 当前页面 from_page(varchar) 源页面 time(datetime)日期时间 app(varchar) 应用
 
数据采集:
     我们提交编写一个JS脚本,用来抓取当前页面中我们需要的数据,然后通过跨域请求道我们的Statistics Server进行存储,便于之后的统计分析业务的操作。
  JS跨域:
     我们都知道在开发web应用的时候,我们经常利用<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>去请求其它服务器内的脚本资源,src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置。所以利用这一点,我们可以通过JS动态创建<script>标签,并抓取页面相关的信息后,设置该标签src地址为远程Statistics服务器地址,将其添加到当前文档中,该标签便会自动将请求发送到指定服务器,而服务器便可解析改请求中的参数和请求信息,将其存储入库。
  

  示例代码:
     (function() {
var title = document.getElementsByTagName("title")[0].innerHTML, // 页面标题
url = window.location.href, // 当前请求路径名称
site = window.location.host, // 站点host
// 此处为从header获取 Refere参数,具体获取看当前的web程序
ref = ' <%=request.getHeader( "Referer") %>',
param = "?title="+title+" &url="+url+" &ref="+ref , // 引用页地址
script = document.createElement("script");
script.src = "http://example.com/analysis"+param;
document.getElementsByTagName("head")[0].appendChild(script);
})();
注意:上示例代码中用了一个JSP标签,从header中获取了Referer参数。
 
服务器端:
   本示例服务器框架采用的是SpringMVC,但是获取参数都是一样的。获取参数:
     /**
* 记录站点统计信息
* @param request
*/
@RequestMapping( "/analysis")
@ResponseBody
public void visitorLogger(HttpServletRequest request) {
try {
WebsiteVisitCount visitor = new WebsiteVisitCount();
visitor.setUrl(request.getParameter( "url"));
String title = request.getParameter( "title");
if (title != null) {
visitor.setTitle( new String(title.getBytes("ISO-8859-1" ),
"utf-8"));
}
// 用户IP
visitor.setFromUrl(request.getParameter( "ref"));
visitor.setUserIp(getRemortIP(request));
visitor.setApp(request.getParameter( "site"));
// 存储数据
websiteVisitCountService.addVisitor(visitor);
} catch (Exception e) {
LOGGER.error( "WebsiteVisitCountController.visitorLogger():"
+request.getRequestURI(), e.getMessage());
}
}
   以上代码中并没有响应给客户端任何可执行的JS脚本,当然如果需要,这个是完全没有问题的,在跨域其他需求的时候,完全可以响应服务器JS执行脚本。
   获取访问IP:
      /**
* 获取客户端IP地址
* @param request
* @return
*/
public String getRemortIP(HttpServletRequest request) {
if (request.getHeader( "x-forwarded-for" ) == null ) {
return request.getRemoteAddr();
}
return request.getHeader( "x-forwarded-for" );
}
以上则是统计的核心代码部分,数据入库后便可以对其进行相应业务上的处理,获取想了解的数据。部署时只需要把JS采集脚本添加到要监控的页面即可。

利用JS跨域做一个简单的页面访问统计系统的更多相关文章

  1. 利用JS跨域做一个简单的页面訪问统计系统

    事实上在大部分互联网web产品中,我们一般会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便能够在这些统计系统中看到自己站点页面详细的訪问情况.可是有些时候,因为一些特殊情况,我 ...

  2. 关于前端jsonp跨域和一个简单的node服务搭建

    先讲下概念 同源策略:是一种约定,浏览器最核心最基本的安全功能,(同域名,同协议,同端口)为同源 跨域: 跨(跳):范围 域 (源):域名,协议,端口 域名:ip的一种昵称(为了更好记住ip地址)如: ...

  3. js利用点击事件做一个简单的计算器

    先放一个样式图: 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  4. js/html/css做一个简单的图片自动(auto)轮播效果//带注释

    FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...

  5. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  6. 【 D3.js 入门系列 — 3 】 做一个简单的图表!

    图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...

  7. js跨域请求jsonp解决方案-最简单的小demo

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. 利用javascript跨域访问cookie之广告推广

    在上一篇<说一说javascript跨域和jsonp>中,利用JSONP进行了跨域的数据访问,利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告. 在实际应用中, 跨域使用 ...

  9. 5种处理js跨域问题方法汇总(转载)

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

随机推荐

  1. APP国际化

    1.app本地内容国际化 ①在项目中新建一个New File ---> iOS Resource -> String File ---> 命名为Localizable(之所以命名为L ...

  2. Windows Server 2012之搭建域控制器DC

    安装域控制器,域(Domain) 1,本地管理员权限 2,设置静态IP 地址 3,至少有一个NTFS分区 4,操作系统版本(web版除外)   设置静态IP地址    dcpromo.exe命令不生效 ...

  3. 读书笔记——Windows环境下32位汇编语言程序设计(5)模态对话框

    资源可以用VC之类的生成,然后拷贝出来. 例如:每一个MFC工程都有一个resource.h,没有做任何修改时,这个resource.h文件是原来自带的.当对资源进行过修改添加之类的时,新添加的资源的 ...

  4. 使用Spring Security Oauth2完成RESTful服务password认证的过程

            摘要:Spring Security与Oauth2整合步骤中详细描述了使用过程,但它对于入门者有些重量级,比如将用户信息.ClientDetails.token存入数据库而非内存.配置 ...

  5. iOS -数据库网络之xml解析

    XML文件有2种解析方式 1.基于文档(document) 2.基于事件(sax)   1.IOS中XML文件获取   首先要将XML导入工程中 在ViewController的按钮事件中,代码如下: ...

  6. 面试之jsp、Servlet相关知识——生命周期, 区别等

    1.servlet生命周期 所谓生命周期,指的是servlet容器如何创建servlet实例.分配其资源.调用其方法.并销毁其实例的整个过程. 阶段一: 实例化(就是创建servlet对象,调用构造器 ...

  7. Rhythmbox中文乱码问题的解决

    Rhythmbox中文乱码问题的解决 Rhythmbox是Ubuntu自带的一款很优秀的音乐播放器,但是在处理中文时却不太友好,导入歌曲时中文会变成乱码 这个问题也是很好解决的. ** 1.Ctrl+ ...

  8. dev/shm time in linux

    统计文件夹大小: du -hx --max=1 : du -sk :du -hsc 重新组织行分隔符进行显示: echo "abc,dd,bach,dong,jing,shang,china ...

  9. tarjan算法求割点cojs 8

    tarjan求割点:cojs 8. 备用交换机 ★★   输入文件:gd.in   输出文件:gd.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] n个城市之间有通讯网 ...

  10. jquery中attr和prop的区别(转)

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...