jquery $.getjson parameters - ¿Alguien puede explicar qué es JSONP, en términos simples?





2 Answers

Digamos que tenías una URL que te dio datos JSON como:

{'field': 'value'}

... y tenías una URL similar, excepto que usaba JSONP, a la que pasaste el nombre de la función de devolución de llamada 'myCallback' (generalmente se hace dándole 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 en realidad es un código que puede ejecutarse. Entonces, si define una función en otra parte de su página llamada myFunction y ejecuta este script, se llamará con los datos de la URL.

Lo bueno de esto es que puede crear una etiqueta de script y usar su URL (completa con el parámetro de callback ) como el atributo src , y el navegador lo ejecutará. Eso significa que puede sortear la política de seguridad de "mismo origen" (porque los navegadores le permiten ejecutar etiquetas de script desde fuentes distintas al dominio de la página).

Esto es lo que hace jQuery cuando realiza una solicitud ajax (usando .ajax con 'jsonp' como valor para la propiedad dataType ). 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.

ejemplos datatype ajax

Esta pregunta ya tiene una respuesta aquí:

Sé que JSONP es JSON con relleno.

Entiendo qué es JSON y cómo usarlo con jQuery.getJSON() . Sin embargo, no entiendo el concepto de callback de callback al introducir JSONP.

¿Puede alguien explicarme cómo funciona esto?




He encontrado un artículo útil que también explica el tema con bastante claridad y un lenguaje sencillo. Enlace es JSONP

Algunos de los puntos a destacar son:

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

El trabajo es el 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 hubiera, devueltos como un argumento a esa función.



Related


Tags

jquery   jsonp