标签为‘anyjs’的日志

JSON跨域调用与动态脚本加载

下面是在anyjs中JSON跨域的实现(JSONP),原理很简单,动态生成script标签,没有使用到callback(可支持),需要与后台协调保持对象一致,anyjs默认采用JSONP。

01 anyjs.gjsonp=function(url,callbackfn){
02     var h=document.getElementsByTagName(‘head’)[0];
03     var s=anyjs.create(‘script’);
04     anyjs(s).set(‘type’, ‘text/javascript’).set(‘src’, url);
05     anyjs(h).apd(s);
06     if(anyjs.ie){ //IE6+
07             s.onreadystatechange = function () {
08             if (s.readyState == ‘loaded’ || s.readyState == ‘complete’) {
09                 (callbackfn)(JSONP);
10                 JSONP=null;
11                anyjs(s).rmv();
12             }
13         }
14     } else {//GECKOS、WEBKIT、ETC..
15             s.onload = function() {
16             (callbackfn)(JSONP);
17             JSONP=null;
18             anyjs(s).rmv();
19         }
20     }
21     return false;
22 };//end

使用anyjs跨域调用示例:

01 //JSONP跨域测试开始
02 $(“#jsonp”).click(function(){
03 y=$.create(“div”);
04 $(y).set(“id”,“bglay”).set(“class”,“bglay”);
05 $(“body”).ist(y);
06 x=$.create(“div”);
07 $(x).set(“id”,“ajax”);
08 $(x).set(“class”,“ajax”);
09 $(“body”).ist(x);
10 $(“#ajax”).show();
11 $.gjsonp(“http://www.focusstudio.org/data.php?type=jsonp”,function(data){
12 var arr=[],str=“”;
13 for(var i=0;i<data.length;i++){
14
15 arr.push(data[i].a);
16 str+=data[i].b+“|”;
17 }
18 $(“#ajax”).h(arr.join(“‘”)+str);
19 });
20
21 $(“#ajax”).click(function(){$(“div.bglay”,“#ajax”).fout();$(“div.bglay”,“#ajax”).rmv();});
22 });
23 //跨域jsonp测试结束

后台相关代码:

1 <?php
2 header(“Content-Type:application/x-javascript; charset=utf-8″);
3 $callback = isset($_GET['callback']) ? $_GET['callback'] : ‘JSONP’;
4 $json=array(array(‘a’=>‘enimo1jsonp’,‘b’=>‘test1jsonp’),array(‘a’=>‘enimo2′,‘b’=>‘test2jsonp’));
5 echo ‘var ‘.$callback.‘=’.json_encode($json);
6 ?>

到这里,要实现动态加载js脚本,我想大家应该不言自明了吧。

Tags : , , ,

用anyjs实现简单的LightBox效果

anyjs是自己正在筹备的一个轻量级js库,主要为了提高平时开发效率,目前只封装了一些开发过程中常用到的事件方法以及DOM操作,当然bug还很多,希望高手指教,不胜感激,SVN地址:http://anyjs.googlecode.com/svn/trunk/
下面是在校毕业生专题中实现lightbox效果的代码,兼容目前主流的FF/Chrome/IE6+,效果简单基础,如果看起来比较乱,希望见谅。
01 <script>
02 window.onload=function(){
03 $(“img”).each(function(i){
04 $(i).click(function(){
05
06 /* y=$.create(“div”);
07 $(y).set(“id”,”bglay”).set(“class”,”bglay”);
08 $(“body”).ist(y);
09 x=$.create(“div”);
10 $(x).set(“id”,”ajax”);
11 $(x).set(“class”,”ajax”); */
12
13 $(“#bglay”).show();
14 $(“#ajax”).show().h(“<img src=’images/load.gif’ /> 正在加载….”);
15 var anyimg=new Image();
16 anyimg.src=$(i).get(“src”);
17 anyimg.onload=function(){$(“#ajax”).h(“<img src=’”+anyimg.src+“‘ alt=’点击关闭’ width=’500′  border=’0′/>”);}
18
19 return false;
20 });
21 });
22
23 $(“#ajax”).click(function(){$(“#bglay”,“#ajax”).hide();});
24 }
25 </script>
26 <style>
27 *{margin:0;padding:0;}
28 #ajax{
29 position:fixed;
30 _position:absolute;
31 left:50%;
32 top:100px;
33 _top:expression(document.documentElement.scrollTop+100+“px”);
34 width:500px;
35 margin-left:-250px;
36 border:2px solid #ccc;
37 color:#696969;
38 z-index:99;
39 background-color:#fff;
40 display:none;
41 }
42 #bglay{
43 position:fixed;
44 _position:absolute;/*ie6*/
45 z-index:2;
46 overflow:hidden;
47 top:0px;
48 left:0px;
49 width:100%;
50 height:100%;
51 background:#000;
52 opacity:0.7;
53 filter: Alpha(opacity=70);
54 display:none;
55 }
56 </style>
 
有时间再陆续将几个常用web2.0效果实现,放在这当做学习笔记吧。

Tags : , ,