Question

我正在尝试运行Javascript函数来检查互联网连接状态。如果用户连接到互联网，那么我不希望屏幕上发生任何事情。但如果连接丢失，那么我想显示一个div。

（此div将占用整个屏幕（这将阻止用户在后台与页面交互），直到重新建立连接。重新建立连接后，div应自动消失并且用户应该能够再次与屏幕上的按钮进行交互。）

为了实现这一点，我有一个Javascript函数来检查每秒运行的连接。它通过使用AJAX帖子到PHP文件，PHP文件echos“1”回到Javascript，如果函数接收到这个“1”，然后它知道连接是活动的，如果它没有收到它然后它知道连接断了，它应该显示div。

div被称为“openOfflineDIV”。

这是我的Javascript：

   function checkConnection() {

    if($.ajax({
         url: 'php_scripts/checkconnection.php',
        type: "POST",
       async: false
       }).responseText == "1"){
           console.log("Connection active");       
         openOfflineDIV.style.visibility = 'hidden';
                               }
       else{
           console.log("Connection lost");
          openOfflineDIV.style.visibility = 'visible'; 
                                       }
       };

我的PHP文件：

<?php echo '1'; ?>

我的HTML页面的相关部分：

//Head content (file containing “checkConnection();” is included here)
<body>

<script>
 setInterval(function(){
      checkConnection();
    },1000);
</script>

//Body content here

//DIV to show when connectivity is lost:
<div id="openOfflineDIV" class="modalOfflineDIVDialog">
<div id="mfs">
<div id="wrapper">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle" class="alerttextbig">You have been disconnected from the internet!</td>
  </tr>
</table>
</div>
</div>
</div>
</body>

当我加载页面时，我看到控制台每秒写入“连接活动”。但是我也在控制台中收到以下错误：

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助http://xhr.spec.whatwg.org/

在调查之后，似乎是因为我在我的Javascript中有async = false，但是当我删除它时，它仍然不起作用。

我在这里看了答案：How do I return the response from an asynchronous call? 我已经尝试通过将代码更改为此来实现最佳答案：

function checkConnection(result) {

    if(result == "1"){
           console.log("Connection active");
         openOfflineDIV.style.visibility = 'hidden';
       }
       else{
           console.log("Connection lost");
          openOfflineDIV.style.visibility = 'visible';    
                                       }
       }
       foo(checkConnection);

    function foo(callback){
    $.ajax({
         url: 'php_scripts/checkconnection.php',
        type: "POST",

      success: callback
    });
       }

这仍然不起作用，它一直在控制台中写“连接丢失”，这让我觉得它可能不等待从PHP文件返回“1”。

我真的很感激任何人都可以给我的任何帮助，我已经尝试实现我在这里找到的答案，但到目前为止都没有成功，谢谢你提前！

更新

这是我目前使用@ andreas的答案的代码：

   function checkConnection() {
    $.ajax({
        url: 'php_scripts/checkconnection.php',
        type: "POST",
        success: function() {
            $("#openOfflineDIV").hide();
            console.log("connected"); },
        error: function() {
            $("#openOfflineDIV").show();
            console.log("disconnected"); }
    }).complete(function() {
        setTimeout(checkConnection, 1000);
    });
}

$(document).ready(checkConnection);

出于某种原因，当连接丢失时，div不会出现，但是＆＃34;断开＆＃34;确实每秒出现在控制台中，并且＆＃34;连接＆＃34;连接处于活动状态时出现。

更新2

这是实现相同结果的另一种尝试：

   function checkConnection() {
    $.ajax({
        url: 'php_scripts/checkconnection.php',
        type: "POST",
        success: function() {

    document.getElementById('openOfflineDIV').style.display = 'none';
    console.log("connected"); },

        error: function() {

    document.getElementById('openOfflineDIV').style.display = 'block';
//I have also tried: document.getElementById('openOfflineDIV').style.display = 'inline';
    console.log("disconnected"); }

    }).complete(function() {
        setTimeout(checkConnection, 1000);
    });
}

此方法只有一半工作，这意味着如果我导航到我的网页地址并添加了/#openOfflineDIV，那么页面将加载显示在屏幕上的div，然后在第二次一次后消失该函数开始运行（这意味着该函数在实现连接激活后成功关闭div）。

但该功能的第二部分不起作用，当互联网连接丢失时，它不显示div。我已经尝试了inline和block方法，但两种方法都没有。我非常困惑，因为该函数肯定能够成功隐藏div（我认为这意味着我定义div的语法是正确的）。

我有什么东西在这里失踪吗？可能我需要在页面上添加一个额外的脚本或类似的东西才能使其工作？

Answer 1

这将是您实现离线/离线功能的骨架结构

function checkConnection() {
    $.ajax({
        url: 'php_scripts/checkconnection.php',
        type: "POST",
        success: function() { $("#openOfflineDIV").hide(); },
        error: function() { $("#openOfflineDIV").show(); }
    }).complete(function () {    // this starts the next connection check in 1 second
        setTimeout(checkConnection, 1000);
    });
});

$(document).ready(checkConnection);   // trigger the inital connection check on DOMReady

我用它做了一个小fiddle 只需关闭你的互联网连接，状态应该相应更新（由于同样的原因，jsfiddle的弹出窗口应该出现^^）

如何处理同步ajax调用的结果并根据结果值显示或隐藏div

1 个答案:

如何处理同步aj​​ax调用的结果并根据结果值显示或隐藏div

1 个答案:

如何处理同步ajax调用的结果并根据结果值显示或隐藏div