AJAX: Entenda o que é e como funciona com Javascript e jQuery

AJAX em português significa JavaScript e XML Assincronos. AJAX é um desenvolvimento que possui um conjunto de técnicas voltado para web que permite que aplicações trabalhem de modo assíncrono, processando em segundo plano qualquer requisição ao servidor. Foi inicialmente desenvolvida pelo estudioso Jessé James Garret e mais à frente com tempo por diversas associações.

JavaScript conhecida pelas funcionalidades de gerenciar conteúdo dinâmico de um site e permitir a interação dinâmica com o usuário. O XML é uma variação de linguagem de marcação no estilo HTML. O HTML exibe dados, enquanto o XML armazena e transmite.

Hoje em em dia é comum o formato JSON ser usado para transmitir informações.

JavaScript e o XML trabalham juntos de forma assíncrona, permitindo qualquer aplicação que use AJAX possa enviar e receber dados do servidor sem precisar recarregar a página inteira.

Instalação

jQuery.ajax

Na biblioteca jQuery, uma das funções mais utilizadas é a $.ajax(), que, com uma sintaxe bastante simples, permite enviar e tratar o resultado de requisições assíncronas. Temos um exemplo básico de uso desse método, no qual enviamos algumas informações via POST para um arquivo PHP.

$.ajax({
method: “POST”,
url: “cadastrar.php”,
data: { nome: “Pedro”, email: “pedro@email.com” }
})

Além dos parâmetros method, url e data, há ainda outros que podem ser declarados para acrescentar mais informações úteis à requisição e configurar seu funcionamento. vemos um exemplo mais complexo com alguns parâmetros e métodos adicionais.

$.ajax({
url : “cadastrar.php”,
type : ‘post’,
data : {
nome : “Maria Fernanda”,
salario :’3500′
},
beforeSend : function(){
$(“#resultado”).html(“ENVIANDO…”);
}
})
.done(function(msg){
$(“#resultado”).html(msg);
})
.fail(function(jqXHR, textStatus, msg){
alert(msg);
});

jQuery.get

A função $.get() tem como objetivo realizar a requisição assíncrona ao servidor por meio do método HTTP GET, ou seja, ela é uma forma reduzida de implementar a função $.ajax(). No código a seguir podemos ver um exemplo de uso dessa função:

$.get(“listar_dados.php”, function(resultado){
$(“#mensagem”).html(resultado);
})

Nesse caso, informamos primeiramente a URL que receberá a requisição, e como segundo parâmetro, uma função que tratará seu retorno. Nessa função, o argumento resultado será preenchido com o conteúdo retornado pelo servidor.

jQuery.post

A função $.post() também é uma forma simplificada de $.ajax(), no entanto, dessa vez as requisições são enviadas por meio do método HTTP POST.