Archive

‘Java Script’ 分類過的Archive

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

2009年1月14日 尚無評論

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

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

例如:

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

     }
  );
});


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

function unescape($str) {
     $str = rawurldecode($str);
     preg_match_all(“/%u.{4}|&#x.{4};|&#\d+;|&#\d+?|.+/U”,$str,$r);
     $ar = $r[0];
     foreach($ar as $k=>$v) {
         if(substr($v,0,2) == “%u”)
         $ar[$k] = iconv(“UCS-2″,”Big5”,pack(“H4”,substr($v,-4)));
         else if(substr($v,0,3) == “&#x”)
         $ar[$k] = iconv(“UCS-2″,”Big5”,pack(“H4”,substr($v,3,-1)));
         elseif(substr($v,0,2) == “&#”) {
             $ar[$k] = iconv(“UCS-2″,”GBK”,pack(“n”,preg_replace(“/[^\d]/”,””,$v)));
         }
     }
     return join(“”,$ar);
  } 


以下是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: , ,

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

2009年1月9日 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:

JSON & JSONP 簡介

2009年1月4日 尚無評論

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

JSON(Javascript Object Notation)
JSON(Javascript Object Notation)是一種輕量級的資料交換語言,以文字為基礎,且易於讓人閱讀。
他本來就算在javascript標準裡,JSON是獨立於語言的文字格式,並且採用了類似於C語言家族的一些習慣。JSON格式是1999年JavaScript
Programming Language, Standard ECMA-262 3rd Edition
》的子集合,所以可以在JavaScripteval()函式(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:dojoJQueryYoutube
GData API
Google Social Graph API Digg APIGeoNames webservice豆瓣APIDel.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 學習筆記(一) -hello world

2008年12月29日 2 則評論

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

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


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: , ,

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

2008年8月12日 尚無評論

要達到填寫信用卡或序號時,只要填滿就會自動跳下一欄位
我們要借助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如果是就跳下一個欄位

<script>
  function setBlur(obj,target2)
  {
     var target =document.getElementById(target2);

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

分頁: 上一頁 1 2 3 下一頁