JSONP

Índice

Mostrar índice

JSONP é um método para enviar dados JSON sem se preocupar com problemas entre domínios.

JSONP não usa o objeto XMLHttpRequest.

JSONP usa a tag <script>.

Introdução ao JSONP

JSONP significa JSON com preenchimento.

Solicitar um arquivo de outro domínio pode causar problemas devido à política entre domínios.

Solicitar um script externo de outro domínio não apresenta esse problema.

JSONP aproveita essa vantagem e solicita arquivos usando a tag script em vez do objeto XMLHttpRequest.

 <script src="demo_jsonp.php">

O arquivo do servidor

O arquivo no servidor envolve o resultado dentro de um chamada de função:

Exemplo

 <?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
  
echo "myFunc(".$myJSON.");";
  ?>

O resultado retorna uma chamada para uma função chamada "myFunc" com os dados JSON como um parâmetro.

Certifique-se de que a função exista no cliente.

A função JavaScript

A função chamada "myFunc" está localizada no cliente e pronta para ser tratada Dados JSON:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Request JSON using the script tag</h2>
<p>The PHP file returns a call to a function that will handle the JSON data.</p>
<p id="demo"></p>

<script>
function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

<script src="demo_jsonp.php"></script>

</body>
</html>

Criando uma tag de script dinâmica

O exemplo acima executará a função "myFunc" quando a página for carregamento, com base em onde você colocou a tag script, o que não é muito satisfatório.

A tag script só deve ser criada quando necessário:

Exemplo

Crie e insira a tag <script> quando um botão for clicado:

 function clickButton() {
  let s = document.createElement("script");
  s.src = "demo_jsonp.php";
  document.body.appendChild(s);
  }

Experimente você mesmo →

<!DOCTYPE html>
<html>

<body>

<h2>Click the Button.</h2>
<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with the JSON object as a parameter.</p>

<button onclick="clickButton()">Click me!</button>

<p id="demo"></p>

<script>
function clickButton() {
  let s = document.createElement("script");
  s.src = "demo_jsonp.php";
  document.body.appendChild(s);
}

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

</body>
</html>

Resultado JSONP dinâmico

Os exemplos acima ainda são muito estáticos.

Torne o exemplo dinâmico enviando JSON para o arquivo php e deixe o arquivo php retornar um objeto JSON baseado em a informação que obtém.

arquivo PHP

 <?php
header("Content-Type: application/json; charset=UTF-8");
$obj = 
  json_decode($_GET["x"], false);
  
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
  $result = $conn->query("SELECT name FROM 
  ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
  $outp = $result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>

Arquivo PHP explicado:

Converta a solicitação em um objeto, usando a função PHP json_decode().
Acesse o banco de dados e preencha um array com os dados solicitados.
Adicione a matriz a um objeto.
Converta o array em JSON usando a função json_encode().
Enrole "myFunc()" ao redor do objeto de retorno.

Exemplo de JavaScript

A função "myFunc" será chamada a partir do arquivo php:

const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);

function myFunc(myObj) {
  let txt = "";
  for (let x in myObj) 
  {
    txt += myObj[x].name + "<br>";
  
  }
  document.getElementById("demo").innerHTML = txt;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with an object as a parameter.</p>
<p id="demo"></p>

<p>Try changing the table property from "customers" to "products".</p>

<script>
const obj = { table: "customers", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);

function myFunc(myObj) {
  let txt = "";
  for (let x in myObj) {
    txt += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Função de retorno de chamada

Quando você não tem controle sobre o arquivo do servidor, como você obtém o arquivo do servidor chamar a função correta?

Às vezes, o arquivo do servidor oferece uma função de retorno de chamada como um parâmetro:

Exemplo

O arquivo php chamará a função que você passa como parâmetro de retorno de chamada:

let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Request With a Callback Function</h2>
<p>The PHP file returns a call to the function you send as a callback.</p>
<p id="demo"></p>

<script>
let s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction";
document.body.appendChild(s);

function myDisplayFunction(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

</body>
</html>