Pregunta ¿De qué se trata JSONP?


Entiendo JSON, pero no JSONP. El documento de Wikipedia en JSON es (era) el resultado de búsqueda superior para JSONP. Dice esto:

JSONP o "JSON con relleno" es una extensión JSON en la que un prefijo se especifica como un argumento de entrada de la llamada.

¿Huh? ¿Que llamada? Eso no tiene ningún sentido para mí. JSON es un formato de datos. No hay llamada.

los Segundo resultado de búsqueda es de un tipo llamado Remy, quien escribe esto sobre JSONP:

JSONP es la inyección de la etiqueta de script, pasando la respuesta del servidor a una función especificada por el usuario.

Puedo entenderlo, pero todavía no tiene sentido.


Entonces, ¿qué es JSONP? ¿Por qué se creó (qué problema soluciona)? ¿Y por qué debería usarlo?


Apéndice: Acabo de crear una nueva página para JSONP en Wikipedia; ahora tiene una descripción clara y completa de JSONP, basada en jvenemaLa respuesta de


1833
2018-01-14 20:53


origen


Respuestas:


En realidad no es muy complicado ...

Supongamos que está en domain example.com y desea realizar una solicitud a domain example.net. Para hacerlo, debe cruzar los límites del dominio, un no-no en la mayoría de los navegadores.

El único elemento que sobrepasa esta limitación son las etiquetas <script>. Cuando utiliza una etiqueta de script, la limitación de dominio se ignora, pero en circunstancias normales, no se puede hacer cualquier cosa con los resultados, el script simplemente se evalúa.

Ingrese JSONP. Cuando realiza su solicitud a un servidor que está habilitado para JSONP, pasa un parámetro especial que le dice al servidor un poco sobre su página. De esta forma, el servidor puede finalizar su respuesta de una manera que su página puede manejar.

Por ejemplo, supongamos que el servidor espera un parámetro llamado "devolución de llamada" para habilitar sus capacidades JSONP. Entonces su solicitud se vería así:

http://www.example.net/sample.aspx?callback=mycallback

Sin JSONP, esto podría devolver algún objeto JavaScript básico, así:

{ foo: 'bar' }

Sin embargo, con JSONP, cuando el servidor recibe el parámetro de "devolución de llamada", finaliza el resultado de forma un poco diferente, devolviendo algo como esto:

mycallback({ foo: 'bar' });

Como puede ver, ahora invocará el método que especificó. Entonces, en su página, define la función de devolución de llamada:

mycallback = function(data){
  alert(data.foo);
};

Y ahora, cuando se carga la secuencia de comandos, se evaluará y se ejecutará su función. ¡Voila, solicitudes de dominio cruzado!

También vale la pena señalar el único problema importante con JSONP: pierde mucho control de la solicitud. Por ejemplo, no hay una forma "agradable" de recuperar los códigos de falla correctos. Como resultado, terminas usando temporizadores para monitorear la solicitud, etc., que siempre es un poco sospechoso. La proposición para JSONRequest es una gran solución para permitir scripts de dominios cruzados, mantener la seguridad y permitir un control adecuado de la solicitud.

Estos días (2015), CORS es el enfoque recomendado vs. JSONRequest. JSONP sigue siendo útil para la compatibilidad con navegadores más antiguos, pero dadas las implicaciones de seguridad, a menos que no tenga otra opción CORS es la mejor opción.


1795
2018-01-14 21:08



JSONP es realmente un truco simple para superar el XMLHttpRequest la misma política de dominio. (Como sabes, uno no puede enviar AJAX (XMLHttpRequest) solicitud a un dominio diferente)

Entonces, en lugar de usar XMLHttpRequest tenemos que usar guión Etiquetas HTML, las que usualmente usas para cargar archivos js, para que js obtenga datos de otro dominio. ¿Suena raro?

La cosa es - resulta guión las etiquetas se pueden usar de una manera similar a XMLHttpRequest! Mira esto:

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';

Terminarás con un guión segmento que se ve así después de que carga los datos:

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

Sin embargo, esto es un poco inconveniente, porque tenemos que buscar esta matriz desde guión etiqueta. Asi que JSONP los creadores decidieron que esto funcionaría mejor (y lo es):

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data? callback = my_callback';

Observe la my_callback funcionar allí? Así que cuando JSONP el servidor recibe su solicitud y encuentra el parámetro de devolución de llamada; en lugar de devolver la matriz js simple, devolverá esto:

my_callback({['some string 1', 'some data', 'whatever data']});

Vea dónde está el beneficio: ahora recibimos una devolución de llamada automática (my_callback) que se activará una vez que obtengamos los datos.
Eso es todo lo que hay que saber sobre JSONP: es una devolución de llamada y etiquetas de script.

NOTA: estos son ejemplos simples del uso de JSONP, estos no son scripts listos para producción.

Ejemplo básico de JavaScript (simple feed de Twitter usando JSONP)

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>

Ejemplo básico de jQuery (simple feed de Twitter usando JSONP)

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>


JSONP representa JSON con relleno. (técnica muy mal llamada ya que realmente no tiene nada que ver con lo que la mayoría de la gente pensaría como "relleno").


640
2017-07-29 21:40



JSONP funciona mediante la construcción de un elemento "script" (en formato HTML o insertado en DOM a través de JavaScript), que solicita a una ubicación de servicio de datos remota. La respuesta es un javascript cargado en su navegador con el nombre de la función predefinida junto con el parámetro que se está transfiriendo que es la información JSON solicitada. Cuando se ejecuta el script, la función se llama junto con los datos JSON, permitiendo que la página solicitante reciba y procese los datos.

Para la visita de lectura adicional:  https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

fragmento de código del lado del cliente

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

Parte del servidor de código PHP

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>

38
2018-03-17 13:32



Porque puede pedirle al servidor que agregue un prefijo al objeto JSON devuelto. P.ej

function_prefix(json_object);

para que el navegador eval "en línea" la cadena JSON como expresión. Este truco hace posible que el servidor "inyecte" código de JavaScript directamente en el navegador del Cliente y esto sin pasar por las restricciones del "mismo origen".

En otras palabras, puedes tener intercambio de datos entre dominios.


Normalmente, XMLHttpRequest no permite el intercambio de datos entre dominios directamente (se necesita pasar por un servidor en el mismo dominio) mientras que:

<script src="some_other_domain/some_data.js&prefix=function_prefix> `uno puede acceder a los datos de un dominio diferente que del origen.


También vale la pena señalar: a pesar de que el servidor debe considerarse "de confianza" antes de intentar ese tipo de "truco", los efectos secundarios de posibles cambios en el formato del objeto, etc. pueden ser contenidos. Si un function_prefix(es decir, una función js adecuada) se utiliza para recibir el objeto JSON, dicha función puede realizar comprobaciones antes de aceptar / procesar más los datos devueltos.


37
2018-01-14 20:58



JSONP es una excelente forma de evitar los errores de scripts entre dominios. Puede consumir un servicio JSONP puramente con JS sin tener que implementar un proxy AJAX en el lado del servidor.

Puedes usar el b1t.co servicio para ver cómo funciona. Este es un servicio JSONP gratuito que te permite minimizar tus URL. Aquí está la URL para usar para el servicio:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

Por ejemplo, la llamada, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

volvería

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

Y así, cuando eso se cargue en su js como src, se ejecutará automáticamente el nombre de JavaScript que usted debe implementar como su función de devolución de llamada:

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

Para realizar realmente la llamada JSONP, puede hacerlo de varias maneras (incluido el uso de jQuery), pero aquí hay un ejemplo puro de JS:

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

Un ejemplo paso a paso y un servicio web jsonp para practicar está disponible en: esta publicación


17
2018-03-28 15:59



Un ejemplo simple para el uso de JSONP.

client.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

server.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>    

10
2018-06-06 06:45



Antes de comprender JSONP, necesita saber el formato JSON y XML. Actualmente, el formato de datos más utilizado en la web es XML, pero XML es muy complicado. Hace incómodos a los usuarios procesar incrustados en páginas web.

Para hacer que JavaScript pueda intercambiar datos fácilmente, incluso como el programa de procesamiento de datos, utilizamos la redacción según los objetos de JavaScript y desarrollamos un formato de intercambio de datos simple, que es JSON. JSON se puede utilizar como datos o como un programa de JavaScript.

JSON se puede incrustar directamente en JavaScript, con ellos se puede ejecutar directamente cierto programa JSON, pero debido a restricciones de seguridad, el mecanismo Sandbox del navegador deshabilita la ejecución de código JSON entre dominios.

Para hacer que JSON se pueda pasar después de la ejecución, desarrollamos un JSONP. JSONP omite los límites de seguridad del navegador con la funcionalidad de devolución de llamada de JavaScript y la etiqueta <script>.

En resumen, explica qué es JSONP, qué problema soluciona (cuándo usarlo).


9
2017-12-08 04:02