天天看點

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檔案