JSONP
JSONP é um método para enviar dados JSON sem se preocupar com problemas entre domínios.
JSONP não usa o XMLHttpRequestobjeto.
JSONP usa a <script>tag em vez disso.
Introdução 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.
O JSONP usa essa vantagem e solicita arquivos usando a tag de script em vez do XMLHttpRequestobjeto.
<script src="demo_jsonp.php">
O arquivo do servidor
O arquivo no servidor encapsula o resultado dentro de uma 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 parâmetro.
Certifique-se de que a função existe no cliente.
A função JavaScript
A função chamada "myFunc" está localizada no cliente e pronta para lidar com dados JSON:
Exemplo
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Criando uma Tag de Script Dinâmico
O exemplo acima irá executar a função "myFunc" quando a página estiver carregando, com base em onde você coloca a tag do script, o que não é muito satisfatório.
A tag de 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);
}
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 com base nas informações que ele 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 a matriz 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;
}
Função de retorno de chamada
Quando você não tem controle sobre o arquivo do servidor, como você faz com que o arquivo do servidor chame a função correta?
Às vezes, o arquivo do servidor oferece uma função de retorno de chamada como parâmetro:
Exemplo
O arquivo php chamará a função que você passar como parâmetro de retorno de chamada:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);