Como fazer requisições AJAX em JavaScript

As requisições AJAX (Asynchronous JavaScript and XML) permitem que você envie e receba dados do servidor em segundo plano, sem precisar recarregar a página inteira. Isso pode ser útil para criar aplicações mais dinâmicas e interativas.

Em JavaScript, é possível fazer requisições AJAX utilizando a classe XMLHttpRequest (XHR) ou a API Fetch. Abaixo, seguem exemplos de como fazer requisições AJAX utilizando essas duas opções.

Utilizando a classe XMLHttpRequest:

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://exemplo.com/dados.json', true);
xhr.onload = function() {
  if (this.status == 200) {
    let dados = JSON.parse(this.responseText);
    console.log(dados);
  } else {
    console.log('Erro ao fazer requisição');
  }
};
xhr.send();

Utilizando a API Fetch:

No exemplo acima, a função fetch é utilizada para fazer uma requisição GET para a URL ‘http://exemplo.com/dados.json‘. Em seguida, o método then é utilizado para transformar a resposta em um objeto JSON e exibir os dados no console. Caso ocorra algum erro na requisição, o método catch é chamado para exibir uma mensagem de erro.

Lembre-se de que é necessário tratar os erros que podem ocorrer durante a requisição, como falhas na conexão ou problemas no servidor. Além disso, é importante garantir a segurança da aplicação, evitando vulnerabilidades como o Cross-Site Scripting (XSS) ou o Cross-Site Request Forgery (CSRF).