O que é AJAX?
O AJAX, sigla para Asynchronous Javascript and XML (Javascript Assíncrono e XML), é uma tecnologia que usa, metodologicamente, técnicas como javascript e XML para solicitar, de forma assíncrona, informações e tornar a página mais interativa. Com AJAX, é utilizado o método XMLHttpRequest.
Foi inicialmente desenvolvida pelo estudioso Jessé James Garret e mais tarde por diversas associações. Apesar do nome, a utilização de XML não é obrigatória (JSON é frequentemente utilizado) e as solicitações também não necessitam ser assíncronas.
O AJAX, geralmente é utilizado para buscar algo no servidor, por exemplo, um arquivo PHP faz determinada ação no banco de dados e retorna algo. O AJAX pode executar este script, e receber o que ele retornar sem atualizar a página atual nem uma vez.
Neste tutorial, você aprenderá a usar AJAX com jQuery, usando a função jQuery.ajax(); com as propriedades:
url, type, data, beforeSend, success, error.
O AJAX com jQuery possui várias funções, mas a jQuery.ajax(); executa o que todas as outras podem fazer.
No exemplo, ao clicar em um botão, o AJAX deve consultar o script.php, passando via POST o botão que foi clicado. O PHP analisa este botão, requisita do servidor a global $_SERVER[] e retorna o valor. O AJAX pega este valor e, sem atualizar a página nenhuma vez, o coloca na div #result.
Para começar, precisamos cancelar a função do botão (o botão já não faz nada, mas, mesmo assim, vou mostrar para o caso de você preferir usar um link):
Portanto, ao clicar no botão, sua ação deve ser bloqueada. Isso fica assim:
$(".botao").click(function( ev ){
ev.preventDefault();
});
Agora, o link já não pode mais fazer nada.Depois de clicar no botão, as requisições AJAX devem começar. Vamos então declarar a função jQuery.ajax(); ou $.ajax();
$.ajax();Esta função, receberá parâmetros de uma forma não muito utilizada. Vamos colocar chaves dentro dos parênteses desta função:
$.ajax({});dentro destas chaves, começamos uma lista, seguindo o padrão:
$.ajax({
propriedade: 'valor',
propriedade2: 'valor2',
ultimaPropriedade: 'valor3'
});
Vamos usar 6 propriedades. Segue a lista:
url: (string): Nesta propriedade, você deve especificar o caminho para o arquivo que o AJAX vai procurar. (Obrigatória)
type: (string): Especifica o método (POST ou GET) que o AJAX vai utilizar. (O padrão é GET)
data: (objeto ou string ou array): É onde você passa os dados ao url pelo método type. Geralmente, nesta propriedade, utilizamos as chaves e a lista de dados (um exemplo mais abaixo).
** Requisição feita, agora vamos controlar isso:
beforeSend: (function): Função que será executada antes da requisição AJAX (no exemplo, foi usada para o "loading").
succes: (function): Função que será executada caso a requisição seja um sucesso.
error: (function): Função executada caso algum erro ocorra.
No geral, as funções acima vão ficar assim dentro do $.ajax();:
$.ajax({
url: 'script.php',
type: 'POST',
data: { /* será passado via POST. No PHP fica: $_POST['post1'] retorna 'valor post1' e $_POST['post2'] retorna 'valor post2' */
'post1':'valor post1',
'post2':'valor post2'
},
beforeSend: function() {
//função para antes de enviar
},
success: function() {
//função para quando houver sucesso
},
error: function(){
//função para quando houver um erro.
}
});
Agora basta preencher cada uma de acordo com as descrições que deixei acima.
Para fazer um efeito semelhante ao do vídeo, deve-se executar o ajax quando o botão for clicado, atribuir o name do botão em uma variável, passar via POST o nome deste botão. O PHP recebe, e retorna com um echo o valor. O jQuery recebe o que esse echo imprimiu. Na propriedade beforeSend, atribua à div uma imagem de carregamento. Na success, o HTML que veio de script.php. Em error, a imagem de
Links
Links que auxiliam na compreensão e aprofundamento
jquery.com | Site oficial da biblioteca jQuery
api.jquery.com | Site oficial da documentação da biblioteca jQuery
jQuery.ajax() | jquery.com - A função $.ajax();
(As propriedades url, type, data, beforeSend, success e error podem ser conferidas no link acima)
O que é AJAX? | Wikipédia, a enciclopédia livre.
--
Não deixe de comentar. Se você aprendeu alguma coisa, dê um like no vídeo. Se não aprendeu, pergunte nos comentários e dê um like no vídeo.
Críticas construtivas, sugestões educadas e reclamações pacíficas nos comentários.
Autor: Héliton Martyns
Nenhum comentário:
Postar um comentário