JavaScript HttpRequest始终返回相同的结果

Question

I have a HTML page JavaScript which send a GET request data to PHP file to return all datas saved in the database . PHP replies with a HTML-table - that works fine!

But: When if i click a button (which calls the same JavaScript function) to update my table in order to display the new data, i get the same result (and i have definitely new data on table).

If I call the PHP manually via the browser it'll show me the new results immediately and at this moment it is also working with JavaScript (but only once).

Here is a part of my code.

HTML/JS:

<button onclick="GetData()"></button>
<div id="test"></div>
<script>

    function GetData(){
        var xhttp = new XMLHttpRequest();
        document.getElementById("test").innerHTML = "";
        xhttp.onreadystatechange = function(){
            if (xhttp.readyState == 4 && xhttp.status == 200){
                document.getElementById("test").innerHTML = xhttp.responseText;

            }
        };

        xhttp.open("GET", "../GetData.php", true);

        xhttp.send();
        }

</script>

PHP:

    //DB details
    $dbHost     = 'localhost';
    $dbUsername = 'lalalala';
    $dbPassword = 'lalalalal';
    $dbName     = 'lalalala';

    //Create connection and select DB
    $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName) or die ("UUUUPS");


    $sql = "select name, beschreibung, image, video from data";



    $result = $db->query($sql);


   if ($result->num_rows > 0) {
$return = '<table class ="table table-hover"><thead><tr><th scope="col">Name</th><th scope="col">Beschreibung</th><th scope="col">Bilddatei</th><th scope="col">Video-Url</th></tr></thead><tbody>';
// output data of each row
while($row = $result->fetch_assoc()) {
    $return .= "<tr><td>".$row["name"]."</td><td>".$row["beschreibung"]."</td><td><img src=data:image/png;base64,".base64_encode($row["image"])."/></td><td>".$row["video"]."</tr>";
}
$return .= "</tbody></table>";
 $db->close();
 echo $return;
 } else {
 echo "0 results";
 }

Thank you for your help!

Answer 1

It seems your browser is caching your result, that's why you see data. You can test it like this:

var random = Math.floor(Math.random() * 100);
xhttp.open("GET", "../GetData.php?"+random, true);

If this helps, look into expire headers in your PHP script. Also, the way you're doing queries in quite outdated. It's a very PHP4 way. Have a look here: http://php.net/manual/en/book.mysqli.php