logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

AJAX - Response

Na última aula aprendemos como enviar uma requisição http usando AJAX. Vamos agora reunir todos aqueles comandos dentro de uma função e vamos trabalhar com a resposta:

                    

    function tempo_londres() {
        var xhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
                        
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);
                
            } 
        };
        xhttp.open("GET", "https://openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22");
        xhttp.send();
    }

    tempo_londres();

                    
                

O console mostrará um JSON, ou seja, um objeto Javascript no formato string, com as seguintes informações:

                    

    {
        "coord":{"lon":-0.13,"lat":51.51},
        "weather":[ {"id":501,"main":"Rain","description":"moderate rain","icon":"10d"},
                    {"id":701,"main":"Mist","description":"mist","icon":"50d"}
        ],
        "base":"stations",
        "main":{"temp":9.4,"pressure":1016,"humidity":100,"temp_min":9,"temp_max":10},
        "visibility":8000,
        "wind":{"speed":3.6,"deg":330},
        "clouds":{"all":92},
        "dt":1537694400,
        "sys":{"type":1,"id":5091,
        "message":0.0038,
        "country":"GB",
        "sunrise":1537681718,
        "sunset":1537725356},
        "id":2643743,
        "name":"London",
        "cod":200
    }

                    
                

Vamos agora criar uma função para converter o JSON em um objeto Javascript para podermos trabalhar com estes dados em nossa página.

Como a requisição leva alguns instantes para retornar, precisamos usar uma função callback, para garantir que não vamos tentar usar os dados antes de eles chegarem.

                    

    function mostrar_temperatura(dados) {
        var dados_obj = JSON.parse(dados);
        console.log('A temperatura em Londres neste momento é de ' + dados_obj.main.temp + " graus Celsius.")
    }

    function tempo_londres(callback) {
        var xhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
                        
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                callback(this.responseText);
                
            } 
        };

        xhttp.open("GET", "https://openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22");
        xhttp.send();
    }

    tempo_londres(mostrar_temperatura);

                    
                

No nosso projeto 3 aprenderemos mais sobre o API Open Weather Map e usaremos ele para criar um app de previsão do tempo em Javascript.

Índice de Aulas