AJAX

Com os métodos AJAX do jQuery, pode-se solicitar texto, HTML, XML ou JSON a partir de um servidor remoto usando HTTP Get, Post, Put ou Delete – E pode-se carregar os dados externos diretamente para os elementos HTML selecionados.

Métodos de AJAX

load()

O método load() carrega dados de um servidor e coloca os dados retornados para o elemento selecionado.

Sintaxe:

$(selector).load(URL,data,callback);

O parâmetro URL, obrigatório, especifica o URL do recurso que desejamos carregar.

O parâmetro opcional data especifica um conjunto de querystring pares chave / valor para enviar junto com o pedido.

O parâmetro opcional callback é o nome de uma função a ser executada após o método load() ter terminado.
A função de callback pode ter diferentes parâmetros:

responseTxt – contém o conteúdo resultante se a chamada sucesso
statusTxt – contém o status da chamada
xhr – contém o objeto XMLHttpRequest

Exemplo 1:

Considere-se o ficheiro, demo_test.txt, armazenado no servidor corrente, com o conteudo seguinte:

<h2>jQuery and AJAX is FUN!!!</h2> 
<p id="p1">This is some text in a paragraph.</p>

O exemplo a seguir carrega o conteúdo do ficheiro “demo_test.txt” num elemento <div> específico, com o id “div1”:

$("#div1").load("demo_test.txt");

Exemplo 2:

Também é possível adicionar um selector jQuery no parâmetro de URL.

O exemplo a seguir carrega o conteúdo do elemento com id = “p1”, do ficheiro “demo_test.txt”, num elemento <div> específico: $("#div1").load("demo_test.txt #p1");

Exemplo 3:

O exemplo a seguir exibe uma caixa de alerta após o método load() estar concluído.

Se o método load() tiver êxito, ele exibe “conteúdo externo carregado com sucesso!”, se falhar, ele exibe uma mensagem de erro:

$("button").click(function(){ 
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ 
   if(statusTxt=="success") 
      alert("External content loaded successfully!"); 
   if(statusTxt=="error") 
      alert("Error: " + xhr.status + ": "+xhr.statusText); 
 }); 
});

$.get()

O método $.get() solicita dados do servidor com um pedido HTTP GET.

Sintaxe:

$.get(URL,callback);

O parâmetro URL, obrigatório, especifica o URL do recurso que deseja pedir.
O parâmetro callback, opcional, é o nome de uma função a ser executada, se o pedido for bem-sucedido. Esta função pode ter até 3 parâmetros opcionais, sendo o primeiro o conteúdo do recurso solicitado, o 2º o estado do pedido e o 3º o objecto XmlHttpRequest.

Exemplo 1:
Considere-se a seguinte página, demo_test.php, alojada no servidor corrente:

<?php 
echo("This is some text from an external PHP file.") 
?>

O exemplo a seguir usa o método $.get() para obter dados de um ficheiro no servidor:

$("button").click(function(){ 
   $.get("demo_test.php",function(data,status){ 
      alert("Data: " + data + "\nStatus: " + status); 
   }); 
});

$.post()

O método $.post() solicita dados do servidor usando um pedido HTTP POST.

Sintaxe:

$.post(URL,data,callback);

O parâmetro URL, OBRIGATÓRIO, especifica o URL do recurso que pretendemos solicitar.
O parâmetro opcional data, especifica um conjunto de querystring pares chave / valor para enviar junto com o pedido.
O parâmetro callback opcional é o nome de uma função a ser executada, se o pedido for bem-sucedido.
O primeiro parâmetro da função de callback contém o conteúdo da página solicitada, e o segundo parâmetro o estado do pedido.

Exemplo:

O exemplo a seguir usa o método $.post () para enviar dados, para o servidor, que serão obtidos pelo script gravarPessoa.php juntamente com o pedido:

$("button").click(function(){ 
   $.post("gravarPessoa.php", 
   { 
      name:"Pato Donald", 
      city:"Donald City" 
   }, 
   function(data,status){ 
      alert("Data: " + data + "\nStatus: " + status); 
   }); 
});

$.ajax()

O método ajax() é usado para executar um pedido AJAX assíncrono.

Todos os métodos de AJAX jQuery usam o método ajax(). Este método é usado principalmente para pedidos onde os outros métodos não podem ser usados.

Sintaxe:

$.ajax({name:value, name:value, … })

Parâmetros

Parâmetro	Valor/Descrição
async	Valor booleano que indica se o pedido é assíncrono ou não. Valor de defeito é true.
beforeSend(xhr)	Uma função que é executada antes do pedido ser enviado.
cache	Valor booleano que indica se o browser deve colocar as páginas pedias em cache. Valor de defeito é true.
complete(xhr,status)	Uma função que é executada quando o pedido termina (após as funções success e error)
contentType	O content type usado quando se envia dados para o servidor. Valor de defeito: “application/x-www-form-urlencoded”
context	Especifica o valor de “this” para todas as funções callback de AJAX relacionadas
data	Dados a serem enviados para o servidor
dataFilter(data,type)	Função usada para tartar os dados da resposta do XMLHttpRequest
dataType	O tipo de dados esperados na resposta do servidor.
error(xhr,status,error)	Função que é executada quando o pedido falha.
global	Valor booleano que especifica se deve acionar tratadores de eventos globais do Ajax para o pedido. Valor de defeito é true.
ifModified	Valor booleano que especifica se um pedido só é bem sucedido se a resposta mudou desde o último pedido. Valor de defeito é false.
jsonp	Uma string que se sobrepõe à função de callback num pedido jsonp.
jsonpCallback	Especifica o nome de uma função de callback num pedido jsonp.
method	Especifica o tipo de pedido (GET, POST, PUT ou DELETE). Valor de defeito: GET.
password	Especifica uma password a ser usada num pedido HTTP de autenticação.
processData	Valor booleano que especifica se os dados enviados no pedido devem ser transformados numa query string. Valor de defeito é true.
scriptCharset	Especifica o charset para o pedido
success(result,status,xhr)	Função a ser executada se o pedido fôr bem sucedido.
timeout	O timeout local (em milissegundos) para o pedido.
traditional	Valor booleano que especifica se deve ou não usar o estilo tradicional de serialização de parâmetros
type	Especifica o tipo de pedido (GET, POST, PUT ou DELETE). Esta propriedade é um alias da propriedade method e deve ser usada para as versões anteriores a 1.9.0. Valor de defeito: GET.
url	Especifica o URL para onde o pedido é enviado. Valor de defeito é a página currente.
username	Especifica o username a ser usado no pedido de HTTP de acesso de autenticação
xhr	Função usada para criar o objecto XMLHttpRequest

Exemplo 1:

Faz um pedido GET para obter os dados do ficheiro “demo_test.txt” e mostra-os na div com o id “div1”.

$("button").click(function(){ 
   $.ajax({url: "demo_test.txt", success: function(result){ 
      $("#div1").html(result); 
   }}); 
});

Exemplo 2:

Faz um pedido GET para o url ‘/jquery/getjsondata’ obtem dados no formato JSON e mostra-os num elemento <p>.

$.ajax('/jquery/getjsondata',  
{ 
   dataType: 'json', // type of response data 
   timeout: 500,     
   // timeout milliseconds 
   success: function (data,status,xhr) {   
      // success callback function 
      $('p').append(data.firstName + ' ' + data.middleName + ' ' + data.lastName); 
   }, 
   error: function (jqXhr, textStatus, errorMessage) { // error callback  
      $('p').append('Error: ' + errorMessage); 
   } 
});

Exemplo 3:

Envia dados no formato JSON, num pedido POST para o url ‘http://localhost:1337/api/form’:

$('form').submit(function (e) {
  e.preventDefault();
  const data = {
    name: $('#name').val(),
    email: $('#email').val(),
  };

  $.ajax({
    type: 'POST',
    url: 'http://localhost:1337/api/form',
    data: JSON.stringify(data),
    contentType: 'application/json',
  })
    .done((data) => {
      console.log({ data });
    })
    .fail((err) => {
      console.error(err);
    })
    .always(() => {
      console.log('always called');
    });
});