Vou fazer uma repassagem bem rápida sobre requisições AJAX cross-domain utilizando jQuery 1.5 e JSONP. É bem simples.
Um problema comum para quem usa Ajax é que, por questões de segurança, não podemos fazer requisições comuns entre domínios e até subdomínios diferentes. Isso inclui problemas de requisições entre protocolos http:// e https://.
O JSONP é simples um json with padding, nada mais é que um código javascript simples com prefixo que servirá de namespace para um objeto literal através de uma função.
Veja um exemplo simples, como um muito interessante obtido com as fotos mais recentes no Flickr:
jsonFlickrFeed({ "title": "Uploads from everyone", "link": "http://www.flickr.com/photos/", "description": "", "modified": "2011-03-16T01:55:40Z", "generator": "http://www.flickr.com/", "items": [ { "title": "MCBP1.jpg", "link": "http://www.flickr.com/photos/periodik/5530443839/", "media": {"m":"http://farm6.static.flickr.com/5091/5530443839_8d4cfcbbe1_m.jpg"}, "date_taken": "2011-03-15T17:12:44-08:00", "description": " <p><a href=\"http://www.flickr.com/people/periodik/\">acadieux03<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/periodik/5530443839/\" title=\"MCBP1.jpg\"><img src=\"http://farm6.static.flickr.com/5091/5530443839_8d4cfcbbe1_m.jpg\" width=\"240\" height=\"160\" alt=\"MCBP1.jpg\" /><\/a><\/p> ", "published": "2011-03-16T01:55:40Z", "author": "nobody@flickr.com (acadieux03)", "author_id": "56824292@N07", "tags": "" }, { "title": "Vandalism", "link": "http://www.flickr.com/photos/dancingastronaut/5530443865/", "media": {"m":"http://farm6.static.flickr.com/5016/5530443865_0648a9201b_m.jpg"}, "date_taken": "2011-03-11T01:29:27-08:00", "description": " <p><a href=\"http://www.flickr.com/people/dancingastronaut/\">dancingastronaut<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/dancingastronaut/5530443865/\" title=\"Vandalism\"><img src=\"http://farm6.static.flickr.com/5016/5530443865_0648a9201b_m.jpg\" width=\"240\" height=\"159\" alt=\"Vandalism\" /><\/a><\/p> <p>TORQ presents Vandalism at Ruby Skye, San Francisco.<\/p>", "published": "2011-03-16T01:55:41Z", "author": "nobody@flickr.com (dancingastronaut)", "author_id": "53691206@N02", "tags": "sanfrancisco california girls party music house club night lights dance dj photoshoot dancing stage hound event turntables vandalism electro nightlife interview djs rubyskye dubstep blowup cdjs dancingastronaut dancingastronautcom" } ] }) |
Veja que há um objeto javascript no formato padrão de um json dentro de um método jsonFlickrFeed. Não há a definição dele, quem cria isso é o próprio jQuery que vai buscar exatamente o seu argumento, que é o objeto.
No nosso código, vamos chamar o Ajax no formato abaixo, considerando que temos no nosso html um elemento #title e outro #main:
jQuery.ajax({ url: 'http://www.flickr.com/services/feeds/photos_public.gne?format=json', dataType: 'jsonp', crossDomain: true, jsonp: false, jsonpCallback: 'jsonFlickrFeed', success: function(d) { $('#title').text(d.title); var i, l = d.items.length, newLi, newItem; $('<ul id="photoList"></ul>').appendTo('#main'); for (i = 0; i < l; i++) { newLi = $('<li></li>'); newItem = d.items[i]; $('<h2>'+newItem.title+'</h2>').appendTo(newLi); $(newItem.description).appendTo(newLi); newLi.appendTo('#photoList'); } } }); |
O que ocorreu no método é simples. Marcamos o dataType como jsonp, indicamos que a requisição é crossDomain e tratamos a resposta do ajax criando uma lista que vai ser preenchida através da manipulação do objeto json recebido.
Claro que vou explicar os parâmetros jsonp e jsonpCallback. Também é simples. Quando não indicamos o parâmetro jsonp como false, o jQuery por padrão inclui um parâmetro na url de requisição como “?callback=”. Quando isso acontece, precisamos indicar o nome da função que contém o objeto json. Assim temos o jsonpCallback com o valor ‘jsonFlickrFeed‘.
A lógica do funcionamento também não é complexa. Pra que não fique a pergunta do porquê podemos fazer requisições de jsonp e não podemos de nenhum outro jeito, seja com XML, texto, json puro, etc. Apenas é utilizado um <script> que pode ter o javascript vindo de qualquer domínio externo. O método encapsulando o json apenas é tratado no jQuery para ser um nome onde se define uma função que vai receber o objeto como argumento para ser tratado na resposta do nosso “ajax manipulado“.
