JSONP

Tabla de contenido

Mostrar tabla de contenidos

JSONP es un método para enviar datos JSON sin preocuparse por problemas entre dominios.

JSONP no utiliza el objeto XMLHttpRequest.

JSONP utiliza la etiqueta <script> 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 script en lugar del objeto XMLHttpRequest.

 <script src="demo_jsonp.php">

El archivo del servidor

El archivo en el servidor envuelve el resultado dentro de un 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 llamada "myFunc" con los datos JSON como un parámetro.

Asegúrese de que la función exista en el cliente.

La función JavaScript

La función denominada "myFunc" está ubicada en el cliente y lista para manejar Datos JSON:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Crear una etiqueta de secuencia de comandos dinámica

El ejemplo anterior ejecutará la función "myFunc" cuando la página sea cargando, según dónde coloque la etiqueta del script, lo cual no es muy satisfactorio.

La etiqueta 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);
  }

Pruébelo usted mismo →

<!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

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 basado en la información que obtiene.

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 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 a JSON usando la función json_encode().
Envuelva "myFunc()" alrededor del objeto devuelto.

Ejemplo de JavaScript

La función "myFunc" será llamada 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;
}

Pruébelo usted mismo →

<!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>

Función de devolución de llamada

Cuando no tiene control sobre el archivo del servidor, ¿cómo obtiene el archivo del servidor? llamar a la función correcta?

A veces el archivo del servidor ofrece una función de devolución de llamada como un parámetro:

Ejemplo

El archivo php llamará a la función que pases 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);

Pruébelo usted mismo →

<!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>