根据MySQL数据库值动态更改网站内容

我想根据值动态更改我的网站。我从我的MySQL数据库中检索数据，并希望更改尽可能接近实时。我有一些代码可以在某种程度上做我想做的事情，但是值的更新似乎失败了，起初它可以工作，然后在几次调用之后，它似乎只是在两个值之间随机切换。根据MySQL数据库值动态更改网站内容

我有三个php页面，一个从数据库（database.php）中获取值，另一个根据数据库值（response1.php和response2.php）生成响应。我不认为这些页面是问题的一部分，因为我已经检查过它们返回值并返回我想要的值。项目的第二部分（以及可能失败的地方）是我的主页面（如下）。我不确定我是否选择了最好的技术来解决我的问题，或者是否有更好的方法来解决问题。

<html> 
<head> 
    <script type="text/javascript"> 
     var databaseanswer, xmlhttp; 

     function databasecheck() { 
      xmlhttp = new XMLHttpRequest(); 
      xmlhttp.open("GET", "database.php", true); 
      xmlhttp.onreadystatechange = function() { 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
        databaseanswer = xmlhttp.responseText; 
        document.getElementById("database").innerHTML = xmlhttp.responseText; 
       } 
      }; 
      xmlhttp.send(); 
     } 

     function response() { 
      if (databaseanswer == "No Tag") { 
       xmlhttp = new XMLHttpRequest(); 
       xmlhttp.open("GET", "response1.php", true); 
       xmlhttp.onreadystatechange = function() { 
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
         document.getElementById("response").innerHTML = xmlhttp.responseText; 
        } 
       }; 
       xmlhttp.send(); 
      } 
      else { 
       xmlhttp = new XMLHttpRequest(); 
       xmlhttp.open("GET", "response2.php", true); 
       xmlhttp.onreadystatechange = function() { 
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
         document.getElementById("response").innerHTML = xmlhttp.responseText; 
        } 
       }; 
       xmlhttp.send(); 
      } 
     } 

     setInterval(databasecheck, 1800); 
     setInterval(response, 2000); 

    </script> 
</head> 
<body> 
    <p> this is a test site </p> 
    <p> response from server: </p> 
    <div id="response"> 
    </div> 
    <p> answer from database: </p> 
    <div id="database"> 
    </div> 
</body> 
</html>

好了，这是我的编辑代码：

<html> 
<head> 
<script> 

function database(){ 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.open("GET","responsedatabase.php",false); 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     document.getElementById("database").innerHTML=xmlhttp.responseText; 
     } 
     } 
    xmlhttp.send(); 
} 

setInterval(database,1000); 

</script> 
</head> 
<body> 
<p>answer from database: </p><div id="database"></div> 
</body> 
</html>

来源

2013-05-18 nerq

你应该研究一下'jQuery's'' AJAX'的功能：http://api.jquery.com/jQuery.ajax/ –

'if（databaseanswer ==“No Tag”）{'没有任何意义，或任何 – samayo

基本上“无标签”是我的数据库中的默认值。 – nerq

的问题是，您要发送多个异步请求，这些请求都不会被序列化。请记住，您无法控制请求的响应时间。此外，随着时间的推移，response与databasecheck调用之间的时间量不断增加。例如。最初，databasecheck将在1.8秒后执行，response将在2秒后执行;差别是200毫秒。第二次，databasecheck将在3.6秒后执行，response将在4秒后执行;差别是400毫秒。

除此之外，请求的响应时间不在您的控制之下。您提出的第一个要求不一定是第一个要完成的要求。也就是说，即使您将调用序列化为databasecheck和response函数，如果您不序列化XHR调用，您将获得可见的随机结果。也就是说，假设databasecheck返回x，并且您发送了response1.php的请求;当它仍在进行中时，假设databasecheck的第二个请求返回y，并且启动了另一个response2.php请求。现在取决于response1.php和response2.php的请求完成的顺序，您可能会看到正确的或不正确的结果。而且，在发生这种情况时，可能会完成database.php的另一个请求，您将再次看到一些不同的结果。这是结果表现出随机性的原因。

你需要做的是序列化到databasecheck的调用和response功能。也就是说，只有在对database.php的请求完成后才启动对response的呼叫。现在，您需要确保请求之间不存在竞争条件。这有点麻烦，你可能会失去实时行为。

更好的方法是将调用结果与database.php以及对response1.php和response2.php的调用结合起来。也就是说，将逻辑移到服务器端。将代码放入response1.php和response2.php中返回值的函数中。假设这些函数名为response1和response2。在你的database.php。根据数据库值调用这些函数中的任何一个。将结果与数据库值一起放入关联数组中，并将响应作为JSON格式的字符串返回。这样，您将减少一个请求，并且没有同步问题。

更新

后，你需要做以下的在更新的代码：

var requestInProgress = false; 
function database() { 
    if(requestInProgress) { 
     return; 
    } 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.open("GET","responsedatabase.php",false); 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState == 4) { 
      requestInProgress = false; 
      if(xmlhttp.status==200) { 
       document.getElementById("database").innerHTML=xmlhttp.responseText; 
      } 
     } 
    } 
    requestInProgress = true; 
    xmlhttp.send(); 
}

你也很可能降低setInterval时间，以确保有之间从来不是延迟前一个请求的结束和新请求的开始。

来源

2013-05-18 10:53:36

好的，所以我已将我的response1.php和response2.php结合到我的database.php中（从而在该文件中进行响应选择）。然后我为database.php做了一个XMLHttpRequest，但是这给我带来了同样的同步问题。 – nerq

发布您的新JS代码。不应该有更多的竞争条件，因为应该只有一个函数调用并且只有一个请求。此外，请勿在前一个请求正在进行时发出新请求。 –

我已将编辑的代码添加到我的原始问题中。谢谢。 – nerq

根据MySQL数据库值动态更改网站内容

回答

相关问题