Ajax Cross-Domain – Recupere conteúdos de outros sites somente com Ajax e JSONP

jQuery e Ajax Cross DomainEstá na hora de quebrar mitos. Mostrarei uma aplicação bem simples que captura ou lê os textos de outro site e os retorna numa variavel, sem o uso de PHP…Somente usando jQuery, Ajax, JSONP e o YQL do Yahoo. É isto mesmo, faremos uma aplicação em Ajax e jQuery 100% cross-domain. Confiram!

O ajax por questões de segurança, não é cross-domain, ou seja, não permite que um site interaja com um script de outro site, pois abriria brechas para possíveis invasões. Existem funções em PHP que resolvem isso, como get_file_contents ou a biblioteca cURL, mas mostrarei agora uma aplicação somente em Ajax que acessa dados de outro site, e os retorna no formato JsonP:

Plug-in Utilizado – jQuery XdomainAjax

Criado por James Padolsey, este simples plug-in acessa remotamente uma API desenvolvida pelo Yahoo, que por sua vez acessa o site alvo, e por JSONP retorna os dados para uma variável. O plug-in pode ser baixado aqui:
https://github.com/jamespadolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

Como utilizar

Após fazer a ligação do plug-in na tag head da sua página, e do jQuery, faremos agora a chamada do plug-in, para retornar os dados de outro site. Segue abaixo todo o código usado para a aplicação:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt-br" />
<script src="jquery.js"></script>
<script src="jquery.xdomainajax.js"></script>
<script type="text/javascript">
$.ajax({
	url: 'http://www.lucaspeperaio.com',
	type: 'GET',
	success: function(res) {
	var headline = $(res.responseText).text();
	document.write(headline);
	}
});
</script>
</head>

<body>
</body>
</html>

Ou seja, após definir o site e o método de acesso, a variável headline receberá o conteudo do site definido acima. Agora, use a criatividade com este plug-in, pois é possível por exemplo filtrar somente os links, ou somente as Meta-Tags com expressões regulares. Numa proxima oportunidade explico melhor como fazer isso!

Espero que tenham gostado e vejam o exemplo em funcionamento abaixo:
http://projetos.lucaspeperaio.com/ajax-cross-domain/

Lucas Peperaio

Estudante de Ciência da Computação, trabalho com desenvolvimento web há 5 anos e com hardware há 8. Nas horas vagas, sou entusiasta de Overclock, Casemod e Benchmarks, além é claro dos Games. Apaixonado por informática e pela vida, procuro compartilhar meus conhecimentos e assim, ajudar as pessoas. Siga-me no youtube, posto semanalmente muito material sobre Hardware, tecnologia e games em geral: Clique aqui

Receba gratuitamente em seu E-mail
Novos artigos do meu Blog!


Após o Cadastro você receberá um Email Automático. Clique no link enviado para Ativar e receber as novidades.

Categorias do site





20 Comentários Deixe o seu

  1. Marcio

    Lucas, perfeito seu post me ajudou muito. Tenho um site que para fazer o acesso a ele através de API, o IP de saída aonde está rodando a aplicação tem que estar cadastrado na minha plataforma. Usando a sua dica o cross domain responde perfeito, mas os IPs que fazem o get vem do Yahoo. Você sabe me dizer, se tem um IP fixo que responde a API. Peguei um cinco IPs do Yahoo batendo na minha plataforma, cadastrei eles e tudo blz. Meu medo e eles mudarem do nada estes IPs……valeu cara.

    • Lucas Peperaio

      Cara, infelizmente não sei te dizer se o Yahoo tem este IP fixo pro YQL, deve até existir um fixo, mas eles não divulgaram

  2. Wesley

    Olá Lucas, Muito legal a dica, parabéns. Tentei utilizar o plugin para fazer um POST, mas não deu certo, com GET foi tudo legal, dae fui olhar no README do git do criador, e de acordo com ele: “This small mod for jQuery enables you to make GET requests, accross domains!”. Conhece algum outro q possa fazer POST cross domain ?

    Obrigado, Abs,

    • Lucas Peperaio

      Não, eu ainda não encontrei nenhum código para esta funcionalidade, até então inexistente pra mim. Até criarem algo parecido, teremos que nos contentar usando Ajax com PHP para realizar POSTs

  3. Ronny Kleverson Rodrigues

    Muito bom o post. Acho que posso utilizá-lo em várias situações, pois nosso site se comunica com outros 2 servidores, um na web e outra na intranet para dar toda funcionalidade que nosso negócio precisa, fica uma pergunta: Se podemos fazer solicitações ajax a outro dominio via YQL, passando pelo Yahoo, porque não podemos fazer o mesmo diretamente, sem passar pelo Yahoo usando a mesma técnica ?

    • Lucas Peperaio

      A resposta para isso Ronny é muito simples: porque o Ajax em si não permite interações de scripts entre servidores distintos, sem o uso de PHP ou de outra linguagem de sokets (Até porque abriria mais uma brecha para invasões). Quando fazemos o acesso ao YQL, eles abrem uma conexão via sokets com o site solicitado, e então retorna-o para nós via JSONP. Eu mesmo, não costumo usar desta maneira, eu sempre usei o cURL do PHP para acessar remotamente um conteúdo.

  4. Jordan

    Cara, muito bacana. Obrigado por divulgar, me ajudou muito. Vlw!

  5. Rogerio

    Lucas, como trazer para uma varável o código fonte da página remota?

    PS: a partir de seu artigo Ajax Cross-Domain – Recupere conteúdos de outros sites somente com Ajax e JSONP

  6. Lucas Peperaio

    A variável headline no exemplo acima está recebendo o código-fonte da página remota Rogério. Caso vc nao queira escrever o conteúdo na tela, é só apagar o document.write

  7. Rogerio

    Lucas, obrigado por responder. Mas ocorre que me parece trazer apenas os textos do fonte, não o fonte inteiro com as tags. Meu objetivo, por exemplo, é descobrir se a página remota tem imagens, ou capturar suas urls. Podes ajudar?

    • Lucas Peperaio

      Entendi Rogério, acho que vou ficar te devendo essa. Sei que com PHP isso é possível, mas com JS eu nunca fiz algo similar

    • Htiallo

      Exatamente o que eu precisava fazer…

  8. bbruno5

    Amigo, como faço para filtrar apenas os links.

    • Lucas Peperaio

      Usando expressões regulares, dá uma pesquisada no Google, tem bastante material sobre o assunto e até mesmo essa função que você quer

  9. Guilherme

    Olá amigo, gostaria de saber se é possível com este plugin que eu consiga estrair o valor de uma input dentro de um site? Tipo se eu seguisse a idéia de como é feito quando páginas são de mesmo domínio: var $currentIFrame = $(‘#framedown’); $currentIFrame.contents().find(“body #baseDownloadLink”).val();

    Ou será que seria mais simplificado usar o CURL (se é que é possível)?

    • Lucas Peperaio

      Seria mais simples usando o YQL, mas o cURL também é uma boa solução. No caso do cURL, você precisaria usar expressões regulares para obter só o input que você quer, afinal ele receberá todo o conteúdo da página (html, scripts, css).

  10. david

    como que baixa o crossdomain

    • Lucas Peperaio

      Não se baixa, Crossdomain é uma tecnologia. Acesse o link do artigo e copie o código-fonte.

  11. Htiallo

    Muito legal o post amigo mais se eu precisava muito saber se há possibilidade de extrair somente as imagens, e colocalas em um array, ou somente exibi-las no lugar do texto… Desde já agradeço…

  12. Htiallo

    Muito legal o post amigo mais se eu precisava muito saber se há possibilidade de extrair somente as imagens, e colocalas em um array, ou somente exibi-las no lugar do texto… Desde já agradeço…