ajax 如何减少事件过程中request.send的次数


[转]http://am9.spaces.live.com/blog/cns!dd3bc8b291326a9a!690.entry

简单举例而言,一个使用简单搜索功能的ajax小程序。在文本框输入的过程中(onkeyup事件)ajax建立httprequest,get url取得后台回应然后更新结果到前台。
现在的问题是我们访问后台太频繁了,我们真的需要每一个onkeyup时都访问后台么?
比如输入"domino"这个单词,过程中有最少六次onkeyup;对应地后台给六次信息反馈,可是都有用么?
应该不是,通常我们仅希望输入完“domino”后,后台给我们一次信息(好吧可能有其他情况我们后面讨论#1)。

目标有了,当一组密集的输入事件发生时,我们只把这组事件的最后一个拿出来触发Ajax访问后台的功能。以下是用window.setTimeout实现的逻辑。
思路其实很简单输入事件不再直接触发request.send,而是触发一个延时器 timer=window.setTimeout("onAjax(actInput)",300);
每新建一个延时器时都会把前一个延时器清掉if (timer)   window.clearTimeout(timer);
这样即可满足要求,正如你看到的“300”是我测试下来比较合理的速度。
其他:要注意的可能有人和我一样,本来有一些无用输入的屏蔽逻辑是写在onKeyUp调用的函数里比如我原来的写在onAjax() 里面
现在呢这个函数里访问不到event了,所以要写到现在onKeyUp调用的函数比如我的beforeAjax(T1)里面来。


input.onKeyUp="beforeAjax(T1)"
var timer;
var actInput;
function beforeAjax(T1){
  actInput=T1;
  if(event.keyCode==37 | event.keyCode==39)return false;//无用输入的屏蔽
  if (timer)   window.clearTimeout(timer);
  timer=window.setTimeout("onAjax(actInput)",300);
}

function onAjax() {
。。。。。。
    initRequest(url);
    req.onreadystatechange = processRequest;
    req.open("GET", url, true);
    req.send(null);
}

#1不管其他什么情况你如果想任何时候后台反馈一下只需停顿你的输入然后等(在这个程序例子里)300毫秒就OK了

无线风光在户外,户外精品在竟峰
jfhw360.taobao.com

你可能感兴趣的:(Ajax,Blog)