JSONP
JSONP es un método para enviar datos JSON sin preocuparse por problemas entre dominios.
JSONP no utiliza el XMLHttpRequest
objeto.
JSONP usa la <script>
etiqueta en su lugar.
Introducción a JSONP
JSONP significa JSON con relleno.
Solicitar un archivo de otro dominio puede causar problemas debido a la política entre dominios.
Solicitar un script externo de otro dominio no tiene este problema.
JSONP usa esta ventaja y solicita archivos usando la etiqueta de secuencia de comandos en lugar del XMLHttpRequest
objeto.
<script src="demo_jsonp.php">
El archivo del servidor
El archivo en el servidor envuelve el resultado dentro de una llamada de función:
Ejemplo
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
El resultado devuelve una llamada a una función denominada "myFunc" con los datos JSON como parámetro.
Asegúrese de que la función exista en el cliente.
La función JavaScript
La función llamada "myFunc" se encuentra en el cliente y está lista para manejar datos JSON:
Ejemplo
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Creación de una etiqueta de secuencia de comandos dinámica
El ejemplo anterior ejecutará la función "myFunc" cuando la página se esté cargando, en función de dónde coloque la etiqueta del script, lo que no es muy satisfactorio.
La etiqueta del script solo debe crearse cuando sea necesario:
Ejemplo
Cree e inserte la etiqueta <script> cuando se haga clic en un botón:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Resultado JSONP dinámico
Los ejemplos anteriores siguen siendo muy estáticos.
Haga que el ejemplo sea dinámico enviando JSON al archivo php y deje que el archivo php devuelva un objeto JSON en función de la información que obtenga.
archivo 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).")";
?>
Archivo PHP explicado:
- Convierta la solicitud en un objeto, usando la función de PHP json_decode() .
- Acceda a la base de datos y complete una matriz con los datos solicitados.
- Agregue la matriz a un objeto.
- Convierta la matriz en JSON usando la función json_encode() .
- Envuelve "myFunc()" alrededor del objeto devuelto.
Ejemplo de JavaScript
La función "myFunc" se llamará desde el archivo 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;
}
Función de devolución de llamada
Cuando no tiene control sobre el archivo del servidor, ¿cómo hace que el archivo del servidor llame a la función correcta?
A veces, el archivo del servidor ofrece una función de devolución de llamada como parámetro:
Ejemplo
El archivo php llamará a la función que pase como parámetro de devolución de llamada:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);