Como usar JSONP

O que é JSONP?

JSON um acrônimo para “JavaScript Object Notation”, é um formato leve para intercâmbio de dados computacionais. JSONP ou “JSON with padding” é um complemento ao formato de dados JSON. Ele provê um método para enviar requisições de dados de um servidor para um domínio diferente, uma coisa proibida pelos navegadores típicos por causa da Política de mesma origem.

Trocando em miúdos, se você quiser fazer uma pagina com a metodologia Ajax mas precisar pedir dados de outro domínio, a saída é usar JSONP.

Vamos a um exemplo simples de como usar JSONP na prática.

Temos um script Php que entrega o conteúdo da variável $_SERVER em Json. O truque é imprimir o objeto dentro de uma chamada à função callback.

O script fica assim:
content.php

<?php
header('Content-Type: application/json');

echo "callback(" . json_encode($_SERVER) . ");";
?>

Agora temos que fazer uma página que defina, no JavaScript, a função callback, que fará algo com o conteúdo do JSON.
index.html

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<title>Ajax teste</title>
	</head>
	<body>

		<h3>Ajax teste</h3>
	
		<button type="submit" autofocus onclick="buttonClick();">Carregar</button>
	
		<br><br>
	
		<table id="content"></table>

	</body>
</html>

Essa página simplesmente define uma tabela com o id content, e um botão que irá chamar a função buttonClick.

Agora antes do fim da tag body colocamos este script:

<script>
function callback(obj) {
	var l = [];
	for (var key in obj) {
		if (obj.hasOwnProperty(key)) {
			l.push('<tr><td>' + key + '</td><td>' + obj[key] + '</td></tr>');
		}
	}
	content.innerHTML = l.join("");
};

function buttonClick() {
	var s = document.createElement('script');
	document.body.appendChild(s);
	s.src = "content.php";
}
</script>

A função callback irá popular a nossa tabela de id content com os valores do JSON.

A função buttonClick cria um elemento script com o src content.php. Isso fará com que o conteúdo do JSONP seja carregado, o que finalmente irá chamar a função callback.

Dúvidas ou comentários são bem-vindos.