» Java Script - Hero Think~用手摀住我的嘴

jQuery 小技巧 – 在非UTF8語系網頁傳遞中文參數排除方式

2009年1月14日 hero 尚無評論

jQuery 在UTF8語系網頁傳遞中文時是一切正常的

但如果是big5語系時就會發生問題，因此要進行轉碼才能正常傳遞參數才行
在網頁用ajax傳遞時，要先將資料利用javascript的escape function進行轉碼

例如:

$(document).ready(function(){
$.post(
   “getdata.asp”,
   {
   id:
escape(“中文字喔!!”)
   },
   function(txt){
alert(txt);

   }
);
});

以下是PHP版的解escape的函式:

以下是Java版本解escape的函式:

/**
* JavaScript escape/unescape 編碼的Java實現
* author jackyz keep this copyright info while using this method by free
*/
public class JavaScriptEscape {
   private final static String[] hex = { “00”, “01”, “02”, “03”, “04”, “05”,
   “06”, “07”, “08”, “09”, “0A”, “0B”, “0C”, “0D”, “0E”, “0F”, “10”,
   “11”, “12”, “13”, “14”, “15”, “16”, “17”, “18”, “19”, “1A”, “1B”,
   “1C”, “1D”, “1E”, “1F”, “20”, “21”, “22”, “23”, “24”, “25”, “26”,
   “27”, “28”, “29”, “2A”, “2B”, “2C”, “2D”, “2E”, “2F”, “30”, “31”,
   “32”, “33”, “34”, “35”, “36”, “37”, “38”, “39”, “3A”, “3B”, “3C”,
   “3D”, “3E”, “3F”, “40”, “41”, “42”, “43”, “44”, “45”, “46”, “47”,
   “48”, “49”, “4A”, “4B”, “4C”, “4D”, “4E”, “4F”, “50”, “51”, “52”,
   “53”, “54”, “55”, “56”, “57”, “58”, “59”, “5A”, “5B”, “5C”, “5D”,
   “5E”, “5F”, “60”, “61”, “62”, “63”, “64”, “65”, “66”, “67”, “68”,
   “69”, “6A”, “6B”, “6C”, “6D”, “6E”, “6F”, “70”, “71”, “72”, “73”,
   “74”, “75”, “76”, “77”, “78”, “79”, “7A”, “7B”, “7C”, “7D”, “7E”,
   “7F”, “80”, “81”, “82”, “83”, “84”, “85”, “86”, “87”, “88”, “89”,
   “8A”, “8B”, “8C”, “8D”, “8E”, “8F”, “90”, “91”, “92”, “93”, “94”,
   “95”, “96”, “97”, “98”, “99”, “9A”, “9B”, “9C”, “9D”, “9E”, “9F”,
   “A0”, “A1”, “A2”, “A3”, “A4”, “A5”, “A6”, “A7”, “A8”, “A9”, “AA”,
   “AB”, “AC”, “AD”, “AE”, “AF”, “B0”, “B1”, “B2”, “B3”, “B4”, “B5”,
   “B6”, “B7”, “B8”, “B9”, “BA”, “BB”, “BC”, “BD”, “BE”, “BF”, “C0”,
   “C1”, “C2”, “C3”, “C4”, “C5”, “C6”, “C7”, “C8”, “C9”, “CA”, “CB”,
   “CC”, “CD”, “CE”, “CF”, “D0”, “D1”, “D2”, “D3”, “D4”, “D5”, “D6”,
   “D7”, “D8”, “D9”, “DA”, “DB”, “DC”, “DD”, “DE”, “DF”, “E0”, “E1”,
   “E2”, “E3”, “E4”, “E5”, “E6”, “E7”, “E8”, “E9”, “EA”, “EB”, “EC”,
   “ED”, “EE”, “EF”, “F0”, “F1”, “F2”, “F3”, “F4”, “F5”, “F6”, “F7”,
   “F8”, “F9”, “FA”, “FB”, “FC”, “FD”, “FE”, “FF” };

   private final static byte[] val = { 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x00, 0x01,
   0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
   0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F };

   /**
* 編碼
*
* @param s
* @return
*/
   public static String escape(String s) {
   StringBuffer sbuf = new StringBuffer();
   int len = s.length();
   for (int i = 0; i < len; i++) {
   int ch = s.charAt(i);
   if ('A' <= ch && ch <= 'Z') {
   sbuf.append((char) ch);
   } else if ('a' <= ch && ch <= 'z') {
   sbuf.append((char) ch);
   } else if ('0' <= ch && ch <= '9') {
   sbuf.append((char) ch);
   } else if (ch == '-' || ch == '_' || ch == '.' || ch == '!'
   || ch == '~' || ch == '*' || ch == '\'' || ch == '('
   || ch == ')') {
   sbuf.append((char) ch);
   } else if (ch <= 0x007F) {
   sbuf.append('%');
   sbuf.append(hex[ch]);
   } else {
   sbuf.append('%');
   sbuf.append('u');
   sbuf.append(hex[(ch >>> 8)]);
   sbuf.append(hex[(0x00FF & ch)]);
   }
   }
   return sbuf.toString();
   }

   /**
* 解碼說明：本方法保證不論參數s是否經過escape()編碼，均能得到正確的「解碼」結果
*
* @param s
* @return
*/
   public static String unescape(String s) {
   StringBuffer sbuf = new StringBuffer();
   int i = 0;
   int len = s.length();
   while (i < len) {
   int ch = s.charAt(i);
   if ('A' <= ch && ch <= 'Z') {
   sbuf.append((char) ch);
   } else if ('a' <= ch && ch <= 'z') {
   sbuf.append((char) ch);
   } else if ('0' <= ch && ch <= '9') {
   sbuf.append((char) ch);
   } else if (ch == '-' || ch == '_' || ch == '.' || ch == '!'
   || ch == '~' || ch == '*' || ch == '\'' || ch == '('
   || ch == ')') {
   sbuf.append((char) ch);
   } else if (ch == '%') {
   int cint = 0;
   if ('u' != s.charAt(i + 1)) {
   cint = (cint << 4) | val[s.charAt(i + 1)];
   cint = (cint << 4) | val[s.charAt(i + 2)];
   i += 2;
   } else {
   cint = (cint << 4) | val[s.charAt(i + 2)];
   cint = (cint << 4) | val[s.charAt(i + 3)];
   cint = (cint << 4) | val[s.charAt(i + 4)];
   cint = (cint << 4) | val[s.charAt(i + 5)];
   i += 5;
   }
   sbuf.append((char) cint);
   } else {
   sbuf.append((char) ch);
   }
   i++;
   }
   return sbuf.toString();
   }

   public static void main(String[] args) {
   String stest = “中文1234abcd”;
   System.out.println(stest);
   System.out.println(escape(stest));
   System.out.println(unescape(escape(stest)));
   }

}

參考資料:
http://zhanghaidang.javaeye.com/blog/150470
http://blog.csdn.net/mubingyun/archive/2008/12/09/3482219.aspx
http://skiyo.cn/article/Skiyo-38-1223063418.html

Categories: Java Script Tags: Java, jquery, php

jQuery 學習筆記(二) – Form 欄位應用

2009年1月9日 hero 3 則評論

學習jQuery，剛開始還不太習慣，語法很像javascript(呵~他本來就算在其中)，但又不能直接拿來當物件用，真是麻煩呀~~，所以使用jQuery，最好基礎打好一點，不然可能會花費很多時間在查文件或TRY TRY 是否可行。

用Javascript ，以前最常就是在驗證欄位，雖然現在用了jQuery搞不好會變成一些傳遞參數還是畫面特效的
不過驗證欄位還是基本必須的啦，所以找到不錯的文章在提到jQuery取form裡的相關欄位的方式為何:

獲取一組radio被選中項的值
var item =
$('input[@name=items][@checked]').val();
獲取select被選中項的文本
var item =
$(“select[@name=items]
option[@selected]”).text();
select下拉框的第二個元素為當前選中值
$('#select_id')[0].selectedIndex
= 1;
radio單選組的第二個元素為當前選中值
$('input[@name=items]').get(1).checked =
true;

獲取值：

文本框，文本區域：$(“#txt”).attr(“value”)；
多選框checkbox：$(“#checkbox_id”).attr(“value”)；
單選組radio：
$(“input[@type=radio][@checked]”).val();
下拉框select： $('#sel').val();

控制表單元素：
文本框，文本區域：$(“#txt”).attr(“value”,'');//清空內容

$(“#txt”).attr(“value”,'11');//填充內容

多選框checkbox： $(“#chk1”).attr(“checked”,'');//不打勾

$(“#chk2”).attr(“checked”,true);//打勾

if($(“#chk1”).attr('checked')==undefined) //判斷是否已經打勾

單選組radio：
$(“input[@type=radio]”).attr(“checked”,'2');//設置value=2的項目為當前選中項
下拉框select：
$(“#sel”).attr(“value”,'-sel3');//設置value=-sel3的項目為當前選中項

$(“<option value='1'>1111</option><option
value='2'>2222</option>”).appendTo(“#sel”)//添加下拉框的option

$(“#sel”).empty()；//清空下拉框

感覺複雜多了，有空再來精簡一下。

參考資料:
http://www.cnblogs.com/xlfj521/archive/2008/01/29/1057375.html

Categories: Java Script Tags: jquery

JSON & JSONP 簡介

2009年1月4日 hero 尚無評論

最近在學習Jquery，就常看到JSON及JSONP，只知道他是資料的集合，其它都不太瞭解，所以上網搜尋了一下，整了名詞解釋，希望能更瞭解一點。

JSON（Javascript Object Notation）
JSON（Javascript Object Notation）是一種輕量級的資料交換語言，以文字為基礎，且易於讓人閱讀。他本來就算在javascript標準裡，JSON是獨立於語言的文字格式，並且採用了類似於C語言家族的一些習慣。JSON格式是1999年《JavaScript
Programming Language, Standard ECMA-262 3rd Edition》的子集合，所以可以在JavaScript以eval()函式（javascript通過eval()調用解釋器）讀入。不過這並不代表JSON無法使用於其他語言，目前幾乎所有與網頁開發相關的語言都有JSON函式庫。

JSON，是一種描述javascript裡物件還有陣列(js的陣列其實也是物件啦)的一種簡略表示方法，用於描述數據結構，其結構有名稱/值及陣列，像是下面這個範例就是JSON格式:

//Javascript
var test={
 "x":1,
 "y":2,
 "str":"test",
  "a":[
      "array value 1",
      "array value 2",
      3
   ],
   obj_array:[{
      xx:0,
      xxx:2
   },{
      xx:3,
      xxx:5
     }
   ]
};

由於JSON在語法上是JavaScript的子集合，所以一般都會使用eval()作為讀取資料的方式，這在JSON資料提供站台與使用站台都屬於可信賴時並不會有問題。但如果資料提供站台不在信任範圍內，將JavaScript程式碼嵌入JSON，則會造成安全上的問題。

另外一個安全上的問題則是跨站存取（Cross-site request
forgery，簡稱CSRF或XSRF）。這個問題在Javascript中的狀況是，由於Javascript採用了稱為「沙盒」的機制，這種機制限制Javascript引擎僅能引入同一個站點的代碼，因而某種程度上提高了安全性。

官方網站:http://www.json.org

JSONP(JSON with Padding)
什麼是JSONP：JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script
tags返回至客戶端，通過javascript
callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。由於 JSON 只是一種含有簡單括號結構的純文本，因此許多通道都可以交換 JSON
消息。因為同源策略的限制(上述提到的安全性問題)，我們不能在與外部服務器進行通信的時候使用
XMLHttpRequest。而JSONP是一種可以繞過同源策略的方法，即通過使用 JSON 與 <script>
標記相結合的方法，從服務端直接返回可執行的JavaScript函數調用或者
JavaScript對象。

JSONP的原理很簡單，但需要服務器端給予相應配合。大致來說，JSONP的實現思路就是在客戶端編程時作好使用JSON數據的準備，然後再通過圓括號將這些數據括起來以創建一條有效的JavaScript語句（可能是一次有效的函數調用）。

也就是說，客戶端可以使用一個用於命名jsonp的查詢參數來決定可以獲取的數據。最簡單的情況下，如果jsonp參數為空，則返回的數據就是被括在圓括號中的JSON。

目前已經有很多open的framework 有採用JSONP：dojo、JQuery、Youtube
GData API 、Google Social Graph API 、Digg API 、GeoNames webservice、豆瓣API、Del.icio.us JSON API等

JSONP只是解決了標準化的問題，但假如遠程主機想通過script標籤向頁面中注入惡意代碼，而不是返回JSON數據，那麼網站還是可能會隨時受到威脅。不過，一旦實現了JSONP，那麼對開發人員來說肯定是一件省時省力的大好事，在此基礎上各種一般化的抽像、教程及文檔也會應運而生的。我們可以使用若干種方法在 JavaScript 程序中動態地生成代碼。因此在要進行eval()前，可以利用下面的正則表達式檢查 JSON 字符串看是不是有危安成份：

var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
            text.replace(/"(\\.|[^"\\])*"/g, '' ''))) &&
            eval(''('' + text + '')'');

參考資料:
http://diary.tw/tim/22
http://zh.wikipedia.org/wiki/JSON#.E8.B7.A8.E7.AB.99.E5.AD.98.E5.8F.96.E5.95.8F.E9.A1.8C
http://www.cn-cuckoo.com/2008/09/13/the-origin-of-jsonp-262.html
http://www.matrix.org.cn/resource/article/2008-03-06/b2e0ea4e-eb69-11dc-91da-b599c3ba16ef.html

Categories: Java Script Tags: jquery, json, jsonp

jQuery 學習筆記(一) -hello world

2008年12月29日 hero 2 則評論

先前有稍為看了一下jQuery，因為目前愈來愈需要美感的網頁，所以還是認真點學習這些簡化Javascript 的framework吧!

歷程
jQuery 由美國人John Resig創建，至今已吸引了來自世界各地的眾多javascript高手加入，到目前為止(2008-12-29)最新的release 版本為 v1.2.6 ，最小化後的檔案約30.3KB，以下為相關jquery基本連結。

官方網站：http://jquery.com/
Project ：http://code.google.com/p/jqueryjs/
未壓縮版：http://jqueryjs.googlecode.com/files/jquery-1.2.6.js
已壓縮版：http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
最大壓縮：http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js
打包下載：http://jqueryjs.googlecode.com/files/jquery-1.2.6-release.zip

jQuery是繼prototype之後又一個優秀的Javascrīpt框架。其宗旨是WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。它能快速,簡潔的使用HTML documents, handle events, perform animations,並且能把Ajax交互應用到網頁, jQuery 能夠改變並減化你寫JavaScript的方式及程式碼。
它是輕量級的 js 庫(壓縮後只有30k) ，這是其它的 js 庫所不jquery及的，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

而目前在網路上，jQuery的使用案例及教學手冊文件等都非常充足，而學習jQuery前最好對xml力Css,Javascript,Html,DOM都有基本概念，這樣上手才會快一點。

小弟評估了jQuery及Prototype之後，才想把主力放在jQuery上，理由改天有空再寫囉!!

基本使用方式 :

1.要記得載入jQuery的函式庫
2.jQuery程式碼必須在以下的地方撰寫

A.$(document).ready() 就像是jQuery的window.onload()

$(document).ready(function(){
將jQuery 程式碼寫在這
});

B.這種方式也可以，但同時寫時A會先執行

$(function(){
將jQuery 程式碼寫在這
});

3.如何取得物件

A.抓取所有的<a /> tag物件

$(”a”)

B.此為抓取指定的ID，只要ID或NAME為this_id都會被抓出來

$(”#this_id”)

C. 此為抓取指定的class，只要css 裡有包含指定的sytle名稱就會被抓出來

$(”.this_style”)

D. 先小結A+B+C，他們還可以結合使用喔!!

$(”a#this_id”) //找出 <a />tag,物件名稱為this_id的

$(”a.this_style”) //找出 <a />tag,calss 名稱為this_style的 (感謝shian指導修正)

E.還有比較不容易搞混的取得物件方式，下例是為抓取this_id名稱的input物件

$(”input[@name:this_id]“)

F.也可以用這種方式取得，此為抓取type=checkbox的物件

$(”input[@type=checkbox]“)

G.還有一種叫層級的取法，以這個div > p會得到<p>two</p>

HTML Code: <p>one</p> <div><p>two</p></div> <p>three</p>
$(”div > p“)

還有很多種取得方式，詳細請再去參考文件，除了官網的文件蠻充足的(可惜都英文的)外；這裡還有簡體版的jQuery API 使用手冊，對DOM操作不太熟悉的，可以看一下jQuery 學習筆記 (6) — 操作 DOM 物件這篇，寫的淺顯易懂，應該很容易可以上手

再來當然要寫一個hello world囉:
先瞭解一下如何讀取及加入html code
在<body>裡加入一段html碼

$(”<div><p>Hello</p></div>”).appendTo(”body”);

結果會在<body>加入<div><p>Hello</p></div></body>
再來我們要取得物(div)裡的html，以上述例子再繼續執行$(”div”).html() 結果會取得:<p>Hello</p>

而我們也可以在已知物件加入html code

$(”div”).html(”<p>Hello World</p>”)

這樣我們想要的結果就會顯示出來啦，完整如以下範例

<html>
<script src=”js/jquery-1.2.6.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“div”).html(“<p>Hello World</p>”);
});
</script>
</head>
<body>
<div><p>two</p></div>
</body>
</html>

參考資訊:
http://www.hudong.com/versionview/DdncDAFtRA3V,XA,ndwfwoBUw
http://blog.shian.tw/jquery-base.html
http://wiki.jquery.org.cn/doku.php?id=jquery%E4%B8%AD%E6%96%87%E6%8C%87%E5%AF%BC:15%E5%A4%A9%E5%AD%A6%E4%BC%9Ajquery

Categories: Java Script Tags: framework, javascript, jquery

用Javascript達到信用卡或序號填寫時自動跳下欄位的方法

2008年8月12日 hero 尚無評論

要達到填寫信用卡或序號時，只要填滿就會自動跳下一欄位
我們要借助Javascript才有辦法達到此效果

首頁我們在html 先把要輸入的欄位列出

信用卡卡號
<input type=text name=pan_no1 size=4 value=”” maxlength=4 onKeyUp=”setBlur(this,'pan_no2');”>-
<input type=text name=pan_no2 size=4 value=”” maxlength=4 onKeyUp=”setBlur(this,'pan_no3');”>-
<input type=text name=pan_no3 size=4 value=”” maxlength=4 onKeyUp=”setBlur(this,'pan_no4');”>-
<input type=text name=pan_no4 size=4 value=”” maxlength=4 >

再來寫個 Javascript，判斷該欄位填入的長度是不是等於maxLength如果是就跳下一個欄位

   if( obj.value.length ==obj.getAttribute('maxlength'))
   {
   target.focus();
   }
   return;
}
</script>

Categories: Java Script Tags: HTML表單控制, javascript

Hero Think~用手摀住我的嘴

Archive

jQuery 小技巧 – 在非UTF8語系網頁傳遞中文參數排除方式

jQuery 學習筆記(二) – Form 欄位應用

JSON & JSONP 簡介

jQuery 學習筆記(一) -hello world

用Javascript達到信用卡或序號填寫時自動跳下欄位的方法

分類

近期留言

My Plurk

鏈結

彙整

Google AD

標籤雲

其他操作

2024 年 12 月
一	二	三	四	五	六	日
						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