日期 : 2010年05月25日分类 : 代码作者 : admin
下面是在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, json, jsonp, 技术
日期 : 2010年05月23日分类 : 代码作者 : admin
下面是在校毕业生专题中实现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 : anyjs, js, 技术
日期 : 2010年03月31日分类 : 代码, 工作作者 : admin
写不出什么有深度的文章,仅当笔记吧。
几行代码:
<script type=”text/javascript”>
<!–
while(!window.loaded){
//alert(‘loading’);
}
//alert(‘loaded’);
–>
</script>
上述代码与常用的window.onload=function(){}理论上会实现一样效果,等待页面加载完成后执行后续操作。然而实际的运行过程中,这种方法会导致浏览器暂停响应或假死,不知你是否有遇到过在gmail加载数据过程中,偶尔也会有短暂的假死(使用buzz时尤为明显),无法对用户行为作出响应,也说明了js语言并不具备多线程的处理机制。
也许为了弥补单线程环境中的不足,javascript引入了诸如onclick()、onmouseover()、setTimeOut(),setInterval(),ajax异步请求处理函数等回调机制,回调机制类同操作系统中的中断响应,在发生异步事件时,CPU暂停执行当前程序转向其它的相应事件处理程序,待处理完毕后又返回到原来被中断处继续执行或调度新的执行过程。回调机制则利用了“延时中断”,js引擎在“预处理”回调函数时,加入一个延时中断信号,待触发回调函数时回到中断处执行。
模拟出来的多线程:
<script type=”text/javascript”>
<!–
function threadA(){
//do something
}
function threadA(){
//do something
}
setInterval(threadA,100);
setInterval(threadB,100);
–>
</script>
上述代码使用setInterval()函数,设置一个足够短的时间片间隔,模拟出轮换执行的两个”线程”threadA,threadB,虽然并不是真正意义上的多线程,却可以达到两个“线程”交替执行的效果。(如jsthread,一个允许JavaScript进行多线程编程的库)
以上大概就是自己一直把js多线程搞混的原因吧,虽然还是懵懂状态,但多少对其机制有了进一步了解,js很强大但也比较难掌握,有误解的地方还希望高手指正。

Tags : javascript, 前端开发
日期 : 2010年03月25日分类 : 代码, 设计作者 : admin
IxEdit是一个为简化Web交互开发而设计的一个js库,基于jQuery&UI库,用它可以快速敏捷的实现很多时下比较主流的交互效果,操作简便。

在使用它之前确认你的浏览器已经安装Google Gear,或者使用了Google Chrome作为默认浏览器。IxEdit目前放出的是beta版,使用上基本问题不大,生成的代码足够简洁,同时你还可以自行对代码进行优化。
想了解更多详细信息:
1.官方的用户手册 UserGuide(英文):
2.阿一前辈的视频教程(推荐)。

Tags : ixedit, 技术, 设计
日期 : 2009年08月4日分类 : 代码作者 : admin
一,先看一下伪静态实现方法:
有两种,第一种也是推荐的一种,就是在服务器端配置URL Rewrite,如果你用的apache请确认你的已经加载了rewrite模块,在http.conf中将#LoadModule rewrite_module modules/mod_rewrite前面的#去掉即可(国内部分空间商已提供支持,国外基本上都支持),之后你只需在站点根目录加入自定义好的.htaccess即可,要想拥有个性化的URL,你还需要掌握正则表达式的运用。还有,提醒一下用张宴学长APMServ的用户,之前在本地调试一直不成功,原因是在http.conf文件中,当前的虚拟主机的AllowOverride默认为none导致的,将其修改为all即可,同时allow from也最好设为all.
形如:
<Directory “X:/www/htdocs”>
Options FollowSymLinks IncludesNOEXEC Indexes
DirectoryIndex index.html index.htm default.htm index.php default.php index.cgi default.cgi index.shtml
AllowOverride None
Order Deny,Allow
Allow from all
</Directory>
第二种实现伪静态的方法就是在PHP文件内部用$_SERVER函数获取处理QUERY_STRING,关于$_SERVER函数的应用,这里有比较详细的介绍。获得QUERY_STRING后,应用PHP自带的串操作函数解析即可,过程比较简单不再赘述,有兴趣的朋友可以查阅一下相关资料。
二,生成纯静态HTML文件:
纯静态的HTML有效的提高的站点的安全性,同时也大大减轻了服务器的负荷,速度上也有一定的飞跃,唯一的缺陷是就是占用服务器的硬盘空间,就目前来说,时间比空间更宝贵,国内大型站点基本上都采用的这种方法。
实现原理:提取缓冲区的数据写入指定文件中,当然这是个HTML的文件。主要利用ob函数,过程比较简单。ob_start()函数,打开输出缓冲区,利用ob_get_contents 获取内部缓冲区内容,将内容写入文件,关闭缓冲区。
以下是一段简单示例(只做示例,不适合实际应用):
<?php
/**
* 生成HTML静态页面
* @param $pram:传入id;$type:读取的php页面类型
* @return 结果
*/
ob_start();
include “File.class.php”; //自定义文件类
$pram=intval($_GET['id']);
if(!isset($pram))
$pram=1;
include(‘read.php’);//假设读取数据流来自read.php
$content=ob_get_contents();
ob_end_clean();
$filename=”YOURPATH/NAME.htm”;
if($name=toHtml($filename,$content)){
echo ‘The HTML file <b>’.$name.’</b> create success!<br />’;
echo ‘Take a look! <a href=’.$name.’ target=”_blank”> Click Here</a><br />’;
}
else {
echo ‘HTML file create failed!’;
}
/**
* 生成静态HTML的函数
* @param $filename:路径+文件名,$content:写入内容
* @since 2009.08.03
* @access public
*/
function toHtml($filename,$content)
{
$f=new fileClass();
if (!file_exists($filename)) {
$f->createFile($filename);
}
if($f->writeinFile($filename,$content)) {
return $filename;
}
return false;
} // end func
?>
基本原理就是这样了,大家可以根据需求自行修改。
两种方法有个共同点,都是为了讨好搜索引擎,毋庸置疑良好的搜索引擎优化会给你的站点带来意想不到的收获。
方法介绍到此,希望它们能对你有所帮助。

Tags : seo, URL Rewrite, URL重写, 伪静态, 学习笔记, 搜索引擎优化, 静态化