title: Changing website content dynamically depending on MySQL database value
body: <p>I want to change my website dynamically based on a value. I retrive data from my MySQL database and want the change to be as close to real-time as possible. I have some code that does what I want to some extent, but the updating of the values seem to fail, at first it works and then after a few calls it seems to just switch at random between the two values. </p>
  
  <p>I have three php pages, one that retrives a value from the database (database.php) and two that generate a response based on the database value(response1.php and response2.php). I do not think that these pages are part of the problem, since I have checked that they return values and they return what I want. The second part of the project (and where it probably fails) is my main html page (below). I am unsure if I have chosen the best technique to solve my problem or if there is a better way to do it.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript"&gt;
          var databaseanswer, xmlhttp;
  
          function databasecheck() {
              xmlhttp = new XMLHttpRequest();
              xmlhttp.open("GET", "database.php", true);
              xmlhttp.onreadystatechange = function() {
                  if (xmlhttp.readyState == 4 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; xmlhttp.status == 200) {
                          document.getElementById("response").innerHTML = xmlhttp.responseText;
                      }
                  };
                  xmlhttp.send();
              }
          }
  
          setInterval(databasecheck, 1800);
          setInterval(response, 2000);
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt; this is a test site &lt;/p&gt;
      &lt;p&gt; response from server: &lt;/p&gt;
      &lt;div id="response"&gt;
      &lt;/div&gt;
      &lt;p&gt; answer from database: &lt;/p&gt;
      &lt;div id="database"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Okay, so this is my edited code:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  
  function database(){
    var xmlhttp = new XMLHttpRequest();
  
    xmlhttp.open("GET","responsedatabase.php",false);
    xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
        {
          document.getElementById("database").innerHTML=xmlhttp.responseText;
        }
        }
    xmlhttp.send();
  }
  
  setInterval(database,1000);
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;answer from database: &lt;/p&gt;&lt;div id="database"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>