大猫 (Madao) - まるでダメなおっさん

Tag Archives

4 Articles

jQuery $.ajax .abort()

by bigCat 30 Comments

cache

花了一晚上看jQuery的ajax,然后基于空帷同学的CGI写了个产生指定大小 css js img 填擦车(Cache)的页面 http://cache.if.vc

但是做.abort()中断http请求的时候遇到问题
查了jQuery 1.3 API 参考文档中文版 未果

最后在老外那里找到解决方案:

把XHR对象丢给current_request, 再调用current_request的.abort()

current_request = $.get('/events', { '七夕': '发春' },function(resp) { alert(resp); });
if(current_request) {current_request.abort();}

简单的AJAX真简单… … 好好学习ing
BTW: box和文字的阴影都是CSS3,firefox效果最好~想学习的话
手头肯定要必备一本新鲜出炉的CSS 3.0 参考手册 (中文版)!

七夕情人节, 大家都有女盆友… … 好羡慕~~
当然,我也有女友… 各位节日快乐!

(无修正)给页面加Loading

by bigCat 96 Comments

大家先来跟我学一个单词

那就是传说中的[無修正]!

跟着老师念: mo xiu sei (拼音第一声)

好,接下来我要对阿呜(aw)同学的那篇给页面加上Loading效果最简单实用的办法做一下修正

阿呜的方法系酱紫滴
建立一个div,一个css,一个js
div就素那一坨字

 
假装在异步加载ing...

css就素那一抹红

#loading{
	z-index:1;
	padding:5px 0 5px 9px;
	background:#c44;
	left:0;
	top:0;
	width:90px;
	color:#fff;
	position:fixed;
}

js让丫消失(用的jquery框架,推荐大家使用)

 

大猫同学进行了再一次的艺术加工处理
原html没啥子缺点,文案要改的话自由发挥
原css缺点:ie6不支持的position:fixed,再说ie也不支持圆角
考虑js去fixed成本太高,这里推荐加上float属性
原因是如果loading和大猫一样是竖着来的,不float会很挫
假若横着,float了也不错

#loading {
	-moz-border-radius-bottomright:5px;/* FF专用圆角属性 */
	float:left;/* 横竖都不挫 */
	width:26px; /* 如果你也想盲目跟风就修改width和height和padding */
}

原js消失方式是突然来那么一下
身为一枚老师,是绝对不允许早x的
so
这里采用了jquery.hide的参数slow(ie6下效果尤佳)

 

具体写法可以参照俺的common.js
jquery真是所有男人的福音啊

监视输入频率控制AJAX请求数

by bigCat 33 Comments

大家都知道AJAX是非常好玩的东东,这几天俺在写表单验证JS的时候遇到了一问题: 在注册表单输入用户名的时候,俺采用了onkeyup事件来触发AJAX校验,就是说每打一个字,表单就会去服务器那问一下是不是这用户名可以用,Justin章同学提出这样子服务器负担会比较大,比如疯狂打100个字就会发送100个请求,而Peter饭同学建议通过监视输入频率来控制请求数 具体实现效果描述如下:

两次击键间隔少于1秒不会发送请求,直到停顿时间超过1秒后发送一坨请求 逻辑如下:

设置一个timer倒计时1秒,每次击键都会初始化timer并重新开始倒计时 在骚扰花花同学一通后得出代码如下:

var timer;
function delay() {
if (timer) clearTimeout(timer);
timer = setTimeout(AJAX,1000);
}
function AJAX(){alert("假装我是AJAX")}

注意setTimeout的函数调用在IE下是不能传递变量的,

比如不能写成 setTimeout(AJAX(‘cat’),1000)

哈,这里还有个AJAX跨域的小东东,我用的是一个PHPproxy把$proxy_url改成你的AJAX服务器端就可以实现跨域使用了