安道生練功房 - 分享經驗，累積智慧

viva

請問....

首頁 index.jsp
計數器 counter.jsp

要記錄多少人瀏覽index.jsp語法如下:

<script language="JavaScript" type="text/javascript" src=".../counter.jsp">

但如果我要記錄index.jsp裡某些版位(例:圖片、連結...)的點閱率，該怎麼做？

我原本作法是，只要user點圖片或某個連結，都先導到counter.jsp做資料庫存取
存取完後在導回該圖片或某個連結該前往的網址，但這樣做，在瀏覽器無法點回上一頁
因上一頁是counter.jsp，而counter.jsp又會導回來

想請問有什麼方法可以在我點了圖片後就做掉計數的動作，在連到該圖片連結的網址！而不需透過 counter.jsp

目前狀況:
index.jsp裡某個圖片URL--> counter.jsp --> 圖片URL --> 按上一頁 --> counter.jsp(自動導回圖片URL )
正常狀況:
index.jsp裡某個圖片URL(做計數動作)　--> 圖片URL --> 按上一頁 --> index.jsp

jforumnewer

來個不負責任的回答XD

都先導到counter.jsp做資料庫存取

如果可以的話,直接在後端(java )跟資料庫做處理吧!

我會想用DWR來做
想法如下:
a href
->javascript
->調用DWR
->java (這邊做資料庫的處理)
->連結到圖片或網址

大致上就如此

DWR是Ajax的框架
可以透過dwr.xml的設定
在javascript裡遠端調用後端的method

我看還是等高手來回答好了!

viva

下方程式碼是自訂的函數,只要把代號(型態:String)丟進去,就會做資料庫存取

ecND_ADBANNERINFO adinfo = gpcommontk.getAdBannerInfo("代號");

gpcommontk.logAdBannerInfo(adinfo);

我也曾想過，在點了<a href="xxx"></a> 時就做資料庫存取
但不知道前端(JavaScript)怎麼動態去控制後端(JSP)做存取...

Ajax是什麼...一.一?

jforumnewer

但不知道前端(JavaScript)怎麼動態去控制後端(JSP)做存取...

你可以把DWR當作是在處理這種事的工具
如果要用DWR你就得google一下學一學吧!
基本上是不會改到你已經撰寫好的方法
只是幫你在前端呼叫後端的方法

就你的case
我寫省略點...參數那些要用你就自己加
a href=javascript:addCount

funtion addCount(){
//調用DWR呼叫你寫好method
javaClassName.Method();
//連結到圖或網址
...
}

我想應該有簡單的方法
就待高手回答吧!

viva

嗯,感謝你的指導!

我想我該學點Ajax 一.一a

andowson

jforumnewer其實說明得不錯，只要使用Ajax的技術，就可以達到這個需求，也就是當訪客點下超連結時，先用JavaScript執行一支記錄次數的程式，然後再導引至原本要去的超連結即可。

今天晚上稍微看了一下jQuery，發現如果您會用jQuery的話，這個問題就變得很簡單了，底下是範例程式碼：
index.html:


<html>

<head>

<title>AD Click Counter</title>

<script type="text/javascript" src="jquery-1.2.6.js"></script>

<script type="text/javascript">

$(document).ready(function(){

         $("a").click(function(event){

                 var ad = $(this).attr("name");

                 var target = $(this).text();

                 $.get('counter.jsp?ad='+ad);

                 alert("Thanks for visiting "+ target +" !");

         });

});

</script>

</head>

<body>

<a href="http://jquery.com/" name="ad1">jQuery</a>

<a href="http://andowson.com/" name="ad2">Andowson</a>

<a href="http://google.com/" name="ad3">Google</a>

<a href="http://yahoo.com/" name="ad4">Yahoo!</a>

<a href="http://microsoft.com/" name="ad5">Microsoft</a>

</body>

</html>

counter.jsp:


<%@page import="java.util.*" %>

<%!

   // we use a Map(key, value) to store each ad's count

   static Map counters = new HashMap();

%>

<%

    // get the ad's name

    String name = request.getParameter("ad");

    int count = 0;

    // get back the previous count if this ad has been clicked

    if (counters.containsKey(name)) {

        count = (Integer)counters.get(name);

    }

    // add this ad's counter into map

    if (name != null) {

        synchronized (counters) {

            counters.put(name, ++count);

            counters.notify();

        }

    }

    // print all of the counters' names and values

    Iterator iterator = counters.keySet().iterator();

    while (iterator.hasNext()) {

        String key = (String)iterator.next();

        int value = (Integer)counters.get(key);

        System.out.println(key+"="+value);

        out.println(key+"="+value+"<br>");

    }

%>

簡單說明一下：
這個範例是由jQuery上面的How jQuery Works範例直接改寫過來的，也就是我們先下載jQuery這個JavaScript的函式庫，然後註冊我們要處理超連結a這個標籤，當按下超連結時即會呼叫$("a").click(...)，然後我們利用attr("name")取得超連結的name屬性，用text()取得超連結顯示的文字，將超連結的名稱傳給counter.jsp的ad參數作為記錄的依據。

而counter.jsp這支程式，我先以HashMap代替資料庫，如果有抓到傳入的ad參數時就先檢查是否存在，如果存在，將舊的值取出加一再存回，如果不存在，則新增一筆進去。如果沒有傳入參數時將不會更新任何次數，最後將全部的值印出來觀察。

viva

感謝指導...

viva

分享程式碼.....雖然網路上很多相關資料，不過我覺得不是很清楚
因為我花了很多時間去測試才了解(是資質的關係嗎一.一a)

用途:前端程式(javascript)呼叫後端程式(java)

有了前端呼叫後端程式的橋樑,能做的事太多了!!
以我例子來說,此程式是用來在網頁某些連結、圖片、Flash計算user點閱率!!

順便感謝jforumnewer及andowson的指導....

步驟1...
下載dwr.jar
下載commons-logging-1.xxx.Jar(Logging元件)放到WEB-INF/lib

步驟2...在web.xml中加入DWRServlet…

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"

    version="2.4">



	<display-name>ajaxDWR</display-name>

	<servlet>

		<servlet-name>dwr-invoker</servlet-name>

	    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

	    <init-param>

	      	<description></description>

	      	<param-name>debug</param-name>

	      	<param-value>true</param-value>

	    </init-param>

	</servlet>      

	<servlet-mapping>

    	<servlet-name>dwr-invoker</servlet-name>

    	<url-pattern>/dwr/*</url-pattern>

	</servlet-mapping>

</web-app>

步驟3...撰寫dwr.xml，用來告訴DWRServlet呼叫後端程式

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"

 "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

 

<dwr>

  <allow>

    <create creator="new" javascript="Counter">

      <param name="class" value="Counter" />

    </create>

  </allow>

</dwr>

步驟4...撰寫後端程式Counter.java做計數動作

import java.util.*;

import java.io.*;

import org.w3c.dom.*;

import javax.xml.parsers.DocumentBuilder;

import javax.xml.parsers.DocumentBuilderFactory;

import java.net.*;

import java.sql.*;

import java.security.*;

import javax.net.ssl.*;

import java.util.*;

import java.util.zip.*;

import javax.mail.*;

import javax.mail.internet.*;

import javax.activation.*;

import com.gemmyplanet.dbbean.DBOperationBean;



public class Counter {	

	public void counter( Integer BANNERNO) {

//=====================================================

//	宣告參數

//=====================================================

		Integer ADBANNERNO = null;



		String SERVICEID = null;

		String CHANNELID = "";

		String ADBANNERTYPE = null;

		String TARGETURL = null;

		String CLICKDATETIME = null;

		String CHECKSUM = null;	

		String IMAGEDB = "GP_NEW_DB";

			

		Connection dbCon = null;

		Statement stmt = null;

		ResultSet rs = null;



//=====================================================

//	日期 14位

//=====================================================		

		String ft_t = "yyyyMMddHHmmss";

		String ft = ft_t.substring(0, 14);



//=====================================================

//	資料庫連線 && 更新資料

//=====================================================		

		try {		

			DBOperationBean dbOprBean = new DBOperationBean();

			dbOprBean.setDatasource("DS_GP_NEW_DB");

			dbCon = dbOprBean.getConnection();

			if ( dbCon != null && !dbCon.isClosed() ){

			  	stmt = dbCon.createStatement();

				rs = stmt.executeQuery("SELECT * FROM "+ IMAGEDB +".ADBANNERINFO WHERE ADBANNERNO="+ BANNERNO);

			  	if( rs != null ) {

					while( rs.next() ) {

						stmt.executeUpdate("INSERT INTO "+IMAGEDB+".ADBANNERLOGINFO SET SERVICEID='"+rs.getString("SERVICEID")+"', ADBANNERTYPE='"+rs.getString("ADBANNERTYPE")+"', TARGETURL='"+rs.getString("TARGETURL")+"', CLICKDATETIME='"+util.DateUtil.formatString(new java.util.Date(), ft)+"'");

					}

				}				

				stmt.close();

				dbCon.close();

			}

		} catch (Exception ex) {

			try {

				if ( dbCon != null && !dbCon.isClosed() ){

					stmt.close();

					dbCon.close();

				}

			} catch( Exception e ) {}		

		}

	}

}

步驟5...將Counter.java編譯後的.class放置WEB-INF\classes

步驟6...撰寫前端呼叫後端page_counter.js

function counter(num) {

    Counter.counter(num);

}

步驟7...撰寫網頁index.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=BIG5">

  <title>第一個DWR程式</title>

//========================================

//dwr/interface/Counter.js是由DWRServlet根據dwr.xml中的設定生成的

//engine.js負責客戶端伺服端溝通

//util.js是一些好用的JavaScript程式，可以讓您少寫很多JavaScript。 

//page_counter.js呼叫後端.java檔

//========================================

  <script type='text/javascript' src='dwr/interface/Counter.js'></script>

  <script type='text/javascript' src='dwr/engine.js'></script>

  <script type='text/javascript' src='dwr/util.js'></script>

  <script type='text/javascript' src='page_counter.js'></script>

</head>

<script language="Javascript">

	function test(num,url) {

		counter(num);

		location.href = url;

	}

	

	function test1(num) {

		counter(21);

	}

</script>

<body>

<table>

	<tr>

		<td>測試</td>

	</tr>

</table>

<input type='button' value='測試' onclick="test(21,'http://www.yahoo.com.tw')">

</body>

</html>

在Counter.java部分，可以做你需要後端做的事...
修改完web.xml與dwr.xml記的要重開Tomcat
測試時所有檔案的path:
1.建立新目錄 ---> tomcat/webapps/test/
2.dwr.jar ---> tomcat/webapps/test/WEB-INF/lib/
3.web.xml ---> tomcat/webapps/test/WEB-INF/
4.dwr.xml ---> tomcat/webapps/test/WEB-INF/
5.Counter.java ---> tomcat/webapps/test/WEB-INF/classes/
6.page_counter.js ---> tomcat/webapps/test/
7.index.jsp ---> tomcat/webapps/test/

安道生練功房 - 分享經驗，累積智慧

練功房推薦書單