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

Question

我正在使用纯JavaScript (No jQuery和no others...)我正在编写一些代码来发出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
    }
}

这段代码似乎可以为我工作，但我没有看到任何关于这方面的文档，哪里也没有！你认为这是一个可靠的解决方案吗？

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>

​