大猫の意淫网志

jQuery $.ajax .abort()

Wednesday, August 26th, 2009

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 参考手册 (中文版)!

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

Posted in codex | 29 Comments »

(无修正)给页面加Loading

Wednesday, November 26th, 2008

大家先来跟我学一个单词

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

跟着老师念: 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真是所有男人的福音啊

Posted in codex | 90 Comments »

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

Thursday, October 9th, 2008

AJAX小伎俩
大家都知道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)
例子如下：
http://ooxx.me/lab/ajaxForm/landingpage.htm
有firebug的同学打开Console可以看到类似 GET http://ooxx.me/lab/ajaxForm/ajaxProxy_id.php?id=bigcat&timeStamp= 字样，表示发送了http请求，在连续输入时，是不会发送的
哈，这里还有个AJAX跨域的小东东，我用的是一个PHPproxy
点我查看源代码另存为.php，把$proxy_url改成你的AJAX服务器端就可以实现跨域使用了

Posted in codex | 31 Comments »

getElementById在IE下混淆name与id

Wednesday, February 20th, 2008

About the author

Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability.

原文点我 因为对我有用所以弄了过来,以下为大猫同学的不负责任翻译

 

贼.悅汗孙同学遇到了个问题,急得头皮屑直掉,后来买了瓶海飞丝,头屑去无踪...他觉得有必要强调一下这个头屑的问题

这个问题是:
当你在用getElementById去获取对应id的元素属性的时候,WIN下的IE(或某些版本的Opera)会不负责任的获取与id相同值的name对应的元素.

虽然不大可能你用同一个值命名不同元素的id和name,但一旦产生错误,会让你欲仙欲死

下面是实例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="description" content="A brief description of the content on this page.">
<title>The name and id attributes in IE</title>
</head>
<body>
<div id="description">
<p>A description of something.</p>
</div>
</body>
</html>

OK,现在意淫一下你想要用JavaScript去非礼一下div#description.

简单的来说,比如说你想要在页面加载的时候把div#description的display属性设置为none:

function hideIt() {
var obj = document.getElementById('description');
obj.style.display = 'none';
}
window.onload = hideIt;

在IE里非礼一番后姑娘却一点反应都没有,原来是因为在IE里getElementById去找位于div元素之前name为description的meta元素去了

避免头皮屑你可以有两条路可以走

1.保证没有不同的元素身上有相同值得name和id

2.用一段script搞定>overriding IE’s native getElementById method

如果你已经意识到这问题,当我没说,如果还没,我希望你会很high.

Posted in 小日子 | 9 Comments »