AJAX - Request
Para iniciar uma requisição HTTP, primeiro devemos criar um novo objeto XMLHttpRequest.
var xhttp = new XMLHttpRequest();
Versões do Internet Explorer anteriores à 6 não utilizam objeto XMLHttpRequest, Portanto para garantir a compatibilidade com estas versões, podemos testar se o objeto existe usando um if ternário:
var xhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
Caso exista o objeto XMLHttpRequest, podemos utilizá-lo, caso contrário, utilizamos o ActiveXObject.
Este objeto será usado para fazer a requisição HTTP. Antes vamos definir o que acontecerá quando recebermos a resposta. Para fazer isto, é preciso conhecer os estados de uma requisição, conforme mostra a tabela abaixo:
Estado | Descrição |
---|---|
0 | Requisição não inicializada |
1 | Conexão com o servidor estabelecida |
2 | Requisição recebida |
3 | Processando requisição |
4 | Requisição finalizada e resposta recebida |
O estado que vai nos interessar é o 4, quando recebermos a resposta da requisição. Além disso, precisamos ter certeza de que a resposta não é um erro, para isso vamos consultar também o status da resposta. A tabela abaixo mostra os status mais comuns:
Status | Descrição |
---|---|
200 | OK - Resposta recebida sem problemas |
403 | Requisição não autorizada |
404 | Não encontrado |
Agora basta criar a função, que usará 4 propriedades importantes do objeto XMLHttpRequest:
Para criar uma função que soltará no console a resposta, fazemos:
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
Agora o próximo passo é enviar a requisição. Vamos usar como exemplo o API Open Weather Map, que vamos utilizar para o nosso Projeto 3 do curso. Saiba mais sobre este serviço aqui.
O método open será usado para abrir a requisição. Neste método precisamos passar dois argumentos:
xhttp.open("GET", "https://openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22");
xhttp.send();
Feito isso, teremos a resposta da requisição no console. Na próxima aula vamos aprender como trabalhar com esta resposta.