JSONP e o “Ajax Crossdomain”
Os serviços para intercâmbio de dados entre aplicações via protocolo http alcançaram algum nível de maturidade nesses últimos anos. Hoje, já sabemos como disponibilizar serviços via web, já existem abordagens que funcionam, outras vão sendo experimentadas. O fato é que existem diversas APIs disponíveis na web para atender as mais variadas necessidades: Agenda, mapas, autenticação de usuários, integração com redes sociais, enfim. Serviços públicos, serviços pagos, serviços com mais de um plano de licensiamento para atender mais de um tipo de consumidor. Hoje qualquer um pode criar sua api e colocar na web e ganhar (se quiser) seu dinheirinho com aquilo.
Em meio às tecnologias para troca de dados e comunicação entre aplicações pela web como REST, SOAP, WSDL etc, se destacam também as APIs que fornecem dados com simples requisições http diretamente do site via browser, sem a necessidade de processamento do lado do servidor pelo cliente do serviço. Para esses casos temos o JSONP como uma alternativa “bem em conta” para resolver problemas conhecidos. O objetivo desse post é dar uma introdução do que é e como usar o JSONP.
AJAX vs JSONP
Tecnicamente, JSONP não é AJAX, vamos a uma explicação bem breve da diferença:
AJAX se trata de requisições assíncronas por meio dos objetos XMLHttpRequest e XMLHttpResponse, que trafegam dados no formato XML ou texto puro. Esses dados são manipulados pelo programa javascript, que finalmente monta seus trechos de html sem a necessidade do recarregamento da página.
Já o JSONP requisita dados de forma assíncrona, assim como o AJAX, porém não utiliza os objetos XMLHttp e só trabalha com objetos no formato JSON.
JSON – JavaScript Object Notation
Formato de dados que vem sendo fortemente utilizado para transporte de dados entre aplicações, principalmente web. Está ganhando seu espaço devido a sua simplicidade de implementação e leveza. É um subconjunto das notações de objetos javascript. Além disso, a manipulação dos dados em um objeto JSON requer um parse simples (usando o método eval do javascript) e não se faz necessária a navegação por DOM entre os nós e atributos de um XML, e por isso a preferência pelo JSON ao invés de XML para ajax na web.
Same Origin Policy
Existe uma limitação para o uso do Objeto XMLHTTPRequest no que se trata de requisições entre diferentes sites. Existe um padrão de segurança, implementado por linguagens de programação, nesse caso o javascript, chamado Same Origin Policy, ou Política de Mesma Origem. Essa recomendação de segurança impede que um documento leia ou envie informações para outra origem.
São considerados de origens diferentes quaisquer documentos que estejam em domínios diferentes, portas diferentes ou que utilizem protocolos de comunicação diferentes entre si.
Considerando a url: “http://www.afronteirafinal.com/”, podemos ter requisições que irão ter sucesso ou falhar nas seguintes situações:
http://www.afronteirafinal.com/diretorio/pagina.html
Funciona, pois é uma requisição para o mesmo host usando o mesmo protocolo e pela mesma padrão, ou seja, dentro do mesmo site.
https://www.afronteirafinal.com/pagina.html
Não funciona, pois protocolos diferentes representam origens diferentes (“http”,”https”);
http://www.afronteirafinal.com:81/pagina.html
Não funciona, pois portas diferentes também representam origens diferentes (“porta 81″);
http://www.outrosite.com/pagina.html
Também não funciona, pois se tratam de hosts diferentes;
JSONP – JSON with Padding
JSONP é entendido como um “pseudo-protocolo” que permite realizar requisições http e trafegar dados no formato JSON entre documentos de origens diferentes.
Como funciona:
A implementação do JSONP e bastante simples, porém é necessário que o serviço responsável pela entrega os dados forneca a opção de entrega na estrutura necessária para que os dados possam ser manipulados.
Não existem restrições para o carregamento de imagens e scripts de outras origem, por meio do atributo “src” das tags. A técnica por tras do JSONP se aproveita dessa possibilidade para carregar scripts externos conforme a necessidade, manipulando o DOM da página.
O que faz acontecer o JSONP é a inclusão de uma TAG “script” no header “<head>” da página. Essa tag “script” recebe um atributo “src” apontando para o site externo, que responde objetos no formato JSON , esse resultado é “parseado” e fica disponível para manipulação via JavaScript.
O que é o “padding”?
Padding ou prefix é o nome passado na requisição ao serviço, para que na resposta o método envolva os dados em formato JSON após a resposta. Quando a requisição é feita dessa forma:
<script type="text/javascript" src="http://domain1.com/getjson?jsonp=parseResponse" target="_blank"></script>
A palavra “parseResponse” será a o nome da função que envolverá o json, como um callback. O resultado será algo parecido com isso:
parseResponse({“name”:”Jujuzinho”, ”idade”:10, brinquedos:[“bola”,”pipa”,”ioiô”]})
Você, como um esperto desevolvedor, já terá declarado esse método (parseResponse) em seu programa, e este saberá como sabiamente utilizar os dados recebidos.
Suporte nos frameworks
Os frameworks JavaScript geralmente dão um bom suporte às implementações do JSONP, resolvendo a maioria das questões que teríamos que nos preocupar fazendo tudo “na unha”.
No caso do jQuery, ele abstrai as particularidades entre jsonp e ajax e incorpora o JSONP com mais um formato de dados para o seu objeto Ajax.
Em caso de dúvidas, primeiro procure a documentação do framework porque certamente ele trará informações de como implementar jsonp sem mais traumas.
No próximo episódio…
No próximo post sobre o assunto falaremos sobre o futuro. Como será feito o transporte de dados pela web. Protocolos de comunicação de verdade para rodar no browser. Que projetos já estão em andamento e como eles poderão resolver problemas que travam o avanço da comunicação entre apps web.
| 
| 
| 
| 
| 
| 
Bacana o post sobre o jsonp mas acho que a explicação do src está um pouco equivocada. Não que esteja incorreto, mas do jeito que foi escrito, você enfatiza que só pelo src dá pra se fazer requisições jsonp, o que não é verdade.
Requisições AJAX são bloqueadas pelo navegador (js, como foi informado).
Se eu informar ao navegador que meu site aceita requisições ajax então ele permite o intercambio de informações entre meu site e outro dominio diferente.
No PHP, adicionando simplesmente dois cabeçalhos na página é permitido realizar ajax a página em questão:
header(‘Access-Control-Allow-Methods: GET’);
header(‘Access-Control-Allow-Origin: *’);
O primeito informa que serão aceitos somente requisições GET. Dados POST não serão permitidos.
O segundo cabecalho diz que pode ser de qualquer tipo, o que inclui o XMLHTTPRequest.
É fácil fazer, e pode ser implementado em outras linguagens adicionando esse cabecalho.
Só postei mesmo porque andei pesquisando em como criar uma API que aceite o JSONP e encontrei esses cabeçalhos na internet.
Ótima explicação do post… continue assim mesmo pra poder ter onde pesquisar quando tiver dúvidas.
Abraços.
Caro Alan Tavares,
Em breve teremos algumas mudanças no blog e os posts serão mais frequentes.
Bacana sua observação. O recurso do header para controle de acesso é sem dúvida a solução ‘limpa’ para resolver requisições crossdomain. O problema é que ainda não é suportado por todos os browsers.
É uma recomendação do W3C que agora chegou a uma certa maturidade. Os browsers começaram a suportar esse recurso, mas ainda não funciona em todos eles (É, IE8 ainda não da suporte :\).
Recomendo esse post bem legal sobre o assunto: http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
Desculpa pela demora para responder. Estamos trabalhando para melhor atendê-los
Abs.
[...] [...]
[...] para manipular o DOM; Google Feed API para ler o RSS do Blog em JSON com padding; API’s JSONP do Twitter, Flickr e Vimeo; e Ruby On Rails como [...]
[...] com dados assíncronos utilizando JSONP. Uma referência de Ajax e JSONP pode ser encontrada aqui. Vamos a sintaxe do JSON: No nosso projeto queremos uma coleção de posts, e cada post terá um [...]
Boa tarde!
Tenho uma dúvida..
Estou criando uma página em PHP, logo após entrar, faço aparecer uma janela em fancybox que pergunta o idioma que o usuário deseja. Esse fancybox carrega outro arquivo PHP por dentro.. Ao clicar no idioma desejado, quero que carregue na parent a página corresponde, usando ajax… Para fazer isso eu precisaria de jsonp?
Outra informaçao… Quero criar um cookie que memorize o idioma que o usuário escolheu, desta forma a janela só aparecera na primeira vez. Se ele quiser mudar o idioma deve clicar na barra de iriomas e mudar voluntariamente
Bom , talvez não tenha nada haver, mas eu pensei nisso porque pesquisei no google äjax entre domínios diferentes” e apareceu esta página.
Não são exatamente domíniuos diferentes que eu pretendo usar, é o mesmo domínio. Porém são páginas diferentes alocadas na mesmo servidor (index.php e idiom.php) e fazendo pela tentativa de usar só o ajax eu não consegui… talvez pleo jsonp fosse a saída
eu fiz uma logica
if idioma = ingles – dentro da div body dar um load do idioma por denrto..
Assim eu fiz com todos..
Espero resposta!
Caro Felipe, blz? Como as requisições sao feitas dentro da mesma origem, não ha necessidade.
Voce teria que usar jsonp se no seu projeto se a comunicaçao com o php do usuário usa ssl, é o caso? Quanto aos cookies, se me permitir o pitaco… Ja pensou em usar um subdominio para cada idioma? Abs.
Realmente, se não sao dominios diferentes, realmente não ha restrição. Abs.