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.