JSONP – Chamadas AJAX com JSON

JSONP é apenas uma técnica alternativa ao XmlHttpRequest do Javascript, pois este último não aceita chamadas cross-domain, ou seja, se nosso site está hospedado sob o domínio http://www.meudominio.com.br  e tentarmos fazer uma chamada para qualquer url diferente deste domínio, ex:  http://www.outrodominio.com.br,  o objeto XmlHttpRequest não retornará nada por uma questão de segurança.

Para, então, integrarmos nossa aplicação web com outras aplicações em outros domínios, podemos utilizar da técnica JSONP (Java Script Object Notation with Padding)  que nada mais é do que inserir um elemento <script> em nossa página com uma url que contenha um parâmetro com o nome de uma função de callback, contida em nosso código. Exemplo:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<script>
function myFunc(tweets){
for(var i = 0, max = tweets.length; i < max; i++){
var dt = new Date(tweets[i].created_at);
document.write(dt.getDay() + “/” + dt.getMonth()+ “/”+ dt.getFullYear() + ” — ” + tweets[i].text + “<br>”);
}
}
</script>
</head>
<body>
</body>
</html>

Veja acima que a url contida no atributo src da tag script possui o nome de uma função definida em nosso código. O navegador ao passar por este trecho, executará esta url, retornando um objeto JSON envolvido pelo nome de nossa função, que será executado imediatamente.

Veja este exemplo acima em execução:  Exemplo 1

Veja um exemplo um pouco mais completo, onde é permitido definir o usuário do tweeter em: Exemplo 2

Veja também a referência para API do Tweeter

Esta entrada foi publicada em Javascript e AJAX. ligação permanente.

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s