定时器AJAX请求重帧现象

  最近做一个关于定时AJAX请求数据库信息问题，发现经常有重帧现象。
  目前的代码:
  

var id = 0;
window.onload = function() {
    id = document.getElementById("maxId").value;
	initXMLRequest();
    setInterval("sendHTTPRequest()", 1000);
};

var xmlRequest = null;
function initXMLRequest() {
	if (window.ActiveXObject) {
		xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		if (window.XMLHttpRequest) {
			xmlRequest = new XMLHttpRequest();
		}
	}
}
function sendHTTPRequest() {
	var url = "decodePass?id=" + id + "&sync=" + sync;
	if (xmlRequest) {
		xmlRequest.open("POST", url, true);
		xmlRequest.onreadystatechange = isDataExists;
        xmlRequest.setRequestHeader("If-Modified-Since","0");
		xmlRequest.send(null);
	}
}
function isDataExists() {
	if (xmlRequest.readyState == 4) {
		if (xmlRequest.status == 200) {
			id++;
		}
	}
}

  个人推断:
    1、在定时轮询AJAX时，在当前设置的循环时间内，没有请求到所要请求的值，这样会发生AJAX URL 没有改变，所以
   下次请求还是上次请求的内容，当好几次都没有请求到数据的时候，这样到最后堆积到一块，就会请求到许多重复数据
  想到的解决办法:
   1、采用递归方法，在方法里面写定时调用方法，可是这样的话当第一次没有请求到数据时候就不会在请求了，
  

window.onload = function() {
    sendHTTPRequest();
};
function isDataExists() {
	if (xmlRequest.readyState == 4) {
		if (xmlRequest.status == 200) {
			 setInterval("sendHTTPRequest()", 1000);
                          id++;
		}
	}
}

解决办法：
1、把异步请求改成同步请求
2、把setInterval 改成 setTimeout 改为请求完成停顿一秒再请求
3、锁定窗口请求(没试过)

引用

window.reqstate = false;

评论

29 楼 奥义之舞 2011-05-31  

silence1214 写道

奥义之舞 写道

silence1214 写道

你这个问题应该是同步异步的问题，ajax默认是异步的，没有等到你这次的返回下一次又开始请求了，可能一下子得到2个的结果。你尝试下设置为同步。就是这次等到结果了，才触发下一次的轮训就好了

我同时用了同步，setTimeout 恩 好了 基本上没有这个问题了！

要感谢我下撒

    
所有提过意见的 都感谢

28 楼 silence1214 2011-05-31  

奥义之舞 写道

silence1214 写道

你这个问题应该是同步异步的问题，ajax默认是异步的，没有等到你这次的返回下一次又开始请求了，可能一下子得到2个的结果。你尝试下设置为同步。就是这次等到结果了，才触发下一次的轮训就好了

我同时用了同步，setTimeout 恩 好了 基本上没有这个问题了！

要感谢我下撒

27 楼 奥义之舞 2011-05-30  

vb2005xu 写道

lz加个状态位 不就解决了么??

sendHTTPRequest(){
  if(window.reqstate) return;
 
  // 执行你的代码
 
  window.reqstate = true;

}

# function isDataExists() { 
#     if (xmlRequest.readyState == 4) { 
#         if (xmlRequest.status == 200) { window.reqstate = false;
   

我看了后面的回复 都在讲 怎么处理 服务端的数据 ... 我很不能理解

问题我感觉 就在一点  ajax 重复请求资源 就是 客户端向服务器的请求数 ++

这个和后端 有什么关系呢... 只要限定 客户端向服务器发送请求 不就可以了么???

加个状态位 完全可以抑止 HTTP请求啊

这个应给也可以，不过我没试，我用了同步 就差不多了 意思都是这样 ，让这一条请求结束之后再进行下一条、、

26 楼 奥义之舞 2011-05-30  

silence1214 写道

你这个问题应该是同步异步的问题，ajax默认是异步的，没有等到你这次的返回下一次又开始请求了，可能一下子得到2个的结果。你尝试下设置为同步。就是这次等到结果了，才触发下一次的轮训就好了

我同时用了同步，setTimeout 恩 好了 基本上没有这个问题了！

25 楼 vb2005xu 2011-05-30  

lz加个状态位 不就解决了么??

sendHTTPRequest(){
  if(window.reqstate) return;
 
  // 执行你的代码
 
  window.reqstate = true;

}

# function isDataExists() { 
#     if (xmlRequest.readyState == 4) { 
#         if (xmlRequest.status == 200) { window.reqstate = false;
   

我看了后面的回复 都在讲 怎么处理 服务端的数据 ... 我很不能理解

问题我感觉 就在一点  ajax 重复请求资源 就是 客户端向服务器的请求数 ++

这个和后端 有什么关系呢... 只要限定 客户端向服务器发送请求 不就可以了么???

加个状态位 完全可以抑止 HTTP请求啊

24 楼 silence1214 2011-05-29  

你这个问题应该是同步异步的问题，ajax默认是异步的，没有等到你这次的返回下一次又开始请求了，可能一下子得到2个的结果。你尝试下设置为同步。就是这次等到结果了，才触发下一次的轮训就好了

23 楼 evangelionxb 2011-05-26  

var t_ajax = setTimeout("sendHTTPRequest()",1000);
建议使用 setTimeout方法

url 加上一个 戳。

var d = new Date();
var url = "decodePass?id=" + id + "&sync=" + sync + "&time=" + d.getTime();

应该就可以了

22 楼 aiyanbo 2011-05-26  

将
xmlRequest.open("POST", url, true); 
改成
xmlRequest.open("POST",url+="&random="+Math.random(),true);
看看

21 楼 奥义之舞 2011-05-25  

hyj1254 写道

相当于连续发２次相同ｕｒｌ的请求，这也不会有什么问题，顶多你的回调函数调２次而已，难道会出现第二次调用的第一次的数据？你想让两次请求按次序前一个执行完毕再执行下一个可以设置open("post",url,false);

哦 是的 同步执行也行 呵呵

两次相同数据没什么大问题 我说不行主要是因为我需要根据这数据来绘制图，如果我不做处理的画，相同数据画出来的图是不好看的，一眼都能看出来这数据是错的 ，所以需要修改

20 楼 hyj1254 2011-05-25  

相当于连续发２次相同ｕｒｌ的请求，这也不会有什么问题，顶多你的回调函数调２次而已，难道会出现第二次调用的第一次的数据？你想让两次请求按次序前一个执行完毕再执行下一个可以设置open("post",url,false);

19 楼 奥义之舞 2011-05-25  

clue 写道

fixsmall 写道

setInterval  请求,意味着: 每隔一秒都会发起请求, 如果一个请求还没有完成, 可能有网络延时, setInterval 就会发生同时有多个请求挂着, 改为 setTimeout 请求

function poll_data(){
$.post(url, data, function(){  // 以jquery的 post函数为例
  setTimeout( function(){
     poll_data() ; // 在请求完成后,再等一秒, 调用自身  
  },  1000);
});
}

这个方案可以完美解决，这种定时ajax请求，一定要做成这种形式：上次请求结束后才开始计算间隔
否则就会出现前面说的问题，当网络状况不好时可能多个请求会被密集
特别是是当服务器性能不足时，这样子请求会加重负担，多个请求同时进行，同时等待完成。

是的 我也是怀疑是 网络延迟等各种状况造成的，  在一秒中他没有请求到所要请求的数据， 然后又进行下一个数据了，
这样的话ID就是一样的，没有增加，所以可能有几条数据都是相同的、、

18 楼 奥义之舞 2011-05-25  

nenyalanye_1 写道

你这个问题的本质好像就是缓存的问题 导致多次请求都一样 加个时间戳

呵呵 我修改一下 我在里面是对ID这个变量自增了的 所以说他每次请求的URL 是不一样的

17 楼 奥义之舞 2011-05-25  

cyh_it 写道

其实你看 我传的参数 ID 它本身就是自增的(是我没写明呵呵 ) 这样他每个都不一样的

但我看到你的代码是：

var id = 0;  
window.onload = function() {  
    id = document.getElementById("maxId").value;  
    .....
}

id的值只是每一次页面加载是得到后，后面就没有再改变啊。

是我的错 我的代码没贴完全 我只是解释这种AJAX重帧现象，忘了还有缓存的问题了， 这个我解释一下，不是缓存的问题 呵呵 我的ID 在下面是自增的了 不过是在回调函数里面的了

16 楼 skzr.org 2011-05-25  

奥义之舞 写道

cyh_it 写道

你可以使用在传参数时加一个随机数
{'a':Math.random()}
我在项目中是这样解决的
也可传new Date()

这个应该是解决页面缓存的问题的吧 呵呵
其实你看 我传的参数 ID 它本身就是自增的(是我没写明呵呵 ) 这样他每个都不一样的
而且我还设置了

xmlRequest1.setRequestHeader("If-Modified-Since","0");

这样页面本身就每次都请求的

从现象上看确实应该是“cyh_it”说的问题， 建议使用google浏览器chrome然后查看newwork具体情况，可以知道原因的。
建议：
1. 少量数据还是用http的get方式好些
2. 在每次url后加时间如：url += '&__time=' + (new Date()).getTime()，不需要设置任何其他东西了
3. 使用工具监控具体http请求，可以使用firebug或者chrome network监控或者wireshark等软件

15 楼 nenyalanye_1 2011-05-25  

你这个问题的本质好像就是缓存的问题 导致多次请求都一样 加个时间戳

14 楼 clue 2011-05-25  

fixsmall 写道

setInterval  请求,意味着: 每隔一秒都会发起请求, 如果一个请求还没有完成, 可能有网络延时, setInterval 就会发生同时有多个请求挂着, 改为 setTimeout 请求

function poll_data(){
$.post(url, data, function(){  // 以jquery的 post函数为例
  setTimeout( function(){
     poll_data() ; // 在请求完成后,再等一秒, 调用自身  
  },  1000);
});
}

这个方案可以完美解决，这种定时ajax请求，一定要做成这种形式：上次请求结束后才开始计算间隔
否则就会出现前面说的问题，当网络状况不好时可能多个请求会被密集
特别是是当服务器性能不足时，这样子请求会加重负担，多个请求同时进行，同时等待完成。

13 楼 cyh_it 2011-05-25  

其实你看 我传的参数 ID 它本身就是自增的(是我没写明呵呵 ) 这样他每个都不一样的

但我看到你的代码是：

var id = 0;  
window.onload = function() {  
    id = document.getElementById("maxId").value;  
    .....
}

id的值只是每一次页面加载是得到后，后面就没有再改变啊。

12 楼 奥义之舞 2011-05-25  

qingpu 写道

控制轮询获取的数据，把重复请求获取的数据剔除。不知道行不。

我也想到这个方法了，不过这个方法感觉有点弊病
1、我需要在页面中存储过去的数据
    2、这样还是避免不了相同ID请求的存在
    3、连接数还是增多了，虽然很少 ==同于2

呵呵

11 楼 奥义之舞 2011-05-25  

fixsmall 写道

setInterval  请求,意味着: 每隔一秒都会发起请求, 如果一个请求还没有完成, 可能有网络延时, setInterval 就会发生同时有多个请求挂着, 改为 setTimeout 请求

function poll_data(){
$.post(url, data, function(){  // 以jquery的 post函数为例
  setTimeout( function(){
     poll_data() ; // 在请求完成后,再等一秒, 调用自身  
  },  1000);
});
}

这个方法应该可行 等我长时间测试以下
不过setTimeout 是在到这一行是停留一秒在继续执行setTimeout方法吧？
:wink:
Thank you！

10 楼 奥义之舞 2011-05-25  

cyh_it 写道

你可以使用在传参数时加一个随机数
{'a':Math.random()}
我在项目中是这样解决的
也可传new Date()

这个应该是解决页面缓存的问题的吧 呵呵
其实你看 我传的参数 ID 它本身就是自增的(是我没写明呵呵 ) 这样他每个都不一样的
而且我还设置了

xmlRequest1.setRequestHeader("If-Modified-Since","0");

这样页面本身就每次都请求的