RSS4/6/2009 | Tags:api, datatables, JavaScript, webservice, xpath, yahoo!, yql | Escrito por: Dirceu Pauka Jr.
Meu último post foi uma tentativa de explicar o funcionamento da Yahoo Query Language. No final falei da possibilidade de se fazer um Widget do Submarino com a YQL e agora volto para implementar o prometido.
YQL
Como eu disse existe um post explicando a YQL, porém aqui vai uma explicação rápida:
A YQL pode ser usada para buscar dados nas APIs do Yahoo (Flickr, Delicious, Placemaker, Maps, …), nas APIs do DataTables (Twitter, Amazon, GeoLocation, …) ou em qualquer outro documento da web (página HTML).
Para mostrar como a busca em um documento qualquer da web é feita, escrevi o seguinte código:
Para testar use o console da YQL ou veja teste dessa busca. O YQL vai retornar o conteúdo pedido em XML ou JSON.
JSONP
“JSON with Padding” é uma técnica que permite o carregamento assíncrono de informações de um domínio externo.
Toda biblioteca de JavaScript que se preze possui um método para esse procedimento.
jQuery: $.getJSON(url, function(data) { // callback });
MooTools: Request.JSON([options]);
A implementação desse tipo de requisição é bem simples.
Sabemos que o retorno de um arquivo chamado pela tag script é imediatamente executado pelo interpretador JavaScript.
Também sabemos que um objeto em JS pode ser representado por {} e pode conter pares de chave/valor. Ex: var Objeto = { chave: ‘valor’ };
Assim sendo, o que precisamos agora é que o conteúdo de um arquivo que vai ser requisitado utilizando a tag script seja uma chamada a nossa função previamente declarada.
Atente que ao contrario do xhttprequest o elemento HTML script não possui limitações quanto ao domínio que a requisição pode ser feita. Porém, para que a técnica funcione é necessário que o servidor requisitado retorne (em texto puro) uma chamada para nossa função.
Requisição:
http://pomoti.com/arquivo.php?callback=recebe_json
PHP simples para retorno:
echo $_GET['callback'] . ‘( {chave: “valor”} )’;
Retorno:
recebe_json( {chave: ‘valor’} );
Todos webservices que queiram trabalhar com JSON devem, então, aceitar um parâmetro para envio de callback.
Widget do Submarino
Fundamentadas as técnicas necessárias para a implementação vamos ao código.
// tentando duas querys diferentes. a estrutura do submarino pode ser alterada e isso evita quebrar
getJSON(query1);
}
function getJSON(query) {
// monta a requisição REST
var url = ‘http://query.yahooapis.com/v1/public/yql?q=’+
encodeURIComponent(query)+
‘&format=json’+
‘&callback=Submarino.recebe’;
// se tag head não existir, cria uma para evitar problemas
if (!document.getElementsByTagName(’head’)[0]) {
document.getElementsByTagName(’body’)[0].appendChild( document.createElement(’head’) );
}
// adiciona o elemento
