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

請問....

首頁 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

來個不負責任的回答XD

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

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

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

大致上就如此

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

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

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

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

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

Ajax是什麼...一.一?

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

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

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

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

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

嗯,感謝你的指導!

我想我該學點Ajax 一.一a

This message was edited 8 times. Last update was at 2011-07-29 09:03:08

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參數時就先檢查是否存在，如果存在，將舊的值取出加一再存回，如果不存在，則新增一筆進去。如果沒有傳入參數時將不會更新任何次數，最後將全部的值印出來觀察。

感謝指導...

This message was edited 2 times. Last update was at 2008-10-27 16:23:13

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

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

練功房推薦書單