Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

sequência dos métodos do XMLHttpRequest

Referente ao curso JavaScript: programando na linguagem da web, no capítulo AjaxBuscando pacientes com AJAX e atividade Introdução ao AJAX

por Estudante
| 237.3k xp | 35 posts

Nesse exemplo mostrado em aula fiquei na dúvida quanto a ordem dos métodos.

xhr.open("GET", "http://api-pacientes.herokuapp.com/pacientes");
xhr.addEventListener("load", function(){
    console.log(xhr.responseText);
});
xhr.send();

Na minha cabeça, como o método send() envia a requisição, faria mais sentido colocarmos o método addEventListener no final, ou seja, depois do método send(). Não entendo como o JS nos mostra o resultado da requisição se ainda não usamos o método send(). No entanto fiz o teste e funciona igual.

2 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Andre, tudo bem?

Vamos ao trecho completo:

A partir do elemento botaoAdicionar que faz um requsição, dentro dessa chamada, temos a declaração do objeto XMLHttpRequest(); em seguida, o método .open() faz o pedido dos dados da URL. Após, temos o evento que carrega o pedido feito e o método .send() nos retorna o pedido que foi feito.

botaoAdicionar.addEventListener("click", function() {
    var xhr = new XMLHttpRequest();

    xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes");

    xhr.addEventListener("load", function() {
        console.log(xhr.responseText);
    });

    xhr.send();
});

Mesmo trazendo o método .send() para antes do addEventListener, o contexto de execução do JS permite que a requisição seja executada com sucesso. Mas é interessante que as etapas venham em sequência: fazemos a requsição, o pedido é envidado, depois carregado e por últimos nos é retorna o resultado.

A documentação do objeto XMLHTTPRequest: https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHTTPRequest

Se ficou alguma dúvida é só falar :} Bons estudos!

solução!
por Estudante
| 93.2k xp | 38 posts

Boa tarde! Andre, pensei a mesma coisa quando assisti esta aula. Mas depois entendi qual é a lógica por detrás disso. O open(), como o professor disse, configura a requisição sem enviar nada. E ANTES que a requisição seja enviada pelo send(), ele adiciona um evento que escuta (espera) a resposta da requisição. Depois disso ele envia, mas nesta altura o evento "load" já está lá aguardando o retorno a qualquer momento.