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);
}
});
});