JSONP

JSONP es un método para transmitir datos JSON sin considerar problemas de origen.

JSONP no utiliza el objeto XMLHttpRequest.

Uso de JSONP <script> La etiqueta se sustituye.

Introducción a JSONP

JSONP significa JSON with Padding.

Solicitar un archivo desde otro dominio puede causar problemas debido a las políticas de seguridad de origen.

No hay problemas al solicitar un script externo desde otro dominio.

JSONP aprovecha esta ventaja y utiliza la etiqueta script en lugar del objeto XMLHttpRequest.

<script src="demo_jsonp.php">

Archivo Server

El archivo en el servidor encapsula el resultado en la llamada a la función:

Ejemplo

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>

Mostrar archivo PHP

El resultado devuelve la llamada a la función llamada "myFunc", con los datos JSON como parámetro.

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

Funciones de JavaScript

La función "myFunc" se encuentra en el cliente y se utiliza para procesar datos JSON:

Ejemplo

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

Pruebe usted mismo

Crear etiqueta de script dinámica

El ejemplo anterior ejecutará la función "myFunc" al cargar la página, lo que no es muy satisfactorio según la ubicación de la etiqueta de script.

El script solo debe ser creado cuando sea necesario:

Ejemplo

Crear e insertar la etiqueta <script> cuando se haga clic en el botón:

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

Pruebe usted mismo

Resultados JSONP dinámicos

El ejemplo anterior es estático.

Se puede crear un ejemplo dinámico enviando JSON al archivo PHP y luego obtener la información de este archivo PHP para devolver un objeto JSON.

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).")";
?>

Explicación del archivo PHP:

  • Convertir la solicitud en un objeto, utilizando la función PHP json_decode().
  • Acceder a la base de datos y llenar el array con los datos solicitados.
  • Agregar el array al objeto.
  • Usar json_decode() La función convierte el array en JSON.
  • Encapsular el objeto devuelto con "myFunc()".

Ejemplo en JavaScript

Se llamará a la función "myFunc" desde el archivo php:

function clickButton() {
    var obj, s
    obj = { "table":"products", "limit":10 };
    s = document.createElement("script");
    s.src = "jsonp_demo_db.php?x="  + JSON.stringify(obj);}}
    document.body.appendChild(s);
 }
function myFunc(myObj)  {
    var x, txt = "";
    for (x in myObj)  {
        txt += myObj[x].name + "<br>";
     }
    document.getElementById("demo").innerHTML = txt;
}

Pruebe usted mismo

Función de callback

¿Y cómo puede hacer que el archivo del servidor llame la función correcta si no puede controlar el archivo del servidor?

A veces, el archivo del servidor proporciona una función de callback como parámetro:

Ejemplo

El archivo PHP llamará la función que pasó como parámetro de callback:

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}

Pruebe usted mismo