您可以通过发出失败的 XHR 请求来确定连接丢失。

标准方法是多次重试请求。如果它没有通过，提醒用户检查连接，并优雅地失败。

旁注：将整个应用程序置于“离线”状态可能会导致处理状态的许多容易出错的工作......无线连接可能会来来去去等。所以你最好的选择可能是优雅地失败，保留数据，并提醒用户.. 允许他们最终解决连接问题（如果有的话），并继续使用你的应用程序，并有一定的宽容度。

旁注：您可以检查像谷歌这样的可靠网站的连接性，但这可能并不完全有用，因为只是尝试提出您自己的请求，因为虽然谷歌可能可用，但您自己的应用程序可能不可用，而且您仍然会必须处理您自己的连接问题。尝试向谷歌发送 ping 是确认互联网连接本身已关闭的好方法，因此如果该信息对您有用，那么麻烦就值得了。

旁注：发送 Ping的方式与您发出任何类型的双向 ajax 请求的方式相同，但在这种情况下，向 google 发送 ping 会带来一些挑战。首先，我们会遇到与进行 Ajax 通信时通常遇到的相同的跨域问题。一种选择是设置服务器端代理，我们实际上在其中使用pinggoogle（或任何站点），并将 ping 的结果返回给应用程序。这是一个catch-22因为如果互联网连接确实是问题，我们将无法访问服务器，如果连接问题仅在我们自己的域上，我们将无法区分。可以尝试其他跨域技术，例如，在指向 google.com 的页面中嵌入 iframe，然后轮询 iframe 的成功/失败（检查内容等）。嵌入图像可能并不能真正告诉我们任何信息，因为我们需要来自通信机制的有用响应，以便对正在发生的事情得出一个好的结论。因此，再次确定整个互联网连接的状态可能比它的value更麻烦。您必须为您的特定应用权衡这些选项。

几乎所有的主流浏览器都支持的window.navigator.onLine特性，以及相应online和offline窗口事件。运行以下代码片段进行测试：

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

<button id="statusCheck">Click to check the <tt>window.navigator.onLine</tt> property</button><br /><br />
Check the console below for results:

尝试将您的系统或浏览器设置为离线/在线模式，并检查日志或window.navigator.onLine属性的值更改。

但是请注意Mozilla 文档中的引用：

在 Chrome 和 Safari 中，如果浏览器无法连接到局域网（LAN）或路由器，则为离线；所有其他条件返回true。因此，尽管你可以假设的是，浏览器处于脱机状态，当它返回一个false值，你不能假设true值必然意味着浏览器可以访问互联网。您可能会得到误报，例如在计算机运行虚拟化软件的情况下，该软件具有始终“连接”的虚拟以太网适配器。因此，如果你真的想确定浏览器的在线状态，你应该开发额外的检查手段。

在 Firefox 和 Internet Explorer 中，将浏览器切换到离线模式会发送一个false值。在 Firefox 41 之前，所有其他条件都返回一个true值；从 Firefox 41 开始，在 OS X 和 Windows 上，该值将遵循实际的网络连接。

（重点是我自己）

这意味着，如果window.navigator.onLine是false（或者您收到一个offline事件），则保证您没有 Internet 连接。

true但是，如果是（或者您收到online事件），则充其量仅意味着系统已连接到某个网络。例如，这并不意味着您可以访问 Internet。要检查这一点，您仍然需要使用其他答案中描述的解决方案之一。

_{我最初打算将此作为对Grant Wagner 答案的更新发布，但似乎编辑太多了，尤其是考虑到 2014 年的更新已经不是他的。}

IE 8 将支持window.navigator.onLine属性。

但这当然对其他浏览器或操作系统没有帮助。鉴于了解 Ajax 应用程序中在线/离线状态的重要性，我预测其他浏览器供应商也会决定提供该属性。

在此之前，XHR 或Image()or<img>请求都可以提供接近您想要的功能的东西。

更新 (2014/11/16)

现在主流浏览器都支持这个属性，但你的结果会有所不同。

引自Mozilla 文档：

在 Chrome 和 Safari 中，如果浏览器无法连接到局域网（LAN）或路由器，则为离线；所有其他条件返回true。因此，虽然您可以假设浏览器在返回false值时处于脱机状态，但您不能假设真正的值一定意味着浏览器可以访问互联网。您可能会得到误报，例如在计算机运行虚拟化软件的情况下，该软件具有始终“连接”的虚拟以太网适配器。因此，如果你真的想确定浏览器的在线状态，你应该开发额外的检查手段。

在 Firefox 和 Internet Explorer 中，将浏览器切换到离线模式会发送一个false值。所有其他条件都返回一个true值。

 if(navigator.onLine){
  alert('online');
 } else {
  alert('offline');
 }

有多种方法可以做到这一点：

• AJAX 请求到您自己的网站。如果该请求失败，则很有可能是连接有问题。在JQuery的文件有一个部分处理失败的AJAX请求。执行此操作时请注意同源策略，这可能会阻止您访问域外的站点。
• 你可以把 an 放在 anonerror中img，比如<img src="http://www.example.com/singlepixel.gif" onerror="alert('Connection dead');" />。

如果移动/重命名源图像，此方法也可能失败，并且通常是 ajax 选项的次等选择。

所以有几种不同的方法来尝试和检测这个，没有一个完美的，但是在没有跳出浏览器沙箱并直接访问用户网络连接状态的能力的情况下，它们似乎是最好的选择。