window.navigator.onLine

是你要找的，但这里要添加的东西很少，首先，如果它是你想要持续检查的应用程序上的一些东西(比如看看用户是否突然脱机，在这种情况下大多数时候是正确的，那么你也需要监听变化)，为此你添加事件监听器到窗口来检测任何变化，为了检查用户是否脱机，你可以这样做:

window.addEventListener("offline", 
  ()=> console.log("No Internet")
);

检查是否在线:

window.addEventListener("online", 
  ()=> console.log("Connected Internet")
);

如何发送一个不透明的http请求到google.com与无cors?

    fetch('https://google.com', {
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'no-cors',
    }).then((result) => {
        console.log(result)
    }).catch(e => {
        console.error(e)
    })

设置no-cors的原因是，即使在我的pc上取消网络连接时，我也收到了cors错误。所以不管有没有网络连接，我都被封锁了。添加no-cors使请求不透明，这显然似乎绕过cors，并允许我只是简单地检查我是否可以连接到谷歌。

供参考:我在这里使用fetch进行http请求。 https://www.npmjs.com/package/fetch

您可以使用$.ajax()的错误回调，它在请求失败时触发。如果textStatus等于字符串"timeout"，这可能意味着连接中断:

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  this; // the options for this ajax request
}

医生说:

错误:一个函数被调用，如果请求 失败。函数被传递了3个 参数:XMLHttpRequest对象 描述错误类型的字符串 这是可选的 异常对象，如果发生。 第二个可能的值 参数(除null外)为"timeout"， "error"， "notmodified"和 “parsererror”。这是一个Ajax事件

例如:

 $.ajax({
   type: "GET",
   url: "keepalive.php",
   success: function(msg){
     alert("Connection active!")
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
       if(textStatus == 'timeout') {
           alert('Connection seems dead!');
       }
   }
 });

对于两种不同的情况，有两个答案:-

If you are using JavaScript on a website(i.e; or any front-end part) The simplest way to do it is: <h2>The Navigator Object</h2> <p>The onLine property returns true if the browser is online:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "navigator.onLine is " + navigator.onLine; </script> But if you're using js on server side(i.e; node etc.), You can determine that the connection is lost by making failed XHR requests. The standard approach is to retry the request a few times. If it doesn't go through, alert the user to check the connection, and fail gracefully.

请求头错误

$.ajax({
    url: /your_url,
    type: "POST or GET",
    data: your_data,
    success: function(result){
      //do stuff
    },
    error: function(xhr, status, error) {

      //detect if user is online and avoid the use of async
        $.ajax({
            type: "HEAD",
            url: document.location.pathname,
            error: function() { 
              //user is offline, do stuff
              console.log("you are offline"); 
              }
         });
    }   
});

我不得不为一个与学校有很多合作的客户制作一个web应用程序(基于ajax)，这些学校的互联网连接经常不好，我使用这个简单的功能来检测是否有连接，工作得非常好!

我使用CodeIgniter和Jquery:

function checkOnline() {
    setTimeout("doOnlineCheck()", 20000);
}

function doOnlineCheck() {
    //if the server can be reached it returns 1, other wise it times out
    var submitURL = $("#base_path").val() + "index.php/menu/online";

    $.ajax({
        url : submitURL,
        type : "post",
        dataType : "msg",
        timeout : 5000,
        success : function(msg) {
            if(msg==1) {
                $("#online").addClass("online");
                $("#online").removeClass("offline");
            } else {
                $("#online").addClass("offline");
                $("#online").removeClass("online");
            }
            checkOnline();
        },
        error : function() {
            $("#online").addClass("offline");
            $("#online").removeClass("online");
            checkOnline();
        }
    });
}