易栈网-膘叔

以前也曾经转载过关于BASE64方面的文章，那时候仅仅介绍了原理啥的。这回我找来的内容是如何实现的。。。

通过google找来了javaeye上的文章，他写了转载自xxx,进入xxx的页面，他告诉我转载自yyy每个人在转载的时候都去掉了一些内容。基于这样的现状，我。。。

不想转载了，贴出几个地址，自己看吧。

javaeye:http://chmod777.javaeye.com/blog/320301

xxx:http://www.cnblogs.com/yiki/archive/2009/01/18/1377828.html

yyy:http://www.cnblogs.com/reonlyrun/archive/2006/12/29/640991.html

这些实现在PHPer看来都是学习的经验，但phper根本不需要进行这些，因为php自带了base64_encode,base64_decode函数。

我要说的是，如何将加密的后的字符串在URL里传递，众所周知，base64中有三个特殊字符:"/,+,="，其中，=是补位码，/和+的标准字符，但/和=在URL里有着特定的意义，如果放到URL里，可能会被当成其他功能进行处理 。

于是，写了一个小函数进行了转换：

以前，对jsonp没有听说过，看到本文的时候觉得可以参考一下，所以，保存一下做个记录
原文：http://www.cnblogs.com/cocowool/archive/2009/05/21/1486307.html

简介
符合Web2.0特征的众多网站一个明显的特点就是采用Ajax。Ajax提供了在后台提交请求访问数据的功能。其实现主要使用的是XMLHttpRequest函数，这个函数允许客户端的Javascript发送到服务器端的HTTP请求并获得返回数据。Ajax同时也是目前众多的Mashup背后的驱动力量，他们都利用Ajax来聚合不同来源的信息。

理解同源策略的限制
同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久从Netscape Navigator 2.0时代就开始了。

解决这个限制的一个相对简单的办法就是在服务器端发送请求，服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。
另一个办法就是使用框架(frames)，将第三方站点的资源包含进来，但是包含进来的资源同样要受到同源策略的限制。

有一个很巧妙的办法就是在页面中使用动态代码元素，代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候，同源策略就不会起到限制。但是如果代码试图下载文件的时候执行还是会失败，幸运的是，我们可以使用JSON(JavaScript Object Notation)来改进这个应用。

JSON和JSONP
与XML相比，JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象。
例如一个ticker对象
    var ticker = {symbol:'IBM',price:100}
而JSON串就是    {symbol:'IBM',price:100}
这样我们就可以在函数的参数中传递JSON数据。我们很容易掌握在函数中使用动态的JSON参数数据，但是我们的目的并不是这个。
通过使我们的函数能够加载动态的JSON数据，我们就能够处理动态的数据，这项技术叫做 Dynamic Javascript Insertion。
我们看下面的例子
index.html中
    <script type="text/javascript">
        function showPrice(data){
            alert("Symbol:" + data.symbol + ", Price:" + data.price);
        }
        
        var url = "ticker.js";        //Outer JS URL
        var script = document.createElement('script');
        script.setAttribute('src', url);
        
        //load javascript
        document.getElementsByTagName('head')[0].appendChild(script);
    </script>
ticker.js中
    var data = {symbol:'IBM', price:100};
    showPrice(data);

上面的代码通过动态加入Javascript代码，来执行函数加载数据。
正如之前提到过的，同源策略对于动态插入的代码不适用。也就是你可以从不同的域中加载代码，来执行在他们代码中的JSON数据。
这就是JSONP(JSON with Padding)。注意，使用这种方法时，你必须在页面中定义回调函数，就像上例中的showPrice一样。

我们通常所说的JSONP服务(远程JSON服务)，实际上就是一种扩展的支持在用户定义函数中包含返回数据的能力。这种方法依赖于必须接受一个回调函数的名字作为参数。然后执行这个函数，处理JSON数据，并显示在客户页面上。

JQuery的JSONP支持

从JQery 1.2以后，就开始支持JSONP的调用。在另外的一个域名中指定好回调函数名称，你就可以用下面的形式来就加载JSON数据。
    url?callback=?

示例：
    jQuery.getJSON(url + "&callbak=?", function(data){
        alert("Symbol:" + data.symbol + ", Price:" + data.price);
    });
jquery会在window对象中加载一个全局的函数，当代码插入时函数执行，执行完毕后就会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的Ajax请求一样工作。

上例中我们在动态插入到页面的代码中使用了静态的json数据，虽然完成了依次JSONP返回，但仍不是JSONP服务，因为不支持在URL中定义回调函数名称。下面是一个将其变成JSONP服务的一个方法服务器端使用PHP。

首先我们来定义接口的规范，就像这样：http://www.mydomain.com/jsonp/ticker?symbol=IBM&callback=showPrice
symbol是请求条件，callback是回调函数名称。

在页面文件中，我们使用JQuery的支持：
        //JQuery JSONP Support
        var url = "http://www.mydomain.com/api/suggest.php?symbol=IBM&callback=?";
        jQuery.getJSON(url, function(data){
            alert("Symbol:" + data.symbol + ", Price:" + data.price);
        });

在suggest.php中
     $jsondata = "{symbol:'IBM', price:120}";
     echo $_GET['callback'].'('.$jsondata.')';
    
现在，如果我们想制作一些mashup，或者将第三方的资源整合到一个页面中，我们就很容易想到JSONP的解决方法了。

现有的JSONP服务
    既然我们已经知道如何使用JSONP，那么我们也就可以使用一些现有的JSONP服务了，下面是一些例子：
    Digg API:http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?
    Geonames API:http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
    Flickr API:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
                   
注意：
    JSONP是一个非常强大的构建mashp的方法，可是不是一个解决跨域访问问题的万能药。它也有一些缺点
    第一也是最重要的：JSONP不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。你无法获得一个404的错误，也不能取消这个请求
    另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。    
    

[参考资料]
1、Cross-domain communication with jsonp        http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

节日快乐，今年好象是第一次端午节放假。
清明当然不能说快乐了。。呵呵

既然是这么重要的节日，总要说说他的由来吧。对于我这样的人来说，一般就认为是屈大爷跳江这个故事。但google了一下，居然说有四种说法，贴上来与诸君分享。

1、源于纪念屈原

据《史记》“屈原贾生列传”记载，屈原，是春秋时期楚怀王的大臣。他倡导举贤授能，富国强兵，力主联齐抗秦，遭到贵族子兰等人的强烈反对，屈原遭馋去 职，被赶出都城，流放到沅、湘流域。他在流放中，写下了忧国忧民的《离骚》、《天问》、《九歌》等不朽诗篇，独具风貌，影响深远（因而，端午节也称诗人 节）。公元前278年，秦军攻破楚国京都。屈原眼看自己的祖国被侵略，心如刀割，但是始终不忍舍弃自己的祖国，于五月五日，在写下了绝笔作《怀沙》之后， 抱石投汨罗江身死，以自己的生命谱写了一曲壮丽的爱国主义乐章。

传说屈原死后，楚国百姓哀痛异常，纷纷涌到汨罗江边去凭吊屈原。渔夫们划起船只，在江上来回打捞他的真身。有位渔夫拿出为屈原准备的饭团、鸡蛋等食 物，“扑通、扑通”地丢进江里，说是让鱼龙虾蟹吃饱了，就不会去咬屈大夫的身体了。人们见后纷纷仿效。一位老医师则拿来一坛雄黄酒倒进江里，说是要药晕蛟 龙水兽，以免伤害屈大夫。后来为怕饭团为蛟龙所食，人们想出用楝树叶包饭，外缠彩丝，发展成棕子。

以后，在每年的五月初五，就有了龙舟竞渡、吃粽子、喝雄黄酒的风俗；以此来纪念爱国诗人屈原。

2、源于纪念伍子胥

端午节的第二个传说，在江浙一带流传很广，是纪念春秋时期（公元前770--前476年）的伍子胥。伍子胥名员，楚国人，父兄均为楚王所杀，后来子胥 弃暗投明，奔向吴国，助吴伐楚，五战而入楚都郢城。当时楚平王已死，子胥掘墓鞭尸三百，以报杀父兄之仇。吴王阖庐死后，其子夫差继位，吴军士气高昂，百战 百胜，越国大败，越王勾践请和，夫差许之。子胥建议，应彻底消灭越国，夫差不听，吴国大宰，受越国贿赂，谗言陷害子胥，夫差信之，赐子胥宝剑，子胥以此 死。子胥本为忠良，视死如归，在死前对邻舍人说：“我死后，将我眼睛挖出悬挂在吴京之东门上，以看越国军队入城灭吴”，便自刎而死，夫差闻言大怒，令取子 胥之尸体装在皮革里于五月五日投入大江，因此相传端午节亦为纪念伍子胥之日。

3、源于纪念孝女曹娥

端午节的第三个传说，是为纪念东汉（公元23--220年）孝女曹娥救父投江。曹娥是东汉上虞人，父亲溺于江中，数日不见尸体，当时孝女曹娥年仅十四 岁，昼夜沿江号哭。过了十七天，在五月五日也投江，五日后抱出父尸。就此传为神话，继而相传至县府知事，令度尚为之立碑，让他的弟子邯郸淳作诔辞颂扬。

孝女曹娥之墓，在今浙江绍兴，后传曹娥碑为晋王义所书。后人为纪念曹娥的孝节，在曹娥投江之处兴建曹娥庙，她所居住的村镇改名为曹娥镇，曹娥殉父之处定名为曹娥江。

4、源于古越民族图腾祭

近代大量出土文物和考古研究证实：长江中下游广大地区，在新石器时代，有一种几何印纹陶为特征的文化遗存。该遗存的族属，据专家推断是一个崇拜龙的图 腾的部族----史称百越族。出土陶器上的纹饰和历史传说示明，他们有断发纹身的习俗，生活于水乡，自比是龙的子孙。其生产工具，大量的还是石器，也有 铲、凿等小件的青铜器。作为生活用品的坛坛罐罐中，烧煮食物的印纹陶鼎是他们所特有的，是他们族群的标志之一。直到秦汉时代尚有百越人，端午节就是他们创 立用于祭祖的节日。在数千年的历史发展中，大部分百越人已经融合到汉族中去了，其余部分则演变为南方许多少数民族，因此，端午节成了全中华民族的节日。

谈完了由来，就不由得谈谈伤心事了。05年，某些国家居然把端午申请为自己国家的世界性遗产，而不可思议的是，他们居然成功了。原始新闻来自新浪：http://news.sina.com.cn/c/2004-05-16/02192539812s.shtml，唉。。。。

网页开发人员使用firebug那是理所当然的事，IE8也在学习firebug，而且，快捷键都一样哦。F12打开firebug(IE也是这个快捷键，哈哈)

原文地址：http://www.cnblogs.com/cocowool/archive/2009/05/12/1454696.html

作者：小狼

内容如下：

Firebug对于Web开发人员来说，已经成为了不可或缺的工具，但是在我日常的工作中，常常感觉还没有能够深刻的挖掘出她的潜力，今天花了点时间仔细研究了Console和命令行的使用在提高工作效率方面的作用，
记下来和大家分享一下.

Firebug一共有Console,HTML,CSS,Script,DOM,NET六个Tab，今天着重说一下Console的用法。
其实我们对于Console应该非常熟悉，因为这里是Firebug给出各种信息的窗口，而这也正是Console的主要用途，日志记录(Logging)。
除此之外，Console还提供了通过命令行方式来调试Javascript的方法。下面就来学习一下Console的用法。

1、Firefox的日志记录(Logging in Firefox)。
通过Console的记录方法，我们可以不再使用烦人的alert或者document.write方法来进行调试。
Firebug提供了五种日志的类型：
    console.log:记录一行信息，无任何图标提示；
    console.debug:记录一行信息，带超链接，可以链接到语句调用的地方；
    console.error():向控制台中写入错误信息，带错误图标显示和高亮代码链接；
    console.info():向控制台中写入提示信息，带信息图标显示和高亮代码链接；
    console.warn():向控制台中写入警告信息，带警告图标显示和高亮代码链接；

    consle打印字符串支持字符串替换，使用起来就像c里面的printf(“%s",a),支持的类型包括：
    %s        string，字符串
    %d,%i    整型
    %f        浮点
    %o        对象
    如果使用%o的话，对象就会用绿色的超链接表示出来，单击后会将你带到DOM视图。

2、分组(Grouping)。
    如果某一类的信息特别多时，分组就有利于逻辑的划分。
    使用上很简单，参见代码。
            function consoleGroup(){
                var groupname = "Group 1";
                console.group("Message group %s", groupname);
                console.log("This is the 1 message in %s", groupname);
                console.log("This is the 2 message in %s", groupname);
                console.log("This is the 3 message in %s", groupname);
                console.groupEnd();
                
                goupname = "Group 2";
                console.group("Message group %s", goupname);
                console.log("This is the 1 message in %s", goupname);
                
                var subgroupname = "Sub group 1";
                console.group("Message group %s",subgroupname);
                console.log("This is the 1 message in %s", subgroupname);
                console.log("This is the 2 message in %s", subgroupname);
                console.log("This is the 3 message in %s", subgroupname);
                console.groupEnd();
                
                console.log("This is the 2 message in %s", goupname);
                console.groupEnd();
            }

   
3、console.dir和console.dirxml
    console.dir可以将一个对象的所有方法和属性打印出来，这个方法无疑是非常有用的，我们不再需要object.toString这样的方法支持了，只要有firebug，查看对象也变得很轻松
    同时，我们也可以将页面中的元素作为一个对象打印出来，但是你要小心，因为这将输出众多的信息，可能你会迷失在繁杂的信息中而找不到自己需要的条目。
    我们可以通过分组将这些大量的信息放入一个分组中，这样可以在逻辑上更清楚一些。
            function consoleDir(){
                function Car(){
                    this.Model = "Old Model";
                    this.getManu = function(){
                        return "Toyota";
                    }
                }
                
                var objCar = new Car();
                console.dir(objCar);
                console.dir(zoo);
                
                var groupname = "Css Style";
                console.group("The button Style", groupname);
                console.dir(document.getElementById('consoledir').style, groupname);
                console.groupEnd();
            }

           
    console.dirxml    打印出HTML元素的XML表示形式.

4、断言(console.assert())。
    console.assert()可以用来判断一个表达式是否正确，如果错误，他就会打印错误信息在控制台窗口中。
    
5、追踪(console.trace())。
    console.trace()是一个非常有趣的功能。我们先来看看官方的解释：打印Javascript执行时刻的堆栈追踪。
    这个函数可以打印出程序执行时从起点到终点的路径信息。
    比如如果我们想知道某个函数是何时和如何被执行的，我们将console.trace()放在这个函数中，我们就能够的看到这个函数被执行的路径。
    这个函数在调试其他人的源代码时非常有用。    

6、计时(Timing)。
    console.time(timeName)可以用来计时，这个在我们需要知道代码执行效率的时候特别有用，就不用自己造轮子了。
            function consoleTime(){
                var timeName = "timer1";
                console.time(timeName);
                var a = 0;                
                for(var i = 0; i < 100; i++){
                    for(var j = 0; j < 100; j++){
//                        console.log('Hello world');
                        a = a + 1;
                    }
                }
                
                console.log("a = %d", a);
                console.timeEnd(timeName);
            }

7、Javascript分析器(Javascript Profiler)。
    我们可以通过代码console.profile('profileName')或者单击Profiler标签来进行Javascript代码执行的分析。这个功能有点类似于console.time()，可以帮助我们评估
    代码的表现，但是能够提供比console.time()更详细的信息。

    有三种方法可以调用Javascript profiler。一种是在代码中写入分析脚本，一种是单击profile标签，最后还可以在命令行下输入命令来执行。
    执行后，可以看到详细的输出结果，下面对各项进行一些说明：
    Function Column：显示调用的函数名称；
    Call Column：显示调用次数；
    Percent Column：显示消耗的时间比；
    Own Time：显示函数内部语句执行的时间，不包括调用其他函数的时间；
    Time Column：显示函数从开始到结束的执行时间；
    Avg Column：平均时间。Avg = Own / Call;
    Min & Max Column：显示最小和最大时间；
    File Column：函数所在的文件；    

8、其他的一些选项。
    在Console Tab的最右侧有一个Options的选项，在这里可以自己定义需要显示的错误，其内容很好理解，这里就不多说了。
    有一点就是Firebug1.3以后，多了
    Show Chrome Errors
    Show Chrome Message

    等几个选项，这几个选项还没有验证过其具体的作用，哪位知道的可以共享一下。

[参考资料]

1、Firebug Tutorial    http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i
2、Firebug Tutorial    http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii