title: Auto Refresh JS Array if content changes?
body: <p>I have this javascript function which serves an AJAX request to an external PHP Script, I want this to auto update a HTML <code>&lt;div&gt;</code> if the new check is different from the old check.</p>
  
  <pre><code>&lt;script&gt;
  window.setInterval(function()
  {
    $(function () 
    {
      $.ajax({                                      
          url: 'api.php', data: "", dataType: 'json',  success: function(rows)        
          {
              for (var i in rows)
              {
                  var row = rows[i];          
                  var id = row[0];
                  var vname = row[1];
                  var Password = row[2]
                  $('#output').append("&lt;hr /&gt;").append("&lt;b&gt;id: &lt;/b&gt;"+id+"&lt;b&gt; name: &lt;/b&gt;"+vname+" &lt;b&gt;Password: &lt;/b&gt;"+Password);
              } 
          } 
      });       
    });
   }, 5000);
    &lt;/script&gt;
  </code></pre>
  
  <p>This currently sucessfully returns and updates the div with the content from the array, the problem is, since adding the <code>window.setInterval(function()</code> line, it will server the connection every 5 seconds and update the <code>&lt;div&gt;</code> with duplicate data.. when all I want, it for it to echo the new data (if there is a ny) </p>
  
  <p>Here is my other PHP script: </p>
  
  <pre><code>$STD = new mysqli ("localhost", "root", "hidden", "ajaxrequests");
  
          $array = array(); 
      $Query = $STD-&gt;prepare ("SELECT * FROM ajaxdata");
      $Query-&gt;execute();
      $Query-&gt;bind_result($ID, $Name, $Password);
  
      while ($Query-&gt;fetch())
      {
          $array[] = array ( $ID, $Name, $Password);
      }
  
    echo json_encode($array);
  </code></pre>