SW20210514-3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pedidos a recursos terceiros</title>
</head>
<body>
<section id="idSectionResposta"></section>
<form>
    <label for="idTextCidade">Portuguese City:</label>
    <input type="text" id="idTextCidade" value="Lisbon"><br>
    <input type="button" value="get temperature" id="idBtnGetTemp">
</form>
<script>
window.onload = boot;

function vaiBuscarTemp(){
    var strPedido = "https://api.openweathermap.org/data/2.5/weather?q=";
    strPedido+=document.getElementById("idTextCidade").value;
    strPedido+=",PT&appid=29bcc32be0e5fe8a61634d7d8e7356a8";
    ajaxGet(strPedido);
}

function boot(){
    document.getElementById("idBtnGetTemp").onclick = vaiBuscarTemp;
}
function k2c (pK){
    return pK-273.15;
}//k2c

//callback
function comoReagirMudancasDeMaturidade (){
    var pontoDeMaturidade = this.readyState;
    var bRespostaDisponivel = pontoDeMaturidade===4;
    if (bRespostaDisponivel){
        //a resposta está pronta
        /*
        document.getElementById("idSectionResposta").
            innerHTML = this.responseText;
         */
        var strRespostaEstruturadaEmJSON = this.responseText;
        var oResposta = JSON.parse(strRespostaEstruturadaEmJSON);
        var temperaturaK = oResposta.main.temp;
        var c = k2c(temperaturaK);
        //c = Math.round(c);
        var strHTML = "A temperatura em Santarém é <mark>"+c+"</mark> celsius";
        document.getElementById("idSectionResposta").innerHTML = strHTML;
    }
}//comoReagirMudancasDeMaturidade

function ajaxGet(
    pUrl
){
    var oRequestToServiceProvider = new XMLHttpRequest();

    oRequestToServiceProvider.open(
        "GET",//método de invocação
        pUrl,//endereço do recurso
        true//booleano (true para pedidos assíncronos , false para pedidos bloqueantes)
    );
    oRequestToServiceProvider.onreadystatechange = comoReagirMudancasDeMaturidade;
    oRequestToServiceProvider.send(); //submissão do pedido
}

</script>
</body>
</html>