`
thinkact
  • 浏览: 82345 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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,javascript

    简单ajax步骤 a.创建request,根据浏览器版本不同,创建不同的request对象; b.request.open("post",url,true); //打开连接,post是提交方式,如果是get方式,直接带问号。 var u = "user="+encodeURI(username);//...

    Ajax最简单例子Demo

    Ajax最简单例子,一个例子让你明白Ajax原理,XMLHttpRequest原理 var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 ...

    AJAX开发简略.pdf

    AJAX开发介绍 简单示例 基础知识 简单操作 [removed] var http_request = false; function send_request(url) {//初始化、指定处理函数、发送请求的函数 http_request = false; //开始初始化XMLHttpRequest对象...

    简单的PHP+MySQL+AJAX留言板实例

    request.send(poststr); request.onreadystatechange = updatePage; } function updatePage() { if (request.readyState == 4) if (request.status == 200) document.getElementById("output").innerHTML = ...

    Head First Ajax

    Use send() to send your request.............................................................................................................................. 28 Section 1.15. The server usually ...

    AJAX示例程序,AJAX初学入门

     xmlhttp_request.send(null);  xmlhttp_request.onreadystatechange = function(){  if (xmlhttp_request.readyState == 4) {  // 收到完整的服务器响应  document.write("yes")  } else{  alert(1)  } ...

    ntlm.js:javascript中Microsoft NTLM的实现。 允许您执行您一直想要的NTLM ajax

    ntlm.js ... 使您可以执行您一直想要的AJAX NTLM。 用法 Ntlm.setCredentials('domain', '... request.send(null); console.log(request.responseText); // => My super secret message stored on server. } 设置

    ajax_func.js

    经常会用到的经典ajax代码,里面包括send_request方法

    Ajax原理分析及其实现的简单代码

    让更多人了解ajax技术.function _open(requestUrl) { var xmlHttp = false; var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2....

    .net ajax示例

    xmlHttp.send(null) ; } function show(){ if(xmlHttp.readyState==4){//完成 if(xmlHttp.status==200){//成功 if(xmlHttp.responseText==""){ if(isEn==1){ document.getElementById("spanpwd")....

    php+AJAX传送中文会导致乱码的问题的解决方法

    http_request.send(“action=”+strName+”&val=”+val); //如果val的值为中文,则产生乱码 //解决方法很简单:使用javascript中的escape(string) 函数 复制代码 代码如下:http_request.open(“POS

    用 ajax + asp.net 采集文章

    用 ajax + asp.net 采集文章 试验型的项目。 原先用多线程来采集,但是觉得多线程采集要显示采集进度很麻烦。 后来改为单线程,边采集边显示进度。又发现出现采集错误的时候不方便作停止。 干脆用ajax 加 asp.net ...

    AJAX的阻塞及跨域名解析

    阻塞的AJAX请求 我们先... request.send(null);}function threeRequests(){ simpleRequest(); simpleRequest(); simpleRequest();}当执行threeRequests时就会连续发出3个相同域名的请求,还是通过统计图表来查看阻

    ajax、mysql、jstl实现分页、局部刷新界面

    xmlhttp.send(); } function myfunction(id,times) { //alert("123"); loadXMLDoc("open.jsp?id="+id+"&times="+times+"&t="+Math.random(),function() { //alert(xmlhttp.status); if(xmlhttp....

    Ajax课件学习(免费)

    2、在ajax执行过程中,服务器会通知客户端当前的通信状态。因为在web2.0的应用中,客户端的界面没有刷新,这样你就必须得告诉用户服务器端的各种状态,但是这种情况再web1中不存在,因为在web1中如果能返回页面那...

    AJAX javascript的跨域访问执行

    突然感觉就是这里的问题,研究一下,搞定后其实觉得挺容易的,只是自己知识还是有些欠缺,解决方法如下:阻塞的AJAX请求 我们先来证实... request.send(null); } function threeRequests() { simpleRequest(); si

    Ajax技术课件,保密资料下载

    同步操作 :在jsp/servlet中 发送了一个同步的request 这时用户必须等待响应. 特点:返回一个整张页面 异步操作 : 发送了一个异步的request 这时用户不用等待 ,可以进行后续的操作 特点: 返回一张页面的...

    三级联动Ajax菜单(包含省市数据)

    三级联动Ajax菜单(包含省市数据) ; charset=utf-8" /> var xmlHttp; var requestType=""; function createXMLHttpRequest() { if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP...

    详解PHP+AJAX无刷新分页实现方法

    function send_request(url){//初始化,指定处理函数,发送请求的函数 http_request=false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest){//Mozilla浏览器 http_request=new XMLHttpRequest(); if...

    java练习题

    使用ajax技术完成下拉列表对应显示内容。 当选择下拉列表某项时: 显示对应内容: 参考答案: 1)ActionServlet copytextpop-up package web; import java.io.IOException; import java.io.PrintWriter; ...

Global site tag (gtag.js) - Google Analytics