超时处理---Ajax之五

上一篇只是检查是否超时，超时后却不做任何处理。这里如果超时，会给failure第二个参数msg赋值为“request timeout”。

 

这样使用者能清楚的知道一次HTTP请求的细节。实现细节较为诡异，得慢慢体会。这里timeout的效果和JQuery，Ext是一样的。如下

 

Ajax.text('../servlet/Ajax',{
	timeout : 2000,
	success : function(result){},
	failure : function(xhr,msg){
		alert(msg);
	}
});

 

 

源码见附件

评论

12 楼 yangguo 2010-12-22  

kimmking 写道

rainsilence 写道

仔细看了下jquery的超时处理
其实很简单，并没有连发几个帖子的必要

假设定义了一个ontimeout句柄

var ontimeout = function() {.....}

在framework的某个地方定义了触发事件函数dispatchEvent

然后XMLHttpRequest定义为
var xmlHttp = .....

最后超时处理

setTimeout(function() {
    // 调用timeout句柄
    dispatchEvent("timeout");

    // 消除浏览器差异
    var onreadystatechange = xmlHttp.onreadystatechange;
    xmlHttp.onreadystatechange = function() {};
    try {
        var oldAbort = xmlHttp.abort();
        xmlHttp.abort = function() {
            oldAbort.call(xmlHttp);
            xmlHttp.readyState = 0;
        };
    } catch(e) {}
    xmlHttp.abort();

    // 如果xmlHttp需要第二次提交的话，需要以下这句，否则不需要
    xmlHttp.onreadystatechange = onreadystatechange;

}, 超时时间);

你说对了。
lz就是为了刷分的。

谈到刷分，好像没人能超越你。

11 楼 zhouyrt 2010-09-24  

wangweiwei358 写道

楼主，问你个问题哦。
请问下，isTimeout这个变量如果去掉呢？对运行有影响吗？
谢谢你能回复。

没有影响，它可选参数。

10 楼 wangweiwei358 2010-09-24  

楼主，问你个问题哦。
请问下，isTimeout这个变量如果去掉呢？对运行有影响吗？
谢谢你能回复。

9 楼 kimmking 2010-08-22  

rainsilence 写道

仔细看了下jquery的超时处理
其实很简单，并没有连发几个帖子的必要

假设定义了一个ontimeout句柄

var ontimeout = function() {.....}

在framework的某个地方定义了触发事件函数dispatchEvent

然后XMLHttpRequest定义为
var xmlHttp = .....

最后超时处理

setTimeout(function() {
    // 调用timeout句柄
    dispatchEvent("timeout");

    // 消除浏览器差异
    var onreadystatechange = xmlHttp.onreadystatechange;
    xmlHttp.onreadystatechange = function() {};
    try {
        var oldAbort = xmlHttp.abort();
        xmlHttp.abort = function() {
            oldAbort.call(xmlHttp);
            xmlHttp.readyState = 0;
        };
    } catch(e) {}
    xmlHttp.abort();

    // 如果xmlHttp需要第二次提交的话，需要以下这句，否则不需要
    xmlHttp.onreadystatechange = onreadystatechange;

}, 超时时间);

你说对了。
lz就是为了刷分的。

8 楼 rainsilence 2010-08-22  

仔细看了下jquery的超时处理
其实很简单，并没有连发几个帖子的必要

假设定义了一个ontimeout句柄

var ontimeout = function() {.....}

在framework的某个地方定义了触发事件函数dispatchEvent

然后XMLHttpRequest定义为
var xmlHttp = .....

最后超时处理

setTimeout(function() {
    // 调用timeout句柄
    dispatchEvent("timeout");

    // 消除浏览器差异
    var onreadystatechange = xmlHttp.onreadystatechange;
    xmlHttp.onreadystatechange = function() {};
    try {
        var oldAbort = xmlHttp.abort();
        xmlHttp.abort = function() {
            oldAbort.call(xmlHttp);
            xmlHttp.readyState = 0;
        };
    } catch(e) {}
    xmlHttp.abort();

    // 如果xmlHttp需要第二次提交的话，需要以下这句，否则不需要
    xmlHttp.onreadystatechange = onreadystatechange;

}, 超时时间);

7 楼 rainsilence 2010-08-21  

虽然,abort方法执行后会执行onreadystatechange句柄，但是由于浏览器不同，执行次数，readyState，都会不同

因此，直接对onreadystatechange句柄进行控制是很危险的。

lz的代码因为没有提供ontimeout句柄，所以代码勉强能用

6 楼 rainsilence 2010-08-21  

FireFox 下，调用abort,在onreadystatechange中，readyState == 4 会执行两遍。。。而httpstatus永远为0。

5 楼 yudylaw 2010-08-20  

Ajax 超时 IE 支持。FireFox 不支持吧。

4 楼 hardPass 2010-08-19  

也不对，上面的情况在ie下运行的结果。
在firefox下，没有报timeout
在Chrom下，运行也稍微有不同

3 楼 hardPass 2010-08-19  

特地测试了下，果然执行啦！
isTimeout = true;是在abort()后执行的。
一直以为abort()后，XMLHttpRequest.readyState 会被复位为0；
现在看来，其中还做了很多事情啊。

		if(timeout>0){
			timer = setTimeout(function(){
				document.write("\n<br>before abort " + xhr.readyState + isTimeout);
				xhr.abort();
				document.write("\n<br>after abort " + xhr.readyState + isTimeout);
				isTimeout = true;
			},timeout);
		}
		xhr.onreadystatechange = function(){
			document.write("\n<br>onreadystatechange " + xhr.readyState + isTimeout);
			if (xhr.readyState == 4 && !isTimeout){
				_onStateChange(xhr, type, success, failure);
				clearTimeout(timer);
			}else{}
		};


before abort 1false 
onreadystatechange 4false 
after abort 0false 

关键是XMLHttpRequest.abort()里干了些啥事情？

根据上面打印的东西，差不多猜测 XMLHttpRequest.abort()里干了这些内容：
1、先将XMLHttpRequest.readyState 直接置为4
2、触发XMLHttpRequest.onreadystatechange 事件
3、最好才将XMLHttpRequest.readyState 置为0

2 楼 zhouyrt 2010-08-19  

hardPass 写道

一口气跟读下来，虽然没有仔细测试代码，但也算是相当认真看了。

	xhr.onreadystatechange = function(){
			if (xhr.readyState == 4 && !isTimeout){
				_onStateChange(xhr, type, success, failure);
				clearTimeout(timer);
			}else{}
		};

这段代码，从上一帖看就觉得有问题。
这一帖还是没变。
只要是超时了，就不会执行_onStateChange，也就不会执行超时的处理啦

hardPass，谢谢您的提醒。看的很仔细。

这段代码没有问题的，你可以测试下超时的情况。这段代码比较容易误解。博客中没有写出来实现细节，因为太诡异了，初看起来不会执行，实际却执行了。

这篇与上篇的区别是超时后调用了xhr的abort方法，调用abort后status为0，在为0的判断中调用failure，这是最关键的。

试下就知...

1 楼 hardPass 2010-08-19  

一口气跟读下来，虽然没有仔细测试代码，但也算是相当认真看了。

	xhr.onreadystatechange = function(){
			if (xhr.readyState == 4 && !isTimeout){
				_onStateChange(xhr, type, success, failure);
				clearTimeout(timer);
			}else{}
		};

这段代码，从上一帖看就觉得有问题。
这一帖还是没变。
只要是超时了，就不会执行_onStateChange，也就不会执行超时的处理啦