logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

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:

  • onreadystatechange: monitora a mudança de estado da requisição.
  • readyState: número do estado atual da requisição
  • status: código do status da requisição
  • respose text: o texto da resposta da requisição
  • 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:

  • O método de envio, usaremos basicamente "GET" ou "POST".
  • A URL Para onde enviaremos a requisição
  •                     
    
        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.

    Índice de Aulas