Ajax调用以刷新网页

Update: I am using an apache server on the back-end and vanilla JS and jquery on the front-end.

Currently i have a web page that is displaying a variety of data that i am pulling from my back-end server.

How it works: I have a php script that is scraping directory names and displaying them in a dropdown. I have a refresh function set in my html for the web page that refreshes the page every 30 seconds.

The problem: I don't like the constant refresh, especially if there is nothing to update.

Is there a way to use ajax to pool my back-end server and check if new data has been entered in the directory and then update my dropdown?

Many thanks!

Use .data

window.setInterval(function() { 
    $.getJSON('/foo', { }, function(result) { 
        //Get the old data stored in the body using jquery data
        var old_data = $('body').data('my_data');
        //If objects are not the same, update cell
        if ( ! equal_objects(result, old_data) )
             update_cell();
        //Store the new data
        $('body').data('my_data',result);
    }); 
}, 30000);

OBS: equal_objects is a function you should implement to compare 2 objects since JavaScript doesn't provide this functionality. See this post for details: Object comparison in JavaScript