Ejemplo básico de usar .ajax () con JSONP?

¿Alguien podría ayudarme a encontrar la manera de comenzar con JSONP?

Código:

$('document').ready(function() { var pm_url = 'http://twitter.com/status'; pm_url += '/user_timeline/stephenfry.json'; pm_url += '?count=10&callback=photos'; var photos = function (data) { alert(data); }; $.ajax({ url: pm_url, dataType: 'jsonp', jsonpCallback: 'photos', jsonp: false, }); }); 

Fiddle: http://jsfiddle.net/R7EPt/6/

Debería producir una alerta, por lo que puedo deducir de la documentación: no es (pero tampoco está produciendo ningún error).

Gracias.

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

Por lo tanto, en lugar de utilizar XMLHttpRequest, debemos usar las tags de script HTMLl, las que usualmente usamos para cargar archivos JS, para que JS obtenga datos de otro dominio. ¿Suena raro?

Lo que pasa es que las tags de script 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"; 

Al finalizar la carga de datos, terminará con un segmento de script que se ve así:

  

Sin embargo, esto es un poco inconveniente, porque tenemos que buscar esta matriz desde la etiqueta de script . Entonces, los creadores de JSONP 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 mi función mycallback allí? Por lo tanto, cuando el servidor JSONP recibe su solicitud y encuentra el parámetro de callback, en lugar de devolver una matriz JS sencilla, devolverá esto:

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

Vea dónde está la ganancia: ahora obtenemos una callback 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 callback y tags de script.


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

Muestra RAW JavaScript (simple feed de Twitter usando JSONP):

     

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

       

JSONP significa 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”).

Hay una forma aún más fácil de cómo trabajar con JSONP usando jQuery

 $.getJSON("http://example.com/something.json?callback=?", function(result){ //response data are now in the result variable alert(result); }); 

El ? al final de la URL le dice a jQuery que es una solicitud JSONP en lugar de JSON. jQuery registra y llama a la función de callback automáticamente.

Para obtener más detalles, consulte la documentación de jQuery.getJSON .

En respuesta al OP, hay dos problemas con su código: necesita configurar jsonp = ‘callback’, y agregar una función de callback en una variable como usted no parece funcionar.

Actualización: cuando escribí esto, la API de Twitter solo estaba abierta, pero la cambiaron y ahora requiere autenticación. Cambié el segundo ejemplo a un ejemplo de trabajo (2014Q1), pero ahora uso github.

Esto ya no funciona, como ejercicio, vea si puede reemplazarlo con la API de Github:

 $('document').ready(function() { var pm_url = 'http://twitter.com/status'; pm_url += '/user_timeline/stephenfry.json'; pm_url += '?count=10&callback=photos'; $.ajax({ url: pm_url, dataType: 'jsonp', jsonpCallback: 'photos', jsonp: 'callback', }); }); function photos (data) { alert(data); console.log(data); }; 

aunque alertar () a una matriz como esa no funciona bien … La pestaña “Red” en Firebug le mostrará el JSON correctamente. Otro truco útil es hacer

 alert(JSON.stringify(data)); 

También puede usar el método jQuery.getJSON . Aquí hay un ejemplo html completo que obtiene una lista de “gists” de github. De esta forma crea una función de callback aleatoriamente para usted, ¿esa es la “callback” final? en la url.

    JQuery (cross-domain) JSONP Twitter example     
          An JSONP example     

    El código anterior ayuda a obtener imágenes de la API Flicker. Esto usa el método GET para obtener imágenes usando JSONP. Se puede encontrar en detalle aquí