Índice
Objetivo
O objetivo desse guia é apresentar a integração de widgets com serviços JSON de outras fontes de dados, que estão fora do domínio do servidor Fluig. Utilizaremos a técnica de Json Padding - JSONP - para obtermos dados de terceiros com uma função de callback.
Problema
Se você chegou aqui é porque provavelmente estava desenvolvendo um widget e se deparou com uma mensagem similar a apresentada abaixo:
XMLHttpRequest cannot load http://pudim.com.br/service. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://pudim.com.br’ is therefore not allowed access.
Páginas web comuns podem utilizar o objeto XMLHttpRequest para enviar e receber dados de servidores remotos, porém as ações que essas páginas poderão realizar são limitadas pela política de mesma origem (same-origin policy).
Este é um conceito muito importante no modelo de segurança dos navegadores atuais, pois define que scripts de uma página "A" somente podem acessar dados de uma página "B" se ambas possuírem a mesma origem. A origem de uma página é definida pelo seu protocolo, endereço e porta.
Felizmente, nem tudo é afetado pela same-origin policy. Por exemplo, é possível carregar uma imagem externa ou um script de um domínio diferente da página atual. Entretanto, isso ainda não é o suficiente quando precisa-se obter dados JSON e exibi-los em um widget na plataforma Fluig.
JSONP pode ser a solução
JSONP (JSON with Padding) é uma técnica que disponibiliza uma forma de acessar os dados JSON que precisamos. Isto é feito através do empacotamento dos dados em uma função de callback (o "padding") que será interpretada pelo navegador em JavaScript. Esta função precisa ser definida no widget que receberá o retorno JSONP.
Exemplo
Veja abaixo um exemplo de uma chamada JSONP a um serviço fictício de terceiros:
displayPudimData: function(){ this.getPudimData(function(error, data){ if(error){ FLUIGC.toast({ message: 'Error getting pudim data: No dessert for you!', type: 'danger' }); return false; } // Use the variable 'data', Luke! }); } getPudimData: function(callback){ var options = { url: 'http://pudim.com.br/service', async: true, contentType: 'application/json', dataType: 'jsonp', loading: false }; FLUIGC.ajax(options, callback); }