[jquery] ¿Alguien puede explicar lo que es JSONP, en términos simples?


Answers

Supongamos que tiene alguna URL que le proporcionó datos JSON como:

{'field': 'value'}

... y tuviste una URL similar excepto que usó JSONP, a la que pasaste el nombre de la función de devolución de llamada 'myCallback' (generalmente hecho al darle un parámetro de consulta llamado 'devolución de llamada', por ejemplo, http://example.com/dataSource?callback=myCallback ). Entonces volvería:

myCallback({'field':'value'})

... que no es solo un objeto, sino que es un código que se puede ejecutar. Entonces, si define una función en otra parte de su página llamada myFunction y ejecuta esta secuencia de comandos, se myFunction con los datos de la URL.

Lo bueno de esto es: puedes crear una etiqueta de script y usar tu URL (completa con un parámetro de callback ) como el atributo src , y el navegador lo ejecutará. Esto significa que puede evitar la política de seguridad de "origen idéntico" (porque los navegadores le permiten ejecutar etiquetas de script desde otras fuentes además del dominio de la página).

Esto es lo que hace jQuery cuando haces una solicitud de Ajax (usando .ajax con 'jsonp' como el valor para la propiedad de tipo de datos). P.ej

$.ajax({
  url: 'http://example.com/datasource',
  dataType: 'jsonp',
  success: function(data) {
    // your code to handle data here
  }
});

Aquí, jQuery se encarga del nombre de la función de devolución de llamada y del parámetro de consulta, lo que hace que la API sea idéntica a otras llamadas ajax. Pero a diferencia de otros tipos de solicitudes ajax, como se mencionó, no está restringido a obtener datos del mismo origen que su página.

Question

Sé que JSONP es JSON con relleno.

Entiendo lo que es JSON, y cómo usarlo con jQuery.getJSON() . Sin embargo, no entiendo el concepto de callback de callback cuando introduzco JSONP.

¿Alguien puede explicarme cómo funciona esto?




Encontré un artículo útil que también explica el tema de manera bastante clara y fácil. El enlace es JSONP

Algunos de los puntos importantes son:

  1. JSONP es anterior a CORS.
  2. Es una forma pseudo estándar de recuperar datos de un dominio diferente,
  3. Tiene funciones CORS limitadas (solo método GET)

Trabajando es lo siguiente:

  1. <script src="url?callback=function_name"> está incluido en el código html
  2. Cuando se ejecuta el paso 1, detecta una función con el mismo nombre de función (como se indica en el parámetro url) como respuesta.
  3. Si la función con el nombre dado existe en el código, se ejecutará con los datos, si los hay, devueltos como argumento para esa función.



Links



Tags

jquery jquery   jsonp