XMLHttpRequest不会在javascript的时间间隔内更新

Question

I use AJAX to check user updates every 2 seconds, but my javascript does not update the response.

I have one javascript file with XMLHttpRequest object and every 2 seconds it sends a request to another file (.php) where it gets XML with updates. For some reason, it doesn't always get the newest content and seems to have some old cached.

My javascript file contains this code (simplified):

var updates = new XMLHttpRequest();
updates.onreadystatechange = function(){
    "use strict";
    if(updates.readyState === 4 && updates.status === 200){
        console.log(updates.responseXML);
    }
};

var timer = 0;
clearInterval(timer);
timer = setInterval(function(){
    "use strict";
    updates.open('GET','scripts/check_for_notifications.php', true);
    updates.send();
},2000);

Then I have the PHP file (check_for_notifications.php), where I have this code:

$response = new SimpleXMLElement('<xml/>');

$update = $response->addChild('update');
$update->addChild('content', 'New message');
$update->addChild('redirect', 'some link');
$update->addChild('date', '1.1.2019 12:00');

header('Content-type: text/xml');
print($response->asXML());

Every two second I receive a log in my console, but when I change the PHP file, while the interval is in progress (e.g. I change the date to '1.1.2019 11:00' and save it) I still receive the '12:00' in the console. For me, it seems that it doesn't update and it still has the repsonseXML cached. Is there any way I could "flush" the output or am I doing it wrong?

Answer 1

It's probably a cache problem. In the network browser console, you should see a response of type 304 Not modified.

To be sure, you can add an element in the url to bypass the cache:

updates.open('GET','scripts/check_for_notifications.php&nocache=' + new Date().getTime(), true);

If this works, you will need to configure the server (apache or nginx) to prevent the file from being cached. It's cleaner than the timestamp solution. the browser does not store cached files unnecessarily.

Apache .htaccess or Apache conf, something like

<Files "check.php">
    <IfModule mod_headers.c>
        Header set Cache-Control "no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires 0
    </IfModule>
</Files>

Nginx conf, something like

location = /check.php {
    add_header 'Cache-Control' 'no-cache, no-store, must-revalidate';
    expires off;
}

You can also see the fetch api : https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

Be careful with your code, it can launch several requests simultaneously and find yourself with a DOS if there are too many users.

If requests take more than 2 seconds because the server is slow, others requests will be sent in the meantime, which will slow down the server even more....