Geek Answers Handbook

How to refresh page when changing my json data file

So, I have this local file called data.json containing various data. I want to refresh my page only when some data in the json file changes. Appreciate your help if you can explain me some code. I searched all over the Internet, I could not find a suitable answer.

+4
source share
5 answers

Create a timer, select a json file every X milliseconds. If the json content has changed since the last fetch, reload the page. The sample code below uses jQuery to extract a json file and checks every 2000 milliseconds. Make sure the json file contains valid json.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    var previous = null;
    var current = null;
    setInterval(function() {
        $.getJSON("data.json", function(json) {
            current = JSON.stringify(json);            
            if (previous && current && previous !== current) {
                console.log('refresh');
                location.reload();
            }
            previous = current;
        });                       
    }, 2000);   
</script>
</html>
+6

, -, -, . : , API HTML5.

( ) - :

(function() {
    var input;
    var lastMod;

    document.getElementById('btnStart').onclick = function() {
        startWatching();
    };
    function startWatching() {
        var file;

        if (typeof window.FileReader !== 'function') {
            display("The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('filename');
        if (!input) {
            display("Um, couldn't find the filename element.");
        }
        else if (!input.files) {
            display("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            display("Please select a file before clicking 'Show Size'");
        }
        else {
            file = input.files[0];
            lastMod = file.lastModifiedDate;
            display("Last modified date: " + lastMod);
            display("Change the file");
            setInterval(tick, 250);
        }
    }

    function tick() {
        var file = input.files && input.files[0];
        if (file && lastMod && file.lastModifiedDate.getTime() !== lastMod.getTime()) {
            lastMod = file.lastModifiedDate;
            alert("File changed: " + lastMod);
        }
    }
})();

. ​​ location.reload(), ( )
, , .

, , " " ( , websocket Javascript ).

- , Websockets $ajax ( jQuery) XMLHttpRequest ( jQuery).

- Java, # Python ( Windows) , HTTP- Websocket.

+2

Node, fs.watch(), , / . , , , setInterval JSON AJAX /DOM. JSON , , DOM/ .

+1

json , , . , :

  • jQuery getJSON() json localStorage.

jQuery getJSON() , json , awsome function . localStorage, initial JSON new JSON Object.deepEquals(initialJSON, newJSON), , .

+1

stackOverflow

Javascript?

If it is on the same server as your calling function, you can use XMLHttpRequest -

This example is not asynchronous, but you can make it so if you wish.

function fetchHeader(url, wch) {
    try {
        var req=new XMLHttpRequest();
        req.open("HEAD", url, false);
        req.send(null);
        if(req.status== 200){
            return req.getResponseHeader(wch);
        }
        else return false;
    } catch(er) {
        return er.message;
    }
} 
 alert(fetchHeader(location.href,'Last-Modified'));

Reload page using javascript or html

Here are the first 20 ways to refresh the page:

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
location = self.location.href
location = location['href']
location = window['location']
location = window['location'].href
location = window['location']['href']
location = window.location['href']
location = self['location']
location = self['location'].href
location = self['location']['href']
location = self.location['href']
location.assign(location)
location.replace(location)
window.location.assign(location)
window.location.replace(location)
self.location.assign(location)
and the last 10:

self['location']['replace'](self.location['href'])
location.reload()
location['reload']()
window.location.reload()
window['location'].reload()
window.location['reload']()
window['location']['reload']()
self.location.reload()
self['location'].reload()
self.location['reload']()
self['location']['reload']()

So, just combine two and two together, you will get what you want.

If you want to periodically check that

setInterval(function(){ 
//the function here 
and compare and update last_mod_date var if there changes else keep it like that

}, 3000);

Starting Date Comparison Mozilla Example

var

    nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
    nLastModif = Date.parse(document.lastModified);

if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
    if (isFinite(nLastVisit)) {
        alert("This page has been changed!");
    }
}
-1
source

More articles:


All Articles