Como usar Ajax com JavaScript

O Ajax é uma técnica de programação que permite atualizar partes de uma página web sem a necessidade de recarregar a página inteira. Com o JavaScript, é possível usar o Ajax para criar experiências de usuário mais rápidas e interativas. Neste guia prático, confira Como usar Ajax com JavaScript.

O que é Ajax?

Primeiramente, Ajax é uma sigla para “Asynchronous JavaScript and XML” (JavaScript e XML Assíncronos), e refere-se a uma técnica de programação que permite atualizar partes de uma página web sem a necessidade de recarregar a página inteira. Em vez disso, o JavaScript faz uma chamada assíncrona ao servidor e atualiza o conteúdo da página em tempo real.

Requisições Ajax

Para fazer uma requisição Ajax, você pode usar o objeto XMLHttpRequest, que é nativo do JavaScript. Este objeto permite fazer chamadas assíncronas ao servidor e obter uma resposta em formato de texto, XML ou JSON.

Exemplo:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // Código a ser executado em resposta à requisição Ajax
  }
};
xhttp.open("GET", "meu-arquivo.php", true);
xhttp.send();

Tratando a resposta

Depois de fazer uma requisição Ajax, é necessário tratar a resposta do servidor. No entanto, isso pode ser feito usando o método “responseText” do objeto XMLHttpRequest, que retorna a resposta em formato de texto.

Exemplo:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var resposta = this.responseText;
    // Código para manipular a resposta do servidor
  }
};
xhttp.open("GET", "meu-arquivo.php", true);
xhttp.send();

Atualizando a página

Depois de receber a resposta do servidor, é possível atualizar partes da página usando o JavaScript. Isso pode ser feito usando o método “innerHTML” para atualizar o conteúdo de um elemento HTML.

Exemplo:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var resposta = this.responseText;
    document.getElementById("meu-elemento").innerHTML = resposta;
  }
};
xhttp.open("GET", "meu-arquivo.php", true);
xhttp.send();

Conclusão

O Ajax é uma técnica de programação poderosa que permite atualizar partes de uma página web sem a necessidade de recarregar a página inteira. Sendo assim, com o JavaScript, é possível fazer requisições Ajax e manipular a resposta do servidor em tempo real. Além disso, é possível atualizar partes da página sem a necessidade de recarregar a página inteira. Com essas habilidades, você estará preparado para criar aplicações web mais rápidas e interativas.

Continue aprendendo JavaScript acompanhando a documentão oficial clicando aqui. No entanto, você também pode ler mais artigos como este clicando aqui.