Todos sabemos que não é possível fazer requisições a servidores externos utilizando javascript, por motivos de segurança. No entanto, existe uma tecnologia que nos permite fazer isso. É uma certa gambiarra, mas funciona muito bem obrigado.
Se eu quero, por exemplo, pegar a public timeline do Twitter via AJAX com jQuery, eu não posso fazer isso:
$("#twits").load("http://twitter.com/statuses/public_timeline.json")
Se eu rodar este código, irei receber o seguinte erro:
“Access to restricted URI denied”
Isto porque o javascript não permite que se façam requisições para outros servidores. No entanto, se utilizarmos o padrão JSONP, podemos sim fazer requisições a outros servidores, claro que a API que iremos utilizar irá precisar ter o suporte a JSONP, o que acredito que a maioria já tenha.
Confira então este exemplo que fiz, utilizando a API do Twitter e JSONP.
Como podem ver, trata-se de um exemplo simples, que chama a API do Twitter para obter a “public timeline”, utilizando apenas javascript e JSONP.
Como funciona?
JSONP, ou “JSON with padding”, é um padrão, proposto inicalmente por Bob Ippolito, para obter informações de servidores externos usando apenas Javascript.
O padrão consiste em tornar o código JSON um código Javascript válido. Basicamente quando chamamos o servidor externo e informamos que queremos o padrão JSONP, o servidor irá remotamente atribuir uma script tag no nosso documento, de forma que os dados no formato JSON sejam avaliados corretamente.
Assim é possível buscar dados de uma API no formato JSON sem precisar de um backend local.
Gostou? Então baixe os arquivos do exemplo e divirta-se.
Links úteis
- Proposta do JSONP
- Twitter API Wiki
Espero que o artigo tenha sido útil para vocês. Estudem, divirtam-se, e fiquem ligados no Screencaster.