(Parte 5) Requisição AJAX utilizando a função $.getJSON() com PHP

(Parte 5) Requisição AJAX utilizando a função $.getJSON() com PHPOlá pessoal, dando continuidade na série de artigos sobre requisições AJAX com o auxílio da biblioteca jQuery, hoje irei escrever sobre a função $.getJSON(). Essa função é semelhante a $.get() mas tem como diferença o formato de dados que é aceito como retorno, somente JSON
 
Pelo nome da função já podemos observar que se trata de uma requisição que retorna dados no formato JSON ela também utiliza o método HTTP GET. Essa função é muito simples de se utilizar, não possui a complexidade da função $.ajax() mas também não suporta customizações durante o envio e recebimento dos dados.
 
Outros posts sobre AJAX que podem interessar:
 
Mas pode surgir a pergunta!
 
O que significa esse formato JSON?
JSON (JavaScript Object Notation) formato de dados leve em texto e independente de plataforma. Pode ser utilizado para troca de dados em praticamente todas as linguagens de programação. Sua estrutura é de fácil leitura e escrita para humanos, as máquinas também tem facilidade em interpretar e gerar. Basicamente a estrutura de dados em JSON se constitui em uma coleção de pares nome/valor e uma lista ordenada de valores. Exemplo:

Para mais informações sobre o formato JSON acessem o site oficial json.org.

 
Agora que já temos uma breve definição sobre o formato JSON, podemos dar continuidade na explicação sobre as funcionalidades da função $.getJSON().
Sintaxe básica: $.getJSON(url[,data][,success(data, textStatus, jqXHR)])
 
url:  Essa chave recebe uma string com a URL para onde será enviada a requisição, essa chave é obrigatória.
Exemplo:

 
data: Essa chave recebe os valores que serão enviados para o servidor junto com a requisição, são aqueles dados que geralmente enviamos junto com a URL, chave opcional. 
Exemplo:

 
success: Seu valor é uma função que será executada quando a requisição for completada com sucesso. Essa função aceita 3 argumentos, sendo o primeiro os dados retornados pela requisição, segundo uma string contendo o status e terceiro um objeto XMLHttpRequest, função opcional.
Exemplo:

 

Consulta com $.getJSON() e PHP

Nosso exemplo tem como objetivo preencher o SELECT (cmbTitulo), com os títulos das imagens gravadas no banco, mas dessa vez a requisição vai receber dados no formato JSON e posteriormente formatá-los em HTML na própria página index.php. Existe um método na classe imagem (getTitulosImagem()) que retorna uma array de dados contendo os títulos que foram filtrados.

Para facilitar vamos aproveitar a estrutura que estamos utilizando desde o início dessa série de artigos, mas  vou retirar o código da classe image que é desnecessário para esse artigo. Foram realizadas alterações em 2 scripts:

1 – controllerImagem.php: O retorno para requisição AJAX agora é encodificado no formato JSON, utilizando a função json_encode(), o método chamado é o getTituloImagem($pais).

2 – index.php: Agora está sendo utilizado a função $.getJSON(), observem que no artigo $.get() a requisição já recebia formatado o código HTML, agora primeiro recebemos o conteúdo em JSON e posteriormente formatamos com auxílio do jQuery.

conexao.php

imagem.class.php

Post relacionado:  Veja como é fácil consultar CEPs e carregar dinamicamente o endereço nos campos do seu formulário usando AJAX e jQuery

 
Observem abaixo o script controllerImagem.php, o valor esperado para variável $acao é “preencher_titulo” e para variável $pais será enviado o pais que desejamos filtrar, essa string será enviada pela requisição $.getJSON() através da opção data. Será chamado o método getTituloImagem($pais), o retorno desse método será formatado em JSON com o auxílio da função json_encode() e devolvido para requisição AJAX.
controllerImagem.php

Abaixo segue o código HTML da página index.php que será exibida no navegador, observem que a requisição $.getJSON() será disparada no evento Change do SELECT que contém os países. A função $.getJSON() está recebendo as 3 opções:
url -> “controller/controllerImagem.php”
data -> { acao: ‘preencher_titulo’, pais: valorPais }
success -> function(data){}

index.php

 

Agora vamos estilizar a página com CSS:

estilo.css

Antes de exibir o resultado final que não é diferente dos artigos anteriores, na imagem abaixo segue o retorno em JSON gerado quando enviamos uma requisição filtrando os registros pelo ‘Brasil’:

 

Agora vamos aos testes, página inicial sem ativar o filtro:

 

Selecionando um país será carregado o SELECT “Títulos Filtrados“:

 

Ao Selecionar um país que não tem imagens, o SELECT “Títulos Filtrados” é carregado com o valor “Sem imagens cadastradas”:

 
Bom pessoal, nesse artigo demonstrei algumas características da função $.getJSON(), que tem como objetivo auxiliar nas requisições AJAX. É visível a semelhança com a função $.get() porém com o retorno sempre no formato JSON. Como esse formato é extremamente leve é muito comum encontrar WebServices na WEB que disponibilizam serviços com retorno em JSON. Vale a pena salientar que as funções $.get(), $.post(), $.getJSON e $.getScript() possuem um efeito colateral em seu uso, se o arquivo requisitado não estiver disponível a requisição possivelmente não será encerrada, já na função $.ajax() existe uma verificação de erros o que impede esse tipo de problema.
 
É sempre bom mencionar que, graças a biblioteca jQuery temos tantas facilidades para a utilização de diversas funções para requisições AJAX, pessoalmente acho que trabalhar com o objeto XMLHttpRequest puro. pode ser trabalhoso.
 
Até a próxima …
Show Buttons
Hide Buttons