我制作了一个 CMS，它在操作过程中会提取大量数据。 CMS 是用 PHP、MySQL、jQuery、Bootstrap 和 AJAX 制作的。
问题是，如果您失去互联网连接，可能会导致显示和滚动出现问题。
如果有一种很好的方法来显示错误并在没有互联网连接时阻止网站上的所有功能，我会很高兴。建立连接后，它应该是网站上允许的所有功能。
谢谢！
（对不起，我的英语不好。）
【问题讨论】：
标签： javascript php jquery mysql ajax
如果您已经在使用 jQuery，您可以创建一个简单的 ajax 调用到您的服务器，如果它在几秒钟内失败，则您的服务器或客户端的互联网连接已关闭。
类似这样的：
setInterval(function() {
$.ajax({
url: "https://cms.example.com/ping",
})
.fail(function( data ) {
alert('Connection lost?');
// remember do to something smart which shows the error just once
// instead of every five seconds. Increasing the interval every
// time it fails seems a good start.
});
}, 5*1000);
【讨论】：
setInterval，而是setTimeout。此外，您可能会遇到的潜在问题是，如果请求占用的时间超过 5 秒（是的，在大型应用程序上很容易发生这种情况！例如，当服务器非常繁忙且无法在您限定的时间范围内响应时.) 那么你的alert 会无缘无故地启动。
如果您使用的是 jQuery，您只需挂上 global error handler 并在发生错误时锁定您的应用程序。锁定屏幕可能只是要求重试。
$( document ).ajaxError(function() {
// lock your UI here
});
此外，一旦 UI 被锁定，您可以执行一个函数，以 Exponential Backoff 方式 ping 您的服务器并在网络恢复时自动解锁应用程序。
使用 jQuery 的 blockUI 插件可以轻松锁定您的应用程序。
(function ($) {
var locked = false;
var errorRetryCount = 0;
var blockUiOptions = { message: "Oops! Could not reach the server!" };
// change this function to adjust the exponential backoff delay
function backoff(n) {
return Math.pow(2, n) * 100;
}
$(function () {
$( document ).ajaxError(function () {
var req = this;
errorRetryCount += 1;
if (!locked) {
locked = true;
$.blockUI(blockUiOptions);
}
// retry to send the request...
setTimeout(function () { $.ajax(req); }, backoff(errorRetryCount));
}).ajaxSuccess(function () {
locked && $.unblockUI();
locked = false;
errorRetryCount = 0;
});
});
})(jQuery);
注意：您可能不想在网络故障时无限期地重试您的请求，并且希望在某个时候退出重试。由于这超出了此问题的范围，因此我将保持原样。不过，您可以看看this related question，它可能会帮助您解决这部分问题。
【讨论】：
编辑：重新阅读您的问题并误解了我的第一次通过，因此这对于持续监控无效......但无论如何我都会把它留在这里，因为它可能对其他人有用。
我建议加载一个小的 js 文件，将一个类添加到页面的元素中，然后检查该类是否在事后应用...假设您使用的是 jQuery
远程服务器上的文件在 jQuery 之后通过脚本标签加载到您的页面中
$('html').addClass('connected');
本地代码
if($('html').hasClass('connected')) {
// connected
} else {
// not connected
}
【讨论】：
【讨论】：