English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

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;
}
Teste e Veja‹/›

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.

Exemplo de JSON:
  { "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.

Exemplo de JSONP:
  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);
}
Teste e Veja‹/›