利用JS跨域作一個簡單的頁面訪問統計系統

　　其實在大部分互聯網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採集腳本添加到要監控的頁面便可。