analytics

segunda-feira, 21 de janeiro de 2013

Novo Site Alfamídia: Lendo dados de outros domínios com JSONP

Pretendemos publicar aqui algumas das técnicas e recursos utilizado no desenvolvimento do site da Alfamídia.

Contexto

   O site Alfamídia utiliza Ajax e JQuery (com o framework Knockout) para acessar diversos dados de um aplicativo rodando em C# em um servidor.
 
Problema

   Para fazermos uma migração suave do site anterior, colocamos a página principal rodando no servidor atual do site alfamídia (domínio www.alfamidia.com.br), e os dados sendo fornecidos por um servidor rodando em outro local da internet e, portanto, com outro domínio.

   O problema é: o acesso aos dados era feito por JSON e leitura simples de páginas html por ajax (em jquery: .load e .getJSON). Ambas, alternativas que não podem ser realizadas se o domínio acessado é diferente do domínio da página em que o Javascript está rodando.

A Solução

   Substituir todas as chamadas AJAX em formatos html puro e JSON para chamadas em JSONP.

   JSONP nada mais é que uma forma alternativa de ler dados em JSON que permite acessar dados de outros domínios. Vale olhar na internet uma explicação mais detalhada, aqui apresentamos apenas a implementação:

Mudanças na chamada do JSON:
   Chamadas: ao invés de

      "$.getJSON(""+baseSite+"/calendario.aspx?" + newValue, function (allData)"

   passaram a ser
 

      "$.getJSON(""+baseSite+"/calendario.aspx?" + newValue + "&callback=?", function (allData)"

   O parâmetro "callback=?" é o suficiente para o JQuery saber que será uma chamada usando JSONP.

Mudanças na entrega do resultado, pelo servidor:

   Abaixo o exemplo de enviar o HTML como JSONP (em C#). O raciocínio é o mesmo se a entrega já era em JSON:

           //Primeiro lemos o parâmetro "callback".  EntradaSaida.Recebe é uma biblioteca interna da Alfamídia para receber parâmetros.
            string strCallback = EntradaSaida.Recebe("callback");

            //JSON não aceitará novas linhas, então transformamos em código HTML
            string strJ = strRetorno.Replace(((char)(13)).ToString(), "<BR>");

            //Criamos um JSON, com um único valor, que é o próprio documento HTML
            string strOut = "{\"html\":\"" + strJ + "\"}";

            //Enviamos o JSON encapsulado dentro de uma função javascript, cujo nome recebemos por parâmetro.
            Content.Text = strCallback + "(" + strOut + ")";


Observações Importantes:

   Se você já está entregando os conteúdos em JSON, não há maiores mudanças.
   Se, porém, estava entregando em HTML, há a necessidade de garantir que o código entregue seja com a sintaxe JSON válida. Isto significa que você deverá substituir novas linhas (como mostrado) e caracteres " (que não está mostrado, mas é igualmente um simples código Replace).


Nenhum comentário:

Postar um comentário