Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

XMLHttpRequest.onreadystatechange, a callback não está sendo chamada.

por lucas.gbastos
| 58.1k xp | 2 posts

Dentro da formação Front-end, ao seguir esse artigo https://www.alura.com.br/artigos/preenchendo-formulario-html-automaticamente-com-ajax , o qual está na lista da formação, me deparei com o problema da função não estar sendo chamada.

document.getElementById('myBtn').onclick = buscaCep

function buscaCep() {
  let inputCep = document.querySelector('input[name=cep]')
  let cep = inputCep.value.replace('-', '')
  let url = 'http://viacep.com.br/ws/' + cep + '/json'
  let xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  alert("1234")
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if ((xhr.status = 200)) preencheCampos(JSON.parse(xhr.responseText))
    }
  }
  xhr.send()
}

Coloquei, inclusive alert()console.log()'s dentro da função, mas nunca chega neles, mesmo fora do if. Gostaria de entender o onde errei, desde já agradeço. Lucas Bastos

1 resposta
solução!
por Lorena Garcia
| 9906.1k xp | 14876 posts
Alura Scuba Team Suporte Educacional

Oi Lucas, tudo bem?

Desculpe a demora em retornar.

O problema que você está enfrentando pode ter várias causas. Vou tentar explicar algumas delas e dar algumas dicas para solucionar o problema.

Primeiramente, é importante verificar se o código está sendo carregado corretamente e se o evento de clique está sendo registrado. Você pode fazer isso verificando se o alerta dentro da função buscaCep é exibido ao clicar no botão myBtn. Se não for exibido, pode ser que o evento de clique não esteja sendo registrado corretamente. Nesse caso, certifique-se de que o botão está sendo carregado corretamente e tente registrar o evento de clique novamente.

Outro problema comum é que a função buscaCep está sendo chamada antes que o DOM esteja totalmente carregado. Isso pode ser resolvido adicionando um event listener para o evento DOMContentLoaded, que garante que o código JavaScript só será executado após o DOM estar totalmente carregado. Veja o exemplo abaixo:

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById('myBtn').onclick = buscaCep;
});

Além disso, verifique se não há erros de sintaxe no código, como vírgulas ou parênteses faltando. Você pode usar um depurador de JavaScript, como o console do navegador, para ajudar a identificar esses erros. Certifique-se de também verificar se não há erros na chamada AJAX, como o URL ou o método de requisição.

Por fim, é importante verificar se o servidor está retornando uma resposta válida para a requisição AJAX. Você pode verificar isso verificando o status da resposta dentro do onreadystatechange. No exemplo que você postou, a condição xhr.status = 200 deveria ser xhr.status == 200, já que é uma verificação de igualdade. Além disso, você pode adicionar um console.log dentro do onreadystatechange para verificar se a função está sendo chamada corretamente.

xhr.onreadystatechange = function () {
  console.log(xhr.readyState, xhr.status); // adicione esta linha para debug
  if (xhr.readyState == 4 && xhr.status == 200) {
    preencheCampos(JSON.parse(xhr.responseText));
  }
}

Espero que essas dicas ajudem a solucionar o problema que você está enfrentando.

Um abraço e bons estudos.