I'm getting 200 (from disk cache), but the requested file is changed

Question

I'm creating a web-app, for IoT, that has to communicate with a python script on a remote pc. The py script makes a request to a php file that update the read.json (both hosted on the same server as the frontend interface), and then this file is read by the interface through javascript thanks to a GET request.

When actively using the app, it is super responsive (less than a sec), but if you stand by for like 6/7 mins and then start using the interface again, changing the state of the buttons takes like 35 sec (while the actual communication to the py script takes nothing more than usual). I tracked down the issue to be the read.json request, because if during the 35sec long wait, I manually open the read.json on the browser, the interface updates itself instantly. The newtwork tab of the devtool show Status Code: 200 (from disk cache) on the read.json request when not updating. Any advice?

Edit: this happens also if after the "stand-by time" i reload the page or open it from an other device.

This is the code that handle the request:

foo();
        
    function foo() {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                  if (this.readyState == 4 && this.status == 200) {

                      /*do stuff using "this.responseText"*/

                    }
                };
                xhttp.open("GET", "https://www.mydomain.example/read.json", true);
                xhttp.send();
                setTimeout(foo, 100);
              } 

Answer 1

I found a workaroud (obv not the best/cleanest way to do it, pls feel free to contribute): i pass as an argument of the get the current time.

So this line:

xhttp.open("GET", "https://www.mydomain.example/read.json", true);

Is now:

xhttp.open("GET", "https://www.mydomain.example/read.json?" + new Date().getTime(), true);