(Parte 2) Requisição AJAX utilizando a função $.ajax() com PHP

(Parte 2) Requisição AJAX utilizando a função $.ajax() com PHPNesta parte darei continuidade na série de artigos sobre requisições AJAX com jQuery, para os iniciantes é interessante ler esse primeiro artigo sobre Introdução a requisições AJAX.
Nesse artigo vou falar sobre a função $.ajax() que é disponibilizada pela biblioteca jQuery. Essa função carrega uma página remota usando uma requisição HTTP é a mais completa entre os 5 tipos de requisições que serão explicados nessa série de artigos, pois a mesma oferece um conjunto de funcionalidades que não estão disponíveis nos tipos de requisições ($.get(), $.post(), $.getJSON() e $.getScript()), mesmo esses outros tipos sendo na verdade derivados da função $.ajax().
 
Alguns posts sobre AJAX que podem interessar:
 
A sintaxe básica $.ajax(opções), abaixo será detalhado as principais opções desse tipo de requisição:
 
async: Valor default é TRUE o que torna todas as requisições assíncronas (executado simultâneamente), se for alterado para FALSE as requisições serão síncronas (não simultâneo). Basicamente não existe sentido em efetuar requisições síncronas com AJAX.
Exemplo:

 
beforeSend: Seu valor é uma função para modificar o objeto XMLHttpRequest antes do envio, geralmente utilizada para enviar cabeçalhos HTTP personalizados ou pode chamar a exibição de uma animação gif.
Exemplo:

 

cache: Valor default é TRUE, se for definido com FALSE força as páginas solicitadas a não serem armazenadas em cache do browser, essa ação só funciona corretamente para cabeçalhos e requisições do tipo GET.
Exemplo:

 
complete: Seu valor é uma função chamada quando a requisição termina, independente se ocorrer um erro ou sucesso. Essa função aceita 2 argumentos, primeiro o objeto XMLHttpRequest e segundo uma string definindo o status de como foi finalizada a requisição (“success”, “notmodified”, “error”, “timeout”, “abort”, or “parsererror”).
Exemplo:

 
data: Esta chave recebe os dados que serão enviados ao servidor, esse dados serão automaticamente convertidos em uma query string e anexados à URL quando a requisição for do tipo GET. 
Exemplo:

 
dataType: O valor é tipo de dados esperado como retorno pelo servidor, abaixo os tipo aceitos:

xml – Retorna um documento XML a ser processado.
html – Retorna um documento HTML como texto puro.
script – Processa a resposta como JavaScript e retorna o resultado como texto puro.
json – Processa a resposta como JSON e retorna o resultado como um objeto JavaScript.
jsonp – Semelhante ao json, mas admite requisições a outros domínios desde que estes as permitam.
text – Retorna uma string em texto puro.

Exemplo:

 
error: Seu valor é uma função a ser chamada quando ocorre uma falha na requisição. Essa função admite 3 argumentos, primeiro o objeto XMLHttpRequest, segundo uma string descrevendo o tipo de erro (“timeout”, “error”, “abort” e “parsererror”), o terceiro argumento é um objeto opcional caso ocorra.
Exemplo:

Observação: Somente a função $.ajax() possui esse tipo de tratamento de erro, as demais funções não suportam essa funcionalidade.

 
success: Seu valor é uma função a ser executada quando a requisição se completa com sucesso. Essa função admite 2 argumentos, primeiro são os dados retornados no formato informado no parâmetro dataType e o segundo uma string descrevendo o status. 
Exemplo:

 
type: Valor default é GET esse valor define o tipo de requisição, geralmente as requisições são do tipo GET e POST, existem ainda outros tipos como PUT e DELETE mas esses tipos não são suportados por diversos navegadores.Exemplo:

 
url: O valo dessa chave é a URL para onde será enviada a requisição.

Exemplo:

Bom pessoal acima listei algumas opções que a função $.ajax() suporta, mas existem outras opções que podem ser estudadas na documentação oficial da biblioteca jQuery.
 

Consulta com $.ajax() e PHP

Agora vamos a um exemplo prático, como essa função possibilita um tratamento mais amplo da requisição com diversas opções, elaborei um exemplo que abrange algumas das funcionalidades que foram listadas acima. 
 
Desenvolvi uma consulta de pontos turísticos, onde será selecionado um determinado país no select e pressionado o botão carregar imagens que dispara uma requisição com a função $.ajax() para retornar uma tabela HTML. Será executada uma consulta no banco por país e será construída uma tabela contendo TAGs com o caminho para carregarem as imagens e algumas informações extras sobre o ponto turístico, exemplo bem simples.

Abaixo script SQL para criar o banco de dados e a tabela.

Após a construção do banco de dados temos que criar a classe PHP para se conectar ao banco de dados:

conexao.php

Post relacionado:  Sistema de Login com AJAX e PHP - Blindado

O próximo passo é construir a classe que vai manipular os dados da tabela TAB_IMAGEM, nesse caso somente consultas. Essa classe possui 4 métodos sendo 1 método construtor,  2 métodos de consulta e 1 método para construir a tabela que será retornada para a página principal após a requisição AJAX ser enviada. O método getTabelaImagens() é responsável em construir a tabela HTML com os dados da consulta, se nenhum registro foi retornado do banco de dados então será enviada uma mensagem estilizada com CSS avisando que não existem imagens para aquele país.

imagens.class.php

 
Para separarmos as responsabilidades, vamos criar um script controllerImagem.php que será responsável por receber a requisição e devolver os dados solicitados, esse script vai fazer o meio campo entre a página index.php e a classe que manipula os dados.
controllerImagem.php

Agora vem a página index.php que será exibida no navegador, ao selecionar um pais e clicar no botão “Carregar Imagens” será disparado o evento Click e consequentemente será enviada a requisição usando a função $.ajax().

Observem que só será enviada a requisição se for selecionado no SELECT um valor diferente de ‘0’, na opção beforeSend mandei exibir uma animação gif enquanto a requisição não é completada e na opção error formatei o conteúdo da mensagem de erro caso a mesma precise ser exibida na página, todas as opções foram explicadas acima. Estou usando a versão da biblioteca jQuery do próprio google, setando a URL: //ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js, mas se for o caso podemos baixar essa biblioteca diretamente no site jQuery  e trabalhar localmente.

index.php

 

Para finalizar, vamos estilizar essa página com um pouco de CSS:

estilo.css

Depois de tanto trabalho vamos aos testes .. rsrsrsr

Página inicial sem ativar o filtro:

 
 

Selecionando um país e pressionando o botão Carregar Imagens:

 

Selecionando um país que não tem imagens cadastradas no banco de dados:

 
Bom pessoal, infelizmente não é possível observar pelas imagens que a página não dá o famoso refresh quando é clicado no botão Carregar Imagens, mas a intenção desse exemplo é mostrar como carregar o conteúdo dinamicamente utilizando as várias opções que a função $.ajax() disponibiliza. Talvez essa função seja complexa se comparada com as funções $.get() e $.post, porém ela proporciona a possibilidade de customizarmos vários aspectos da requisição, tratamento de erros, mensagens de aviso e tipos de retorno.
 
Até a próxima …
Show Buttons
Hide Buttons