AJAX Cross Domain com jQuery: AJAX em outro domínio

Para que isso serve?

Serve para buscar informações em outro dominio/site através de requisições AJAX.

Qual a diferença desse para o AJAX normal?

A explicação mais simples possível é: "AJAX normal" com JSON não permite (principalmente por questões de segurança) enviar solicitações para outros sites que não estejam no mesmo domínio. Portanto é necessário usar o AJAX Cross Domain com JSONP, o qual nos permite fazer a requisição para outro domínio. Dã!

Vamos ao que interessa!

Um exemplo de implementação para se comunicar com a API do Flickr:

  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');
 
      }
    }
  });

Mas para que servem todos esses parâmetros?

"url" => Serve para informar o destino da requisição.

"dataType" => É para declarar o formato dos dados que será usada durante a comunicação.

"crossDomain" => É para informar se a requisição será "Cross Domain"(Entre domínios diferentes) ou não.

"jsonp" => Serve para adicionar parâmetros, que seriam concatenados a URL de destino da requisição.

"jsonpCallback" => É a função que deve ser buscada, no retorno original da requisição no domínio de destino, que vai conter um argumento com todas as informações que serão retornadas. Uma espécie de involucro, que envolve o objeto a ser retornado para que você possa implementar o que será feito com os dados.

"success" => É a função callback para sua implementação. Ela vai "sobrescrever" a definição da função do parâmetro "jsonpCallback".

Mas como o Flickr faz para responder minha requisição?

Conforme os parametros GET da solicitação que você enviou, eles retornam uma função sem definição, passando o objeto JSON contendo os dados(préviamente parseados/montados) de retorno, como argumento. Para que você a sobrescreva(parametro "success") e funcione em seu site.

Exemplo:

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"
     }
        ]
})

Então... Agora que você já sabe como implementar uma requisição AJAX Cross Domain você pode começar a brincar!

Links úteis e fontes:

• https://api.jquery.com/jQuery.ajax/
• http://leobalter.net/tecnologia/ajax-crossdomain-com-jquery-e-jsonp/

Deixe sua dúvida, crítica ou sugestão nos comentários!

Um Abraço!