Tutoriais de JSONP

Jsonp (JSON com Preenchimento) é um "padrão de uso" do json, que permite que a página da web obtenha informações de outros domínios (sites), ou seja, leitura de dados de cross-domain.

O que é JSONP?

JSONP representa JSON com preenchimento.

Devido à estratégia de cross-domain, solicitar arquivos de outro domínio pode causar problemas.

solicitar scripts externos de outro domínio não apresentará esse problema.

JSONP aproveita essa vantagem e usa<script>marcador em vez de objeto XMLHttpRequest para solicitar o arquivo.

　　<script src="jsonp_demo.php">

O arquivo no servidor (jsonp_demo.php) envolve o resultado dentro de uma chamada de função:

　　<?php
　　$myJSON = '{ "name":"Seagull", "age":32, "city":"New Delhi" }';
　　echo "myFunc(".$myJSON.");";
　　?>

A função "myFunc" está localizada no cliente e pode manipular dados JSON:

function myFunc(myObj) {
　　document.getElementById("output").innerHTML = myObj.name;
}

Diferenças entre JSON e JSONP

JSON: O JavaScript usa JSON (JavaScript Object Notation) para trocar dados pela rede. Ele examina cuidadosamente os dados JSON, que são apenas um objeto JavaScript em formato de string.

　　{ "nome":"Seagull", "idade":22, "cidade":"Nova Delhi" })

JSONP: JSONP é JSON com enchimento. Aqui, enchimento significa empacotar a função no JSON e depois retorná-la na solicitação.

　　myFunc({ "nome":"Seagull", "idade":22, "cidade":"Nova Delhi" })

Métodos de Uso do JSONP

• Inclua o script tag no código HTML. A origem do script tag será a URL a partir da qual os dados serão recuperados. O serviço web permite especificar uma função de callback. No URL, o último contém o parâmetro callback.

• Quando o navegador encontrar o elemento script, ele enviará uma solicitação HTTP para a URL de origem.

• O servidor envia a resposta de volta usando JSON encapsulado em chamadas de função.

• O navegador analisará a resposta JSON em formato de string e a convertirá em objeto JavaScript. Chame a função de callback e passe o objeto gerado a ela.

Criar Script Dinâmico

O exemplo acima executará a função "myFunc" no carregamento da página, com base na posição do script tag.

Mas, o script tag deve ser criado apenas quando necessário.

O exemplo a seguir criará e inserirá no clique no botão<script>Marcador:

function createScriptDynamically() {
　　var elem = document.createElement("script");
　　elem.src = "jsonp_demo.php";
　　document.body.appendChild(elem);
}