Grab a value stored in a . html link

Question

The Website https://thingspeak.com/channels/116346/field/1/last.html returns a value and would like to know how to implement it and update it, for example, every 5 minutes.

I am currently doing with the following Script

<script>
    function loadTemp() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("temp").innerHTML = xhttp.responseText;
    }
    };
    xhttp.open("GET", "https://thingspeak.com/channels/116346/field/1/last.html", true);
    xhttp.send();
    }
</script>

But I’m using a knob to show that value

<div class="panel-body">
 <div class="text-center">
<button type="button" class="btn btn-info" onclick="loadTemp()">Temperatura</button>
</div>
<div class="panel-footer">
<p class="text-center" id="temp">TempºC</p>
</div>

Thank you!

Answer 1

To run every 5 minutes you need to use setInterval or setTimeout to be invoked inside the loadTemp function.

You can do it like this:

function loadTemp() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            temp.innerHTML = xhttp.responseText + ' ºC';
        }
    };
    xhttp.open("GET", "https://thingspeak.com/channels/116346/field/1/last.html", true);
    xhttp.send();
    return loadTemp;
}
var temp = document.getElementById("temp");
setInterval(loadTemp(), 5 * 60 * 1000);

Use loadTemp() as an argument from setInterval as it invokes the function directly at the beginning. Then as I have return loadTemp; at the end of the function the argument left to the setInterval is the running function every 5 minutes. 5 minutes == 5 x 60 seconds x 1000 milliseconds.

jsFiddle: https://jsfiddle.net/ath99L64/

Answer 2

Can do with recursive setInterval, or setTimeout:

With setInterval:

<p id="temp"></p>
...
<script>
    function loadTemp() {
    alert('atualização');
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("temp").innerHTML = xhttp.responseText;
    }
    };
    xhttp.open("GET", "https://thingspeak.com/channels/116346/field/1/last.html", true);
    xhttp.send();
    }
    loadTemp();
    setInterval(loadTemp, 5000); // aqui o tempo é em milisecondos, pus 5 secs só a titulo de exemplo... para 5 minutos seriam 1000 * 60 * 5 = 300000
</script>

Example in JSFIDDLE

But it is often better to do with recursive setTimeout, since we are making an external request sometimes some take longer than others and setInterval will already be defined even before the previous request has been finalized.

That is, suppose we have the setInterval in 5 seconds, this interval is always executed (5 secs), the first request was made and it took 3 secondos to obtain answer, after 2 secs the second execution of the setInterval is performed and only takes 1... And so on, this will result in atrocities and responses at the same time etc...

To ensure that the next request will always be made 5 secs (in this case) after we get an answer we do:

<p id="temp"></p>
...
<script>
    function loadTemp() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            alert('successo no request');
            document.getElementById("temp").innerHTML = xhttp.responseText;
            setTimeout(loadTemp, 5000); // aqui o tempo é em milisecondos, pus 5 secs só a titulo de exemplo... para 5 minutos seriam 1000 * 60 * 5 = 300000
        }
        else if (xhttp.status >= 500){
            alert('erro no request');
            setTimeout(loadTemp, 5000); // aqui chamamos outravez no caso de falha, para a próxima pode ser que seja bem sucedida e atualize
        }
    };
    xhttp.open("GET", "https://thingspeak.com/channels/116346/field/1/last.html", true);
    xhttp.send();
    }
    loadTemp();
</script>

Example in JSFIDDLE