Tutoriales JSONP

Jsonp (JSON with Padding) es un "patrón de uso" de json que permite que una página web obtenga información de otros dominios (sitios web), es decir, leer datos de manera transversal.

¿Qué es JSONP?

JSONP representa JSON con relleno.

Debido a las políticas de seguridad de origen, solicitar un archivo desde otro dominio puede causar problemas.

No se presenta este problema al solicitar un script externo desde otro dominio.

JSONP aprovecha esta ventaja y utiliza<script>Se utiliza una etiqueta de script en lugar de un objeto XMLHttpRequest para solicitar el archivo.

　　<script src="jsonp_demo.php">

El archivo en el servidor (jsonp_demo.php) envuelve el resultado en una llamada a función:

　　<?php
　　$myJSON = '{ "name":"Seagull", "age":32, "city":"New Delhi" }';
　　echo "myFunc(".$myJSON.");";
　　?>

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

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

Diferencias entre JSON y JSONP

JSON: JavaScript utiliza JSON (representación de objetos JavaScript) para intercambiar datos a través de la red. Revisa los datos JSON, que son solo un objeto JavaScript en formato de cadena.

　　{ "nombre":"Seagull", "edad":22, "ciudad":"New Delhi" })

JSONP: JSONP es JSON con relleno. Aquí, el relleno significa envolver la función en JSON y luego devolverla en la solicitud.

　　myFunc({ "nombre":"Seagull", "edad":22, "ciudad":"New Delhi" })

Métodos de uso de JSONP

• En el código HTML, incluye la etiqueta script. La fuente de la etiqueta script será el URL desde el que se recuperarán los datos. Los servicios web permiten especificar una función de devolución de llamada. En el URL, se incluye el parámetro callback al final.

• Cuando el navegador encuentra un elemento script, envía una solicitud HTTP al URL de origen.

• El servidor envía la respuesta de vuelta utilizando JSON encapsulado en una llamada a función.

• El navegador解析 la respuesta JSON en forma de cadena y la convierte en un objeto JavaScript. Llama a la función de devolución de llamada y le pasa el objeto generado.

Crear etiqueta de script dinámicamente

El siguiente ejemplo ejecutará la función "myFunc" en el momento de la carga de la página según la ubicación de la etiqueta script.

Pero, solo se debe crear la etiqueta de script cuando sea necesario.

El siguiente ejemplo creará e insertará<script>Etiqueta:

function createScriptDynamically() {
　　var elem = document.createElement("script");
　　elem.src = "jsonp_demo.php";
　　document.body.appendChild(elem);
}