檢測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>