JSONP e o “Ajax Crossdomain”

Alexander Borges — Thu, 15 Apr 2010 02:02:10 +0000

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 “” 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:

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.

A fronteira final » AJAX