检测Ajax请求无连接状态和状态

Question

我用纯JavaScript（无jQuery和其他人不...）工作，我正在写一些代码，使一个AJAX请求。我注意到，当网络连接失败，在Chrome，Firefox和IE那些在xmlhttp.onreadystatechange:

xmlhttp.readyState=4 
xmlhttp.status=0 

的值，因为我想处理网络连接问题，这是一个很好的办法做到这一点？

xmlhttp.onreadystatechange=function(){ 

    if(xmlhttp.readyState==4 && xmlhttp.status==0){//No internet connection 

     //code to handle network error 
    } 
} 

此代码似乎为我工作，但我没有看到任何文件abuot这个，无处！你认为这是一个可靠的解决方案吗？

Answer 1

您可以使用online/offline events：

window.addEventListener('load', function() { 
 
    var status = document.getElementById("status"); 
 

 
    function updateOnlineStatus(event) { 
 
    var condition = navigator.onLine ? "online" : "offline"; 
 

 
    status.className = condition; 
 
    status.innerHTML = condition.toUpperCase(); 
 

 
    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); 
 
    } 
 

 
    window.addEventListener('online', updateOnlineStatus); 
 
    window.addEventListener('offline', updateOnlineStatus); 
 
});

#status { 
 
    position : fixed; 
 
    width: 100%; 
 
    font : bold 1em sans-serif; 
 
    color: #FFF: 
 
    padding : 0.5em 
 
} 
 

 
#log { 
 
    padding: 2.5em 0.5em 0.5em; 
 
    font: 1em sans-serif; 
 
} 
 

 
.online { 
 
    background: green; 
 
} 
 

 
.offline { 
 
    background: red; 
 
}

<div id="status"></div> 
 
<div id="log"></div> 
 
<p>This is a test</p>