超时处置-Ajax之五

超时处理---Ajax之五

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

?

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

?

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

?

?

源码见附件

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

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

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，这是最关键的。

试下就知...



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


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;}, 超时时间);

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就是为了刷分的。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就是为了刷分的。


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

查看更多 下一篇