大家都知道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服务器端就可以实现跨域使用了
33 评论
添加您的 →-_-b
你居然写技术文章
@Leo, 囧,被鄙视了
@Leo,他 写的还是不错的 哈哈
这个太复杂。。而且增加页面代码长度。。。。我觉得因该用个按钮检查。最好跳出个小窗口:)
简单又省心哈哈:)
@homer, …你这样,用户体验很不好
@BigCat, 貌似很多论坛注册采用这个功能 你找个一个脱掉看看就能有收获哈:)
@homer, 哈,并不是用的多的就是好的,均衡用户体验和服务器负担才是王道
@BigCat, 按道理因该有个时间数值可以调的。。。。你慢慢找找看。。。
@homer, 后面那个1000就是数值,单位是毫秒哈
@homer, 我讨厌窗口…
@Yacca, 看样子你经常被弹窗弹~
看不懂….
另 第一幅图片是什么意思呢…
@Enson, 因为技术文章一般都比较无聊,所以配个解闷的图…
@BigCat, 喵rz…
怎么不用Jquery 这个淫荡的J叔叔。。。做ajax延迟判断 非常地效率··^_^
@飞鱼, 因为…因为…Jquery用多了,就不会用原生js了
(其实是我不会用)
@BigCat, 不过貌似 挺多 大站 都是用jquery 还有用YUI 的 淘宝似乎就是用YUI 整理过来的
@飞鱼, 恩,国际站是基于YUI改的,叫ae.js框架哈哈
正在学~
@飞鱼, 原理都一样的.
而且现在jQeury还没有import呢.哈 .
鹤鞋的猪。。。。
技术贴,BS
不吹水的帖子很囧~
Peter饭 … 雷.
从效率上考虑来说,这样子客户端的压力增大了.
我觉得这种细节的事情讨论过来仔细起来最终没有一个好结果.
举例说明:
如果Timeout设置为5秒
用户用了很快的速度输完了,跳转到了下一个option item,却不会触发校验.
要等5秒到了才校验.
如果再加一个blur事件,那这一个即时校验有啥意义呢?
PD的主导性太强了 ..
还好这次我没有参加讨论..
幸甚 ..
哈哈.
另外,不要叫我"花花"了么.. 日
@Evance, 我觉得0.7 – 1秒左右是比较合理的时间,按照正常速度输入的话
对于用户:也不会反应很迟钝
对服务器:1秒超时能保证大部分时间都能连续输入,超时后才发送请求也节约了服务器资源
对本地效率,个人感觉这种程度的效率牺牲还是值得的
牵扯到各个方面,寻找一个平衡点就根据不同情况来调整了,所谓平衡点就在于那个时间到底是几秒了,哈
@Evance, 另外,花花啊,我决定以后不叫你花花了,好么,花花?
http://bloggermap.org/map.php?id=423
原来大猫住在太平洋中心的,凶悍!
@cosbeta, hawaii,beauty&bikini&beach~
这个实际上只是个策略问题。。。 跟onblur事件触发相比 确实是个好办法 反应迅速 也少两次鼠标点击 嗯。。。
用onkeyup,那opera下输入中文怎么办
跨域的话 为之漫笔博客提到的JSONP我觉得挺好的 http://www.cn-cuckoo.com/2008/09/13/the-origin-of-jsonp-262.html
@vampire, opera不考虑了,因为根据份额,权衡投入的成本:)
感谢推荐~
setTimeout是这么用di:
setTimeout(
function(){
//YOUR_FUNC();
//YOUR_FUNC(ARGV);
//alert(‘hello,world’)
},1000);
@Mac, 俺看过说明书…
你博客的风格很奇怪哦
@Joseph 呃,奇怪在哪?