Ajax (Asynchronous JavaScript and XML), ou em português “JavaScript Assíncrono e XML”, é uma funcionalidade JavaScript que possibilita a requisição sem o recarregamento da página.
Ajax é muito utilizado hoje em dia em praticamente todas as aplicações web e aplicativos. Diferentemente do carregamento padrão de aplicações mais antigas, onde todo o conteúdo precisava ser carregado no momento em que um site era carregado, com Ajax você consegue carregar partes separadas do site de forma independente e sem que uma requisição atrapalhe no carregamento da outra (carregamento assíncrono).
Carregamento muito mais rápido
Como uma requisição Ajax de certa forma é mais “específica”, onde ela tem um objetivo bem definido como por exemplo, carregar mais postagens, enviar os dados de um formulário, validar alguma informação, etc., isso reduz muito o consumo do servidor, o que torna a requisição bem mais rápida e objetiva. Isso ocorre porque não vai ser necessário recarregar todas as partes do site, como por exemplo o header, o footer, e o que mais o site tiver, onde tudo isso iria fazer várias outras requisições no banco de dados para montar o site. Já com Ajax, a requisição iria apenas carregar uma parte específica do código, processar, e trazer os dados para o frontend, por isso ela é tão rápida e pode ser usada de forma simultânea e assíncrona, tornando o site bem mais interativo e rápido.
Exemplo de código Ajax
Esse código está completo, se você quiser testá-lo, basta copiar exatamente como está e criar um arquivo .html que ele já deve funcionar.
No exemplo abaixo, é feito uma requisição na API pública do GitHub, e retorna os dados dos repositórios públicos do usuário que você inserir:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listar Repositórios do GitHub</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Função para listar repositórios via Ajax
function listarRepositorios(tipo, usuario){
$.ajax({
url: `https://api.github.com/users/${usuario}/${tipo}`,
type: 'GET',
success: function(data){
// Limpa a div onde os repositórios serão adicionados
$('#repositorios').empty();
// Faz um loop no retorno e insere na página dinamicamente
data.forEach(function(repo){
$('#repositorios').append(`<p><a href="${repo.html_url}" target="_blank">${repo.full_name}</a></p>`);
});
},
error: function(xhr, status, error){
// Caso ocorra algum erro na requisição
console.error('Erro ao fazer a requisição:', error);
}
});
}
// Ao clicar no botão, faz a requisição Ajax para listar os repositórios
$('#listar-repositorios').click(function(){
var tipo = $('input[name="tipo"]:checked').val(); // Pega o tipo de repositório selecionado
var usuario = $('#usuario').val(); // Pega o valor do campo de usuário
listarRepositorios(tipo, usuario);
});
});
</script>
</head>
<body>
<!-- Campo para inserir o nome de usuário -->
<input type="text" id="usuario" placeholder="Usuário" />
<!-- Radio buttons para selecionar o tipo de repositório -->
<input type="radio" id="publicos" name="tipo" value="repos" checked>
<label for="publicos">Repositórios Públicos</label>
<input type="radio" id="favoritos" name="tipo" value="starred">
<label for="favoritos">Repositórios Favoritos</label>
<!-- Botão para acionar a requisição Ajax -->
<button id="listar-repositorios">Listar Repositórios</button>
<!-- Div onde os repositórios serão adicionados dinamicamente -->
<div id="repositorios"></div>
</body>
</html>Note que ao realizar as requisições, a página não faz recarregamento, e apenas a parte onde está programada para receber os dados que sofre alterações.
Ajax em aplicativos
É possível utilizar Ajax em praticamente qualquer aplicação hoje em dia. É muito comum termos uma API com toda a lógica de negócio e segurança separado do frontend, e fazer o carregamento dos dados via Ajax.
Ajax a qualquer momento
Uma das maiores vantagens de requisições Ajax, é que elas são bem rápidas e podem ser realizadas a qualquer momento, mesmo até sem a interação do usuário, ou seja, você pode realizar requisições Ajax de tempos em tempos, sem a necessidade do usuário clicar em algum botão na página.
Também é possível utilizar JavaScript para detectar determinados eventos na página e realizar requisições Ajax. Por exemplo, quando o usuário faz scroll, você consegue detectar esse scroll, e fazer uma requisição Ajax, carregando mais posts e criando uma rolagem infinita, tudo isso sem a necessidade do usuário clicar em qualquer botão.
Conclusão
São inúmeras as possibilidades e interações que você consegue fazer com Ajax, além de melhorar e muito a experiência do usuário. Se você ainda está em dúvida se vale a pena, eu recomendo começar a utilizar o quanto antes em suas aplicações.