Javascript 从浏览器检查连接状态的最快方法

我正在使用web应用程序，我经常从它向服务器发送数据。如果应用程序没有internet连接，则应禁用发送数据的选项。如果您在线，通过浏览器进行检查的最快方式是什么？我使用过

navigator.onLine

，但它不可靠，因为不同的浏览器对它的解释不同。我的另一个解决方案是在服务器上放置一些普通文件，并在每次发送之前尝试访问它。代码如下所示：

function serverReachable() {
  var x = new XMLHttpRequest (),
  s;
  x.open(
    "HEAD",
    'http://servername/client/keepalive.txt',
    false
  );
  try {
    x.send();
    s = x.status;
    return ( s >= 200 && s < 300 || s === 304 );
  } catch (e) {
    return false;
  }
}

函数serverReachable（）{
var x=新的XMLHttpRequest（），
s
x、 打开(
“头”，
'http://servername/client/keepalive.txt',
假的
);
试一试{
x、 send（）；
s=x.status；
返回值（s>=200&&s<300 | | s==304）；
}捕获（e）{
返回false；
}
}

函数serverReachable（）可以完成这项工作，但是有没有更快的方法来完成这项工作（我说的更快是指时间而不是代码数量更快）？

使用

navigator.onLine

---

要检查是否有internet连接，它应该返回True或False。

检查服务器是否连接的最快方法是

尝试访问服务器上的任何文件，如任何图像

函数doesConnectionExist（）{
var xhr=new XMLHttpRequest（）；
var file=“img/a.png”；//项目中的图像路径
var randomNum=Math.round（Math.random（）*10000）；
xhr.open（'HEAD'，file+“？rand=“+randomNum，false）；
试一试{
xhr.send（空）；
如果（xhr.status>=200&&xhr.status<304）{
返回true；
}否则{
返回false；
}
}捕获（e）{
返回false；
}
}

---

注意：为了加快通话速度，您尝试下载的图像（

a.png

）应该非常轻；在KBs中。

我通常尝试创建一个

图像（）

，然后侦听

onerror

/

onload

事件

function isOnline(cb){
    var img = new Image();
    img.onerror = function() {
        cb(false)
    }
    img.onload = function() {
        cb(true)
    }
    img.src = "http://example.com/some_image.jpg?t=" + (+new Date);
}
isOnline(function(res){
    if (res) {
        // yup!
    } else {
        // nope
    }
});

但是，这很可能是隐藏的，与发出XHR请求完全相同。你得拉小提琴，看看什么最适合你

---

编辑：添加时间戳以强制非缓存版本。

navigator.onLine通过浏览器有不同的解释。例如，Firefox和IE只有在我们将其置于脱机模式时才会返回false，而不管我们是否连接到网络。是的，你是对的，我建议你对发送Ajax到服务器进行相同的检查，但不要使用自己的服务器，使用一些更快的东西，如用于jQuery的CDN服务器或S3/CloudFront，这样你可以获得更快的响应，如果服务器关闭了，也不用担心。可能应该使用缓存断路器，因为这是一个get请求。只需添加：如果你真的想节省字节，只提供尽可能小的映像。我能用MS Paint获得的最小有效图像是一个1x1的黑色正方形，另存为24位BMP，重58字节。@onisuka，以上方法与浏览器无关！这对他们中的任何一个都有效

function isOnline(cb){
    var img = new Image();
    img.onerror = function() {
        cb(false)
    }
    img.onload = function() {
        cb(true)
    }
    img.src = "http://example.com/some_image.jpg?t=" + (+new Date);
}
isOnline(function(res){
    if (res) {
        // yup!
    } else {
        // nope
    }
});