Aprenda a fazer requisições assíncronas com AJAX em Javascript puro

AJAX é uma abreviação para "Asynchronous JavaScript and XML", ou seja, JavaScript e XML assíncronos. É uma técnica de programação que permite que as páginas da web interajam com servidores sem a necessidade de recarregar a página inteira. Em vez disso, o AJAX permite que as páginas solicitem e recebam dados do servidor de forma assíncrona, o que significa que as solicitações são executadas em segundo plano e a página pode continuar funcionando normalmente.

Para fazer as primeiras requisições assíncronas em JavaScript usando AJAX, você pode seguir os seguintes passos:

Crie um objeto XMLHttpRequest

O primeiro passo é criar um objeto XMLHttpRequest, que é usado para fazer solicitações HTTP assíncronas ao servidor. Você pode criar um novo objeto XMLHttpRequest usando o construtor XMLHttpRequest(). Aqui está um exemplo:

const xhttp = new XMLHttpRequest();

Definindo a função de callback

Em seguida, você precisa definir a função de callback que será chamada quando a resposta do servidor estiver pronta. A função de callback deve verificar se a resposta foi bem-sucedida e atualizar o conteúdo da página de acordo. Aqui está um exemplo:

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};

Esta função verifica se o estado da solicitação é 4 (indicando que a resposta do servidor está completa) e se o status da resposta é 200 (indicando que a resposta foi bem-sucedida). Se ambas as condições forem verdadeiras, a função atualiza o conteúdo de um elemento HTML com o conteúdo da resposta do servidor.

Enviando uma solicitação

Por fim, envie a solicitação para o servidor usando o método open() e send(). O método open() especifica o método HTTP a ser usado e a URL do servidor, enquanto o método send() envia a solicitação ao servidor. Aqui está um exemplo:

xhttp.open("GET", "url-do-servidor", true);
xhttp.send();

Este exemplo envia uma solicitação GET para a URL especificada no primeiro parâmetro. O terceiro parâmetro é definido como true para indicar que a solicitação deve ser assíncrona.

No geral, fazer uma solicitação AJAX em JavaScript envolve a criação de um objeto XMLHttpRequest, definição de uma função de callback e envio da solicitação ao servidor. Com esses passos básicos, você pode começar a criar solicitações AJAX mais complexas para interagir com servidores e atualizar o conteúdo de suas páginas da web de forma dinâmica.

Assista o vídeo e aprenda mais.