Artigos JavaScript Ajax com jQuery: Trabalhando com requisições assíncronas

Durante o desenvolvimento de sites e sistemas web em geral, é comum a necessidade de consumir recursos do servidor sem que a página precise ser carregada novamente. Para atender esse tipo de situação, podemos utilizar o conceito de Ajax, definido, em poucas palavras, como um conjunto de técnicas que utilizam JavaScript para carregar informações de forma assíncrona.

Ao realizar chamadas assíncronas, o fluxo do código não é interrompido até que a resposta seja obtida. Ao invés disso, após realizar a requisição, a resposta é obtida em um momento posterior, de forma independente, e tratada por meio de uma função (chamada função de callback).

Usando jQuery e Ajax

Nesse artigo veremos como realizar requisições assíncronas utilizando jQuery, uma das principais bibliotecas JavaScript que provê funções com estrutura simplificada para trabalhar com Ajax.

Cursos de jQuery

O que é jQuery?

O que é jQuery?

Curso
Primeiros passos com a jQuery

Primeiros passos com a jQuery

Curso
Validação de formulários com jQuery

Validação de formulários com jQuery

Curso

Método 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. Na Listagem 1, 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" }
   })
Listagem 1. Exemplo de uso do $.ajax.

Linha 2: informamos qual método/verbo HTTP será utilizado na requisição;

Linha 3: informamos a URL para a qual enviaremos a requisição;

Linha 4: enviamos alguma informação no corpo da requisição.

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. Na Listagem 2, 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);
       });
Listagem 2. Exemplo completo de uso do $.ajax.

Linhas 8 a 10: o argumento beforeSend recebe uma função que é executada antes da requisição ser enviada. Nesse caso, exibimos o texto “ENVIANDO” em um elemento da página;

Linhas 12 a 14: a função de callback done é executada quando a requisição é finalizada com sucesso e nos permite tratar o retorno do servidor, que é recebido por meio do parâmetro msg;

Linhas 15 a 17: a função de callback fail, por sua vez, é executada quando ocorre algum erro na requisição. De modo semelhante, a mensagem de erro é recebida no parâmetro msg.

Na Figura 1 podemos ver o exemplo funcionando. Como o arquivo cadastrar.php retornou a mensagem “Dados enviados, “ seguida do nome cadastrado, optamos por exibir esse texto logo abaixo do formulário.

Documento PDF
Figura 1. Documento PDF após inserção de conteúdo

Método 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.

Método 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. Na Listagem 3 temos um exemplo de uso.


   $.post("salvar_dados.php", {
       nome : "Maria Fernanda", salario : "3000"
   }, function(msg){
       $("#resultado").html(msg);
   })
Listagem 3. Utilização da função $.post().

Linha 1: informamos a URL que receberá a requisição;

Linha 2: passamos dados em formato de objeto JavaScript no corpo da requisição;

Linha 3: adicionamos uma função de callback que será executada quando a requisição for finalizada, e receberá o retorno do servidor no parâmetro msg.

Requisições assíncronas via Ajax não dependem do jQuery para funcionar, mas essa biblioteca facilita essa tarefa com métodos simples e eficientes tanto no envio das informações quanto no tratamento da resposta do servidor.

Cursos de JavaScript

Cursos de JavaScript

Cursos de JavaScript

Cursos
Curso de Introdução ao JavaScript

Curso de Introdução ao JavaScript

Curso
JavaScript: Gerando uma ação durante inatividade do usuário

Gerando uma ação durante inatividade do usuário

Curso