GUJS

Nativamente não é possível fazer requisições ajax entre domínio diferentes. Por razões de segurança, isto é bloqueado pelos próprios browsers. Mas existe uma técnica que está sendo bastante utilizada para fazer ajax cross-domain, chamada JSONP.

JSONP é um método muito simples de usar, mas requer uma pequena colaboração do servidor que retornará os resultados da consulta. Na verdade, JSONP nada mais é que o próprio JSON sendo retornado de uma maneira um pouquinho diferente, com parênteses, e como se fosse uma chamada de uma função válida.

Alteração na requisição (client side)

Em vez de fazer uma requisição ajax comum, com o HTTPRequest, você utilizará o formato “script tag”, que é adicionar, via DOM, um script em sua página, assim:

function addScript(url) {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = url;
  document.getElementsByTagName('head')[0].appendChild(s);
}
addScript('http://outrodominio/retorna-jsonp.php');

Alteração no retorno (server side)

Imagine que o seu servidor retorne um código assim “{ok:’true’}”. Tudo que você precisa fazer é retornar assim “minhaFuncao({ok’:'true’})”. Dessa maneira, assim que a chamada for retornada a função “minhaFuncao” será chamada, passando por parâmetro o objeto que você retornaria utilizando JSON. Você pode ainda fazer com que esse tipo de retorno seja parametrizado, fazendo com que a função de retorno seja dinâmica. Veja um exemplo em PHP:

$callback = $_GET["callback"];

$ret = "{ ok:true }";

if (strlen($callback)) {
  print("$callback($ret)");
} else {
  print("json = $ret");
}

Para quem desenvolve aplicações web2.0 e disponibiliza APIs para os desenvolvedores, é bom ficarem ligados para oferecer esta opção de retorno também. E para quem desenvolve mashups, utilizando as APIs de outros serviços web2.0, é bom avaliar o uso deste formato, pois requisições JSONP podem lhe poupar muita banda à partir do momento que você não precisará mais fazer proxies no seu servidor para requisições em domínios diferentes.

Uma dica interessante é utilizar o mesmo método que você usa para fazer suas requisições ajax para fazer requisições JSONP também. O jQuery faz isso, o método getJSON faz uma chamada ajax normal (usando HTTPRequest) e também faz uma “script tag” se você passar o parâmetro “callback=?” na url. Facilita.

Ok, você deve ter percebido que, na verdade, este método que apresentei não se trata de Ajax. É verdade. O título deste artigo serve apenas para mostrar uma maneira alternativa de fazer requisições que você normalmente faria com ajax, se isto não fosse bloqueado pelos browsers.

Observe que é bom ter bastante cuidado com esse tipo de requisição, pois se o servidor que você está fazendo a chamada não for confiável, você poderá colocar seus usuários em risco. Mas este é o mesmo risco que você tem ao incluir scripts de outros sites na mão, como faz hoje com o Google Maps, AdSense, Analytics… e o mesmo risco que você teria se o ajax cross-domain fosse permitido.

Para concluir, disponibilizo um pequeno exemplo de requisição cross-domain utilizando o framework jQuery, que em sua nova versão já tem este recurso de forma nativa (exemplo de requisição cross-domain usando o jQuery) e alguns links com maiores informações:

• Remote JSON - JSONP
• Look Ma, Cross-Domain Scripting!
• Release:jQuery 1.2/Ajax

This entry was posted on Sexta-feira, Setembro 21st, 2007 at 14:44 and is filed under Ajax, Tutoriais Avançados, Técnicas. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.