Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Posição do método send()

Bom dia, galera!

Minha dúvida é a seguinte. Na última aula do curso foi ensinado uma forma de importar dados de um servidor externo. No final, o bloco de código ficou assim:

var botaoBuscar = document.querySelector("#buscar-pacientes");

botaoBuscar.addEventListener("click", function(){
    var xhl = new XMLHttpRequest();

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


    xhl.addEventListener("load", function(){
        var erroAjax = document.querySelector("#erro-ajax");
        if(xhl.status == 200) {
            erroAjax.classList.add("invisivel");
            var resposta = this.responseText;
            var pacientes = JSON.parse(resposta);

            pacientes.forEach(function(paciente) {
                adicionarPacienteNaTabela(paciente);
            });

        } else {
            erroAjax.classList.remove("invisivel");
            console.log(xhl.responseText);
            }
    });
    xhl.send();
});

O método send() foi chamado no final do código, sendo que se eu adicionar ele logo no início aparentemente ele tem a mesma funcionalidade. O que eu queria saber é se seria uma má prática ou em algum momento isso não funcionaria. No caso o meu código atual eu deixei assim:

var botaoBuscar = document.querySelector("#buscar-pacientes");

botaoBuscar.addEventListener("click", function(){
    var xhl = new XMLHttpRequest();
    xhl.open("GET", "https://api-pacientes.herokuapp.com/pacientes");
    xhl.send();

        xhl.addEventListener("load", function(){
            var erroAjax = document.querySelector("#erro-ajax");
            if(xhl.status == 200) {
                    erroAjax.classList.add("invisivel");
                    var resposta = this.responseText;
                    var pacientes = JSON.parse(resposta);

                    pacientes.forEach(function(paciente) {
                        adicionarPacienteNaTabela(paciente);
                    });

            } else {
                    erroAjax.classList.remove("invisivel");
                    console.log(xhl.responseText);
                    }
            });
    });
2 respostas
solução!

Bom dia.

Fazer o Send antes de adicionar um tratamento pode ocasionar erro no processamento de dados. O correto é, antes de fazer o Send(), sua variável já saiba o que fazer quando a resposta retornar do Send();

Bom dia!

Obrigado, Thiago.