Get a value stored in a .html link

1

The Site link returns a value and would like to know how to implement it, for example, every 5 minutes.

Currently I'm 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 button to show this 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!

    
asked by anonymous 25.05.2016 / 08:36

2 answers

1

To run every 5 minutes you need to use setInterval or setTimeout to be invoked within 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);

Usage loadTemp() as argument of setInterval because it invokes the function directly at startup. Then since I have return loadTemp; at the end of the function the argument left at setInterval is the run function every 5 minutes. 5 minutes == 5 x 60 seconds x 1000 milliseconds.

jsFiddle: link

    
25.05.2016 / 12:10
0

You can do with setInterval, or recursive 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 on JSFIDDLE

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

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 seconds to get a response, in 2 secs the second execution of the setInterval is performed and only takes 1 ... And from then on, this will result in hiccups and responses at the same time etc ...

To ensure that the next request will always be done 5 secs (in this case) after getting a response 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 on JSFIDDLE

    
25.05.2016 / 12:22