28. Ajax e requisições HTTP com Javascript

Ajax, que significa Asynchronous JavaScript and XML, é uma técnica de desenvolvimento web que permite a uma página da web atualizar partes de seu conteúdo sem precisar recarregar a página inteira. Isso é alcançado através do envio de requisições HTTP com Javascript para o servidor e processamento da resposta. Este capítulo irá aprofundar as requisições HTTP com Javascript usando Ajax.

Para começar, uma requisição HTTP é um pedido para um recurso específico (como uma página da web, um arquivo de imagem, etc.) em um servidor web. A requisição é enviada pelo navegador do cliente ao servidor, que então processa a requisição e retorna a resposta ao cliente. Isso é conhecido como o ciclo de requisição-resposta.

Em Javascript, podemos criar e enviar requisições HTTP usando o objeto XMLHttpRequest. Este objeto nos fornece métodos e propriedades que podemos usar para enviar e receber dados do servidor. Aqui está um exemplo básico de como criar uma requisição HTTP com Javascript:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

No exemplo acima, primeiro criamos uma nova instância do objeto XMLHttpRequest. Em seguida, usamos o método open() para configurar a requisição. O primeiro argumento é o método HTTP que queremos usar (neste caso, GET), e o segundo argumento é a URL para a qual queremos enviar a requisição. O terceiro argumento é um valor booleano que indica se a requisição deve ser assíncrona ou não (neste caso, verdadeiro para assíncrona).

Depois de configurar a requisição, usamos o método send() para enviá-la ao servidor. Se a requisição for assíncrona, o método send() retornará imediatamente e a execução do script continuará. Se a requisição for síncrona, o método send() não retornará até que a resposta seja recebida do servidor.

Podemos usar o evento 'readystatechange' para ouvir as mudanças no estado da requisição. Quando o estado muda, a função de callback que fornecemos será chamada. Podemos então verificar o estado da requisição e processar a resposta se a requisição for concluída com sucesso. Aqui está um exemplo de como fazer isso:

xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};

No exemplo acima, a função de callback verifica se o estado da requisição é 4 (que significa que a requisição foi concluída) e se o status HTTP é 200 (que significa que a requisição foi bem-sucedida). Se ambas as condições forem verdadeiras, a resposta do servidor (que é uma string de texto) é registrada no console.

Ajax é uma técnica poderosa que permite criar páginas da web mais interativas e responsivas. Ao usar requisições HTTP assíncronas com Javascript, podemos atualizar partes de uma página da web sem precisar recarregar a página inteira. Isso proporciona uma experiência de usuário mais suave e eficiente.

Em resumo, AJAX e as requisições HTTP com JavaScript são fundamentais para a criação de aplicações web modernas e interativas. Através do uso do objeto XMLHttpRequest, podemos enviar e receber dados do servidor de maneira assíncrona, permitindo atualizações dinâmicas na página sem a necessidade de recarregar a página inteira. Isso leva a uma experiência de usuário muito melhor e mais fluida.

Próxima página do Ebook Gratuito:

79Introdução ao React.js

4 minutos