很漂亮的数字字体

很漂亮的数字字体:1234567890

<span style=”font-weight: 700;font-size: 22px;color:#fff000;font-family: Constantia,Georgia;”>1234567890</span>

file类型的input在IE6 7 下可以直接编辑的问题

<input type=”file” name=”file” value=”” contentEditable=”false” />
加入contentEditable=”false” 就可以搞定

DWR 入門與應用(三)

來寫個AJAX版的聊天室吧!先看看直接使用AJAX要如何做到,首先需要一個簡單的聊天室Servlet…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package onlyfun.caterpillar;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedList;
import java.util.List;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
 public class ChatRoomServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
     private static LinkedList<Message> messages = new LinkedList<Message>();
     
     public ChatRoomServlet() {
    super(); 
  }
    
    private List<Message> addMessage(String text) {
        if (text != null && text.trim().length() > 0) {
            messages.addFirst(new Message(text));
            while (messages.size() > 10) {
                messages.removeLast();
            }
        }
 
        return messages;
    }
 
    private List<Message> getMessages() {
        return messages;
    }
    
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Message> list = null;
        
        if("send".equals(request.getParameter("task"))) {
             list = addMessage(request.getParameter("msg"));
        }
        else if("query".equals(request.getParameter("task"))){
             list = getMessages();
        }
 
        PrintWriter out = response.getWriter();
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
 
        out.println("<response>");
        for(int i = 0; i < list.size(); i++) {
            String msg = list.get(i).getText();
            out.println("<message>" + msg + "</message>");
        }
        out.println("</response>");
  }             
}

Message物件如下…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package onlyfun.caterpillar;
 
public class Message {
    private long id = System.currentTimeMillis();
    private String text;
    
    public Message(String newtext) {
        text = newtext;
        if (text.length() > 256) {
            text = text.substring(0, 256);
        }
        text = text.replace('<', '[');
        text = text.replace('&', '_');
    }
 
    public long getId() {
        return id;
    }
 
    public String getText() {
        return text;
    }
}

Servlet接受訊息新增與查詢,判斷的方式是檢查請求參數task是send或query。

Servlet會以XML傳回目前List當中的訊息,客戶端可以查詢或插入新訊息時,取得目前List中的訊息,接著在web.xml中設定一下…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" 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">
  <servlet>
    <description>
    </description>
    <display-name>
    ChatRoomServlet</display-name>
    <servlet-name>ChatRoomServlet</servlet-name>
    <servlet-class>
    onlyfun.caterpillar.ChatRoomServlet</servlet-class>
  </servlet>
 
  <servlet-mapping>
    <servlet-name>ChatRoomServlet</servlet-name>
    <url-pattern>/ChatRoomServlet</url-pattern>
  </servlet-mapping>
  <session-config>
    <session-timeout>
            30
        </session-timeout>
  </session-config>  
</web-app>

在網頁中,使用者可以在輸入訊息後按下按鈕送出資訊,並在XML回應取得時,將訊息以一列一列的表格方式顯示出來,另外還設定了週期性的輪詢,即使不輸入新訊息,也可以週期性的取得新的聊天訊息…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Chat Room</title>
 
<script type="text/javascript">
var xmlHttp;
 
function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
 
function sendMessage() {
  var msg = document.getElementById("text").value;
  
  if(msg == "") {
    refreshMessage();
    return;
  }
  
  var param = "task=send&msg=" + msg;
  ajaxRequest(param);
  document.getElementById("text").value = "";
}
 
function queryMessage() {
  var param = "task=query";
  ajaxRequest(param);
}
 
function ajaxRequest(param) {
  var url = "ChatRoomServlet?timestamp" + new Date().getTime();
    createXMLHttpRequest();
  xmlHttp.onreadystatechange = refreshMessage;
    xmlHttp.open("POST", url, true);
  xmlHttp.setRequestHeader("Content-Type",
           "application/x-www-form-urlencoded;");
    xmlHttp.send(param);
}
  
function refreshMessage() {
  if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
          var messages = xmlHttp.responseXML.getElementsByTagName("message");
  
          var table_body = document.getElementById("dynamicUpdateArea");
      var length = table_body.childNodes.length;
      for (var i = 0; i < length; i++) {
        table_body.removeChild(table_body.childNodes[0]);
      }
      
      var length = messages.length;
          for(var i = length - 1; i >= 0 ; i--) {
              var message = messages[i].firstChild.data;
              var row = createRow(message);
        
              table_body.appendChild(row);                        
          }
      setTimeout("queryMessage()", 2000);
        }
  }
}
 
function createRow(message) {
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    var cell_data = document.createTextNode(message);
    cell.appendChild(cell_data);
    row.appendChild(cell);
    return row;
}
 
</script>
 
</head>
<body>
 
<p>
  Your Message:
  <input id="text"/>
  <input type="button" value="Send"
      onclick="sendMessage()"/>
</p>
 
<p>Messages:</p>
    <table align="left">
        <tbody id="dynamicUpdateArea"></tbody>
    </table>
 
</body>
</html>

簡單抓個畫面…

直接用AJAX,後端用JSP/Servlet,您要對請求參數做些判斷,看看是新增訊息或查詢,並要自行輸出XML,有的沒的…

改成DWR的話,就很簡單了,寫個簡單的Java物件…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package onlyfun.caterpillar;
 
import java.util.LinkedList;
import java.util.List;
 
public class Chat {
  private static LinkedList<Message> messages = new LinkedList<Message>();
 
  public List addMessage(String text) {
    if (text != null && text.trim().length() > 0) {
      messages.addFirst(new Message(text));
      while (messages.size() > 10) {
        messages.removeLast();
      }
    }
 
    return messages;
  }
 
  public List getMessages() {
    return messages;
  }
}

接著…在dwr.xml中開放一下…

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<!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="Chat">
      <param name="class" value="onlyfun.caterpillar.Chat"/>
    </create>
    
    <convert converter="bean" match="onlyfun.caterpillar.Message"/>      
  </allow>
</dwr>

使用者取得訊息時,是直接傳回List物件,而List中裝的是Message物件,Message物件是自訂物件,conterver設定為 bean,表示DWR會自動將Message的getter名稱轉換為傳回客戶端的JavaScript物件中的屬性,例如Message中有 getText(),則在客戶端可以用message.text這樣的方式來存取。

接著是簡單的客戶端網頁…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
 
<script src="dwr/interface/Chat.js" type="text/javascript"></script>
<script src="dwr/engine.js" type="text/javascript"></script>
<script src="dwr/util.js" type="text/javascript"></script>
 
<script type="text/javascript">
function sendMessage() {
    var text = DWRUtil.getValue("text");
    DWRUtil.setValue("text", "");
    Chat.addMessage(text, gotMessages);
}
 
function gotMessages(messages) {
    var chatlog = "";
    for (var data in messages) {
        chatlog = "<div>" + messages[data].text +
            "</div>" + chatlog;
    }
    DWRUtil.setValue("chatlog", chatlog);
  setTimeout("queryMessage()", 2000);
}
 
function queryMessage() {
  Chat.getMessages(gotMessages);
}
</script>
 
</head>
<body>
 
<p>
  Your Message:
  <input id="text"/>
  <input type="button" value="Send"
      onclick="sendMessage()"/>
</p>
 
<p>Messages:</p>
<div id="chatlog"></div>
 
</body>
</html>

當List物件傳回時,它成為gotMessages(messages)中的messages物件,而messages物件中包括 Message物件轉換後對應的JavaScript物件,由於我們已經設定了Converter,所以可以用messages[data].text來 取得傳回的訊息…

簡單抓個畫面…

 

DWR 入門與應用(二)

假設您要從資料庫中查詢出一些字串,然後填寫到表單的下拉選單中。

例如一個示意的Java程式如下:

1
2
3
4
5
6
7
8
package onlyfun.caterpillar;
 
public class Option {
  public String[] getOptions() {
                // 實際上這些字串是從資料庫中查到的啦…
    return new String[] {"良葛格", "毛美眉", "米小狗"}; 
  }
}

傳回的字串陣列,您要填寫到下拉選單中,當然,首先我們要在dwr.xml中開發這個物件…

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="UTF-8"?>
<!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="OPT">
        <param name="class" value="onlyfun.caterpillar.Option"/>
    </create>  
  </allow>
</dwr>

這是我們的網頁…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<script src="option.js" type="text/javascript"></script>
<script src="dwr/interface/OPT.js" type="text/javascript"></script>
<script src="dwr/engine.js" type="text/javascript"></script>
<script src="dwr/util.js" type="text/javascript"></script>
 
</head>
 
<body>
    選項: <select id="opts"></select>
</body>
</html>

傳回的字串陣列會填入opts這個select中,我們的option.js如下…

1
2
3
4
5
6
7
8
window.onload = function() {
    OPT.getOptions(populate);  
};
 
function populate(list){
    DWRUtil.removeAllOptions("opts");
    DWRUtil.addOptions("opts", list);
}

夠簡單了…不需要解釋了…

看一下結果…

好啦!我知道有人在說了,這個程式有夠無聊…Dead

改一下!就是個不錯的範例了,例如連動方塊,唔!在Ajax in action中叫啥?Dynamic double combo?…

假設一個會去從資料庫中查詢資料的Java程式示意如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package onlyfun.caterpillar;
 
import java.util.Map;
import java.util.TreeMap;
 
public class Bike {
  private Map<String, String[]> bikes;
  
  public Bike() {
    bikes = new TreeMap<String, String[]>();
    bikes.put("2000", new String[] {"2000 T1", "2000 T2", "2000 T3"});
    bikes.put("2001", new String[] {"2001 A1", "2001 A2"});
    bikes.put("2002", new String[] {"2002 BW1", "2002 BW2", "2002 BW"});
    bikes.put("2003", new String[] {"2003 S320"});
    bikes.put("2004", new String[] {"2004 TA1", "2004 TA2", "2004 TA3"});
  }
  
  public String[] getYears() {
    String[] keys = new String[bikes.size()];
    int i = 0;
    for(String key : bikes.keySet()) {
      keys[i++] = key;
    }
    return keys; 
  }
  
  public String[] getBikes(String year) {
    return bikes.get(year);
  }
}

getYears()跟getBkies()分別表示產品的年份跟型號,這邊用Map模擬,實際上資料是來自資料庫的查詢。

一樣的,在dwr.xml中設定:

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="UTF-8"?>
<!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="Bike" scope="application">
        <param name="class" value="onlyfun.caterpillar.Bike"/>
    </create>
  </allow>
</dwr>

我們會有個腳踏車年份與型號查詢頁面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
  <script type='text/javascript' src='dwr/interface/Bike.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='bike.js'></script>
</head>
<body onload="refreshYearList();">
  年份:<select id="years" onchange="refreshBikeList();"></select><br/><br/>
  型號:<select id="bikes"></select><br/>
</body>
</html>

注意,在選完第一個年份後,會觸發onchange事件,接著第二個下拉選單會自動填上對應年份的型號,而不是按鈕按下,再去取得第二個下拉選單,然後refresh…blah…blah…

bike.js如下…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function refreshYearList() {
    Bike.getYears(populateYearList);
}
 
function populateYearList(list){
    DWRUtil.removeAllOptions("years");
    DWRUtil.addOptions("years", list);
    refreshBikeList();
}
 
function refreshBikeList() {
    var year = $("years").value;
    Bike.getBikes(year, populateBikeList);
}
 
function populateBikeList(list){
    DWRUtil.removeAllOptions("bikes");
    DWRUtil.addOptions("bikes", list);
}

一樣很簡單…

看個無聊的畫面…XD

 

DWR 入門與應用(一)

Java 開發人員與網頁設計人員的橋樑 DWR…呃!我懶得寫簡介了…直接來看看可以做什麼吧!…

請先到 http://getahead.ltd.uk/dwr/ 下載 dwr.jar,放到WEB-INF/lib下…

負責處理客戶端請求,並呼叫Java物件的是DWRServlet,DWR其實也有些Model 2的味道,只是View的這一層比較弱,因為放到客戶端的JavaScript應用程式中…

在web.xml中加入DWRServlet…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" 
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">
  <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>

接下來寫個簡單的Hello吧!

1
2
3
4
5
6
7
package onlyfun.caterpillar;
 
public class Hello {
  public String hello(String name) {
      return "哈囉!" + name + "!您的第一個DWR!";
    }
}

客戶端要呼叫這個Java物件,傳給它參數,而後傳回一個字串,客戶端再顯示這個字串,神奇?其實是要告訴DWRServlet這件事,這需要一個dwr.xml:

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?>
<!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="Hello">
      <param name="class" value="onlyfun.caterpillar.Hello" />
    </create>
  </allow>
</dwr>

creator設定為new,表示使用Hello的無參數建構子來生成物件,javascript設定為Hello,表示客戶端JavaScript程式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物件。

來寫個客戶端的網頁,當中有一個輸入欄位…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
  <script type='text/javascript' src='dwr/interface/Hello.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='hello.js'></script>
</head>
<body>
 
<input id="user" type="text" />
<input type='button' value='哈囉' onclick='hello();' /> 
 
<div id="result"></div>
 
</body>
</html>

dwr/interface/Hello.js是由DWRServlet根據dwr.xml中的設定生成的,engine.js負責客戶端伺服端溝通,util.js是一些好用的JavaScript程式,可以讓您少寫很多JavaScript。

hello.js是我們自訂的函式,按下按鈕後,會呼叫當中的hello()函式:

1
2
3
4
5
6
7
8
function hello() {
    var user = $('user').value;
    Hello.hello(user, callback);
}
 
function callback(msg) {
   DWRUtil.setValue('result', msg);
}

${‘user’}取得輸入欄位的DOM物件,value取得當中的欄位值,而後呼叫Hello.hello(),並將value當作參數傳送… 結果是呼叫Server端的Hello Java物件,當結果傳回後,會呼叫JavaScript的callback函式,DWRUtil的setValue()方法會將傳回的msg設定給指定 id的DOM,結果就是…啥!AJAX的功能在哪…就這個而言就是發出非同步請求,而回應不用Refresh頁面啦!

好啦!這個無聊的Hello DWR可以做啥!…XD

已經可以讓您做個簡單的文字提示功能了…像這個…
http://caterpillar.onlyfun.net/Gossip/index.html

把滑鼠指到書的照片上,會顯示提示文字,這些提示文字本身不是存在網頁上的,而是在Server端,當滑鼠指到書上時,會用Request object去抓,然後顯示在框框中…

當然!我的網站只支援PHP,所以那不是DWR完成的功能,而且我是直接用Request object跟DOM去慢慢刻的…對初學者來說已經有些麻煩了…XD

不過!用DWR就可以很簡單完成這個功能…

先寫個Java類別吧!會抓properties檔案中的文字訊息,例如…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package onlyfun.caterpillar;
 
import java.util.ResourceBundle;
 
public class Book {
  private ResourceBundle resource;
  
  public Book() {
    resource = ResourceBundle.getBundle("book"); 
  }
        
  public String getDescription(String key) {
    return resource.getString(key);
  }
}

從程式中就知道,它會去抓book_zh_TW.properties的資料,這不是重點啦!只是Java的一個功能,我們要看的是DWR,不過先把book_zh_TW.properties準備好…

1
2
3
java=Java 學習筆記的介紹 … BlaBla...
spring=Spring 技術手冊的介紹…BlaBla...
ajax=Ajax in action 中文版的介紹…

唔!裏頭是中文字,自己用native2ascii轉換吧…這也不是重點…我們是要看DWR怎麼做到文字提示功能…

一樣的…要開放這個Book物件,在dwr.xml中…

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?>
<!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="Book" scope="application">
            <param name="class" value="onlyfun.caterpillar.Book"/>
        </create>  
  </allow>
</dwr>

scope設定為application,表示這個Book物件在整個應用程式階段都活著。

然後,客戶端寫個網頁…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
  <script type='text/javascript' src='dwr/interface/Book.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='book.js'></script>
<title>個人著/譯作</title>
</head>
<body>
 
      <div id="ajax" onmouseover="getBookData(this);"
 onmouseout="clearData();"><a
 href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=AXP011800"><small><img
 style="border: 0px solid ; width: 80px; height: 110px; float: left;"
 alt="Ajax in action 中文版" title="Ajax in action 中文版"
 src="images/ajax_in_action_c.jpg" hspace="10" vspace="2"></small></a></div>
 
      <div id="spring" onmouseover="getBookData(this);"
 onmouseout="clearData();"><a
 href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL021000"><small><img
 style="border: 0px solid ; width: 80px; height: 110px; float: left;"
 alt="Spring 技術手冊" title="Spring 技術手冊"
 src="images/SpringTech_S.jpg" hspace="10" vspace="2"></small></a></div>
 
      <div id="java" onmouseover="getBookData(this);"
 onmouseout="clearData();"><a
 href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL020931"><small><img
 style="border: 0px solid ; width: 80px; height: 110px; float: left;"
 alt="Java 學習筆記" title="Java 學習筆記"
 src="images/JavaGossip_Cover_Small.jpg" hspace="10"
 vspace="2"></small></a></div>
 
    <br/><br/><br/><br/><br/><br/>
 
    <div id="info"></div>
 
</body>
</html>

重點在於onmouseover跟onmouseout,滑鼠移入與移出時會呼叫的函式,還有最下面的info,抓回來的書籍介紹會放到當中…

book.js如下,簡單的很…

1
2
3
4
5
6
7
8
9
10
11
function getBookData(ele) {
  Book.getDescription(ele.id, setBookData);
}
 
function setBookData(description) {
  DWRUtil.setValue('info', description);
}
 
function clearData() {
  DWRUtil.setValue('info', '');
}

程式很簡單,我懶得解釋了…XD

看一下畫面好了…這是滑鼠移到 Ajax in action中文版 上的介紹畫面…

 

IE、FF兼容性

IE都能识别*,FF不能

                          IE6         IE7           IE8            FF

*                            Y           Y

!important                        Y                              Y

*html                   Y

*+html                                Y

9例                                                     Y

_                           Y
W3C标准,这样对FF,chrome等都适用

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

1.margin-left float:left一起用时需要加 diaplay:inline

2.<!– –>在两个float元素间不能用,需要用<!–[if !IE]>xxxxx<![endif]–>

3.height:小于20px时候IE6会自动撑大到20px,需要加font-size:0

4.对于一些margin位置上的不兼容可以同_margin对ie6重新定义
5.FF下左边div如果float:left那右边的也需要float:left而IE下不需要。

session和cookie

SESSION是可以存储针对与某一个用户的IE以及通过其当前窗口打开的任何窗口具有针对性的用户信息存储机制。

当打开IE以后浏览网站后会发出一个指令请求SESSIONID以及对各个类型数据的下载许可,如图片,声音以及FLASH。
数据实际传输内容:IE到服务器
GET / HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, */*
Accept-Language0: zh-cn
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)
Host: www.jh521.com
Connection: Keep-Alive
服务器会返回一个没有被使用的SESSIONID让IE使用,当时IE就对返回SESSIONID做存储并同时返回相关页面的下载数据,

如下:服务器到IE
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
Date: Sun, 30 Nov 2003 16:41:51 GMT
Content-Length: 21174..Content-Type: text/html
Set-Cookie: ASPSESSIONIDCACBBBRT=IBOMFONAOJFEEBHBPIENJFFC; path=/
Cache-control: private
然后就是页面HTML代码
此时这个IE程序(不是客户机)的SESSIONID就为IBOMFONAOJFEEBHBPIENJFFC
而当IE在访问任何这个站点的ASP程序的时候,就会把IBOMFONAOJFEEBHBPIENJFFC发送给服务器,服务器就会知道IBOMFONAOJFEEBHBPIENJFFC是表示你
而在服务器上设置SESSION(“name”)=”name”
完全可以看成是
SESSION(“IBOMFONAOJFEEBHBPIENJFFC”)(“name”)=”name”
或者
SESSION(SESSIONID)(“name”)=”name”
这样,SESSION就区分开用户了。
而当服务器反馈这个ID的时候会看这个ID有没有被使用。如果有在换一个反正不会让你重复,如果想模拟某人的SESSION的ID来进行欺骗是可以的。不过要获取到对方IE传输信号,并且在保证当时这SESSIONID没有被取消的情况下才可能实施。
不过要是我有那时间直接通过POST信号找他NAME和PASS了。

 

那么就在看看COOKIE,有人说SESSIONID就是COOKIE,按照技术上来讲他们不属于同类
但是属于一种工作模式,用户和服务器传输私有数据
当我设置COOKIE的时候,服务器会反馈给IE一个指令。IE通过这个网络指令生成COOKIE并存放,在特定的时候会取得这个这个信息如在访问这个站点并且COOKID有效的时候。

那么为什么要用COOKIE而不用SESSION呢
看下区别
有效时间以及存储方式 传输内容COOKIE 可设置并在本地保留 明码信息
SESSION 在IE不关闭并服务器不超时 只有SESSIONID
当如果想让用户下次登入网站不需要输入用户名或者密码的时候就只能用COOKIE,因为他可以保留相当长的时间(在COOKIE记录被删除或者失效日期之前)而SESSION就不可以,他不会保留太长时间,而且IE在关闭后就自动清除了SESSIONID记录在下次登入的时候会请求新的SESSIONID
而服务器想通过用户个人变量校验用户的状态的时候,就不能用COOKIE
如果用设置用户权限是USER。而IE访问的时候就把USER的明码传输到服务器。
那么如果我通过一定手段,比如直接修改COOKIE记录,把USER修改成ADMIN呢~~
就麻烦了。
但存储用户名和密码或者网站的配色方案这样的信息,用COOKIE是最好的

js 操作option(转帖,别人的东东)

js清空option

function clearOption(selectId){
    var selectObj = document.getElementById(selectId);
    for(var i = 0,len = selectObj.options.length; i < len; i++){
        selectObj.options[0] = null;
    }
}

动态创建

//firstOption 为默认首选项,比如说“请选择”
function setSelectOption(selectId, optionList, firstOption, selected)
{
    var selectObj = document.getElementById(selectId);     
    var cnt = 0;
    if(firstOption){
        selectObj.options[0] = new Option(firstOption,'');
        cnt++;
    }
    for(var i = 0,len = optionList.length; i < len; i++){
        selectObj.options[cnt] = new Option(optionList[i].txt, optionList[i].val);
        if(selected == optionList[i].val){
            selectObj.options[cnt].selected = true;
        }
        cnt++
    }
}

html实现时钟字体,类似于led7位数码管,Android时钟就这样

直接给代码,也是别人写的


<!--
/*
* Description:
* Author: dragonball
* Create Date:2011-2-22
* Copyright 2011
* Dual licensed under the MIT and GPL licenses.
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
#mydemo{margin:100px auto;width:600px;}

.clock{font-size:18px;width:9em;height:14em;border:1px solid #ddd;position:relative;}
.clock div{position: absolute;border-style:solid;}
.clock .l,.clock .r,.clock .u,.clock .d{width:0;height:0;overflow:hidden;}

.clock .v{width:0;height:5em;border-width:0 0.5em;border-color:#565656;}
.clock .v .u{border-style:dotted dotted solid dotted;border-width:0 0.5em 0.5em;border-color:transparent transparent #565656 transparent;top:-0.5em;left:-0.5em;}
.clock .v .d{border-style:solid dotted dotted dotted;border-width:0.5em 0.5em 0 0.5em;border-color:#565656 transparent transparent transparent;left:-0.5em;bottom:-0.5em}

.clock .h{width:5.5em;height:0;border-width:0.5em 0;border-color:#565656;}
.clock .h .l{border-style:dotted solid dotted dotted;border-width:0.5em 0.5em 0.5em 0;border-color:transparent #565656 transparent transparent;top:-0.5em;left:-0.5em;}
.clock .h .r{border-style:dotted dotted dotted solid;border-width:0.5em 0 0.5em 0.5em;border-color:transparent transparent transparent #565656;top:-0.5em;right:-0.5em;}

.clock .n1{left:0.5em;top:1.5em;}
.clock .n2{left:0.5em;top:7.5em;}
.clock .n4{left:7.5em;top:7.5em;}
.clock .n5{left:7.5em;top:1.5em;}

.clock .n6{top:0.4em;left:1.8em;}
.clock .n3{top:12.5em;left:1.8em;}
.clock .n7{top:6.5em;left:1.8em;}

.c1 .n1,.c1 .n2,.c1 .n3,.c1 .n6,.c1 .n7{display:none}
.c2 .n1,.c2 .n4{display:none}
.c3 .n1,.c3 .n2{display:none}
.c4 .n2,.c4 .n3,.c4 .n6{display:none}
.c5 .n2,.c5 .n5{display:none}
.c6 .n5{display:none}
.c7 .n1,.c7 .n2,.c7 .n3,.c7 .n7{display:none}
.c8{}
.c9 .n2{display:none}
.c0 .n7{display:none}

-->
<script type="text/javascript">// <![CDATA[
var num=0,size=1;

function addNumber(){
	var clock=document.getElementById("mydemo").children[0];
	clock.className="clock c"+(++num % 10);
	return false;
}

function resize(){
	var clock=document.getElementById("mydemo").children[0];
	clock.style.fontSize=(++size % 20)+"px";
	return false;
}
// ]]></script>

&nbsp;
<div id="mydemo">
<div class="clock c0"></div>
</div>
<input onclick="resize()" type="button" value="改变大小" /> <input onclick="addNumber()" type="button" value="数字累加" />
</body>

</html>

URL传递参数包含特殊字符的处理

url中包含?、=和&等特殊字符时,如果不进行编码,后台接收到参数的时候,会出现信息丢失的问题,导致后台接收的参数不全。
解 决方法是:可以在前端通过JavaScript将url进行编码,这样传到后台时,就没问题了。

1 用string对象的replace函数
例如:url = url.replace(/\?/g,"%3F").replace(/&/g,"%26").replace(/=/g,"%3D");
这 里要注意要将通过/g进行全局替换,其中,?在JavaScript中属于特殊字符,需要进行转义,JavaScript规范定义replace如下:
定 义:stringObject.replace(regexp,replacement)
如果regexp没有g标记,或者regexp是一个字 符串,则只执行一次匹配替换
参考:http://www.w3school.com.cn/js/jsref_replace.asp

2 用encodeURI函数
例如:Location.href=encodeURI("http://cang.baidu.com/do/s?word= 百度&ct=21");

关于JavaScript的文字编码有3个函数,关于它们的说明来自http://www.cnblogs.com/winnerlan/archive/2008/06/27.html, 内容如下:

js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:

unescape,decodeURI,decodeURIComponent
1、   传递参数时需要使用encodeURIComponent,这样组合的url才不会被#等特殊字符截断。
例如:<script language="javascript">document.write(‘<a href="http://passport.baidu.com/?logout&aid=7&u=’+encodeURIComponent ("http://cang.baidu.com/bruce42")+’"> 退出</a>’);</script>
2、   进行url跳转时可以整体使用encodeURI
例 如:Location.href=encodeURI("http://cang.baidu.com/do/s?word= 百度&ct=21");
3、   js使用数据时可以使用escape
例如:搜藏中history纪录。
4、   escape对0-255以外的unicode值进行编码时输出%u****格式,其它情况下escape,encodeURI

,encodeURIComponent编码结果相同。最多使用的应为encodeURIComponent,它是将中文、韩文等特殊字符转换成 utf-8格式的url编码,所以如果给后台传递参数需要使用encodeURIComponent时需要后台解码对utf-8支持(form中的编码方 式和当前页面编码方式相同)
escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z
encodeURI不 编码字符有82个:!,#,$,&,’,(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z
encodeURIComponent 不编码字符有71个:!, ‘,(,),*,-,.,_,~,0-9,a-z,A-Z
(不编码的字符对应的编码 为:!<%21>'<%27> (<%28>)<%29>*<%2a>-<%2d>.<%2e>_<%5f>~<%7e>)
下 面是常有编码