Aprenda como utilizar AJAX, de forma simples.

Descrição: Executar uma requisição HTTP assíncrona por jQuery (AJAX).
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