Auto-refresh DIV every few Seconds using JavaScript and Ajax

Let us assume, your web page has a DIV element and you want to auto-refresh its contents every few seconds. You can easily do this using jQuery or any other library. I’ll show how to auto-refresh a DIV every few seconds using plain JavaScript and Ajax. And its very simple.

The advantage in using JavaScript is that it will make coding simple and you do not have to inject any library to your web page.

See this demo

The DIV will get data (content) extracted from an external JSON file. And to do this, I’ll use JavaScript Ajax with GET method.

To auto-refresh the DIV element every few seconds, I’ll call a method (which will refresh the DIV’s content) from within the window.setInterval() function, at a specified interval (few seconds). You can learn more about JavaScript .setInterval() function here.

So, let’s get on with the example.

The Markup

<body>
    <h3>
        The DIV below will refresh after <span id="cnt" style="color:red;">7</span> Seconds
    </h3>
    
    <div id='stock'></div>
</body>

The Script

<script>
    let i = 0;      // Its just a counter.
    
    let getData = () => {
        const oXHR = new XMLHttpRequest();

        // Initiate request.
        oXHR.onreadystatechange = reportStatus;
        oXHR.open("GET", "../../library/stock-ticker.json", true);
        oXHR.setRequestHeader("Content-Type", "application/json");
        oXHR.send(); 

        function reportStatus() {
            // Check if request is complete.
            if (oXHR.readyState === XMLHttpRequest.DONE && 
                oXHR.status === 200) 
            { 
                
                let stock =  JSON.parse(this.responseText);
                
                // Refresh DIV with new content.
                document.getElementById('stock').innerHTML = 
                    'Company: ' + stock[i].Company + ' <br />' + 
                    'Current Price: ' + stock[i].Current_Price + '<br />' +
                    'Change: ' + stock[i].Change;
                    
                i = i + 1;
                if (i == 6) 
                    i = 0;
            }
        }
    }

    getData();
    
    var counter = 7;

    // The countdown method.
    window.setInterval(function () {
        counter--;
        if (counter >= 0) {
            var span;
            span = document.getElementById("cnt");
            span.innerHTML = counter;
        }
        if (counter === 0) {
            counter = 7;
        }

    }, 1000);

    let reload = window.setInterval('getData()', 7000);

</script>

Try it

As a matter of fact, I have used the .setInterval() function twice. The first serves as a countdown, to make it look more practical. The second time I have used the method (see this line here … let reload = window.setInterval('getData()', 7000); ), is what calls the function getData() every "7 seconds" (or 7000 milliseconds)

The getData() function, is where I am making an Ajax request to an external JSON file, using the GET method. Once data is extracted, I am refreshing the DIV element with new content.

let stock = JSON.parse(this.responseText);

Here's another post you may like... 👉 How to auto-refresh a Web Page every 10 seconds using only JavaScript

← PreviousNext →