天天看点

JQuery和Ajax网页埋点,实现收集用户相关信息利用Ajax中的get提交方式实现异步提交数据

利用Ajax中的get提交方式实现异步提交数据

利用用户点击图片来收集用户的IP地址和浏览器信息,以及所点的图片信息

1. 创建html和接受数据的服务端

2. 在服务端部署相应的servlet

部署web网页

<script>
        //入口函数
        $(function () {
            $("img").click(function () {
                //获取点击图片title信息
                var title = $(this).attr("title");
                //alert(title);
                //收集客户端信息
                //利用Ajax get方法异步同步消息
                $.get("/ServletAjaxGet",{title:title},function (data) {
                    alert(data);
                });
            });
        });

    </script>
           

放入相应的图片,使用户点击,来收集信息

<body>
<img title="图1" src="./image/1.jpg">
<img title="图2" src="./image/2.jpg">
<img title="图3" src="./image/3.jpg">
<img title="图4" src="./image/abc.jpeg">
</body>
           

部署servlet服务端

@WebServlet("/ServletAjaxGet")
public class ServletAjaxGet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String title = request.getParameter("title");
        //获取浏览器头部信息
        String header = request.getHeader("User-Agent");
        // 获取点击图片的URL
        String requestURI = request.getRequestURI();
        // 获取点击图片的IP地址
        String remoteAddr = request.getRemoteAddr();
	//在控制台输出用户信息
        System.out.println(remoteAddr + "--" + requestURI + "--" + title + "--" + header);
        response.getWriter().write(remoteAddr + "--" + requestURI + "--" + title + "--" + header);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}
           

也可以利用io流写入相关log文件