¿Ejemplo básico de uso de .ajax() con JSONP?
¿Alguien podría ayudarme a descubrir cómo empezar 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,
});
});
Violín: http://jsfiddle.net/R7EPt/6/
Debería generar una alerta, hasta donde puedo deducir de la documentación: no lo es (pero tampoco produce ningún error).
gracias.
JSONP es en realidad un truco simple para superar la misma política de dominio de XMLHttpRequest . (Como usted sabe, no se puede enviar una solicitud AJAX (XMLHttpRequest) a un dominio diferente).
Entonces, en lugar de usar XMLHttpRequest, tenemos que usar etiquetas HTMLl de script , las que normalmente se usan para cargar archivos JS, para que JS obtenga datos de otro dominio. ¿Suena raro?
La cosa es que resulta que las etiquetas de script se pueden utilizar de forma similar a XMLHttpRequest . Mira esto:
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";
Terminará con un segmento de secuencia de comandos que se ve así después de cargar los datos:
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
Sin embargo, esto es un poco inconveniente porque tenemos que recuperar esta matriz de la etiqueta del script . Entonces los creadores de JSONP decidieron que esto funcionará mejor (y lo es):
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";
¿Notas la función my_callback allí? Entonces, cuando el servidor JSONP reciba su solicitud y encuentre el parámetro de devolución de llamada, en lugar de devolver una matriz JS simple, devolverá esto:
my_callback({['some string 1', 'some data', 'whatever data']});
Vea dónde está la ganancia: ahora obtenemos 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, no son scripts listos para producción.
Demostración de JavaScript RAW (feed de Twitter simple 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 (feed de Twitter simple 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 significa JSON con relleno . (técnica con un nombre muy pobre, ya que en realidad no tiene nada que ver con lo que la mayoría de la gente consideraría “relleno”).
Existe una forma aún más sencilla de trabajar con JSONP usando jQuery
$.getJSON("http://example.com/something.json?callback=?", function(result){
//response data are now in the result variable
alert(result);
});
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 devolución de llamada 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 devolución de llamada en una variable como lo hizo no parece funcionar.
Actualización: cuando escribí esto, la API de Twitter estaba abierta, pero la cambiaron y ahora requiere autenticación. Cambié el segundo ejemplo a un ejemplo funcional (2014Q1), pero ahora usando 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 realmente no funciona bien... La pestaña "Net" en Firebug le mostrará el JSON correctamente. Otro truco útil es hacer
alert(JSON.stringify(data));
También puedes utilizar el método jQuery.getJSON . Aquí hay un ejemplo html completo que obtiene una lista de "esenciales" de github. De esta manera, crea una función de devolución de llamada con nombre aleatorio para usted, esa es la "devolución de llamada =?" final. en la URL.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQuery (cross-domain) JSONP Twitter example</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON('https://api.github.com/gists?callback=?', function(response){
$.each(response.data, function(i, gist){
$('#gists').append('<li>' + gist.user.login + " (<a href='" + gist.html_url + "'>" +
(gist.description == "" ? "undescribed" : gist.description) + '</a>)</li>');
});
});
});
</script>
</head>
<body>
<ul id="gists"></ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>An JSONP example </title>
</head>
<body>
<!-- DIV FOR SHOWING IMAGES -->
<div id="images">
</div>
<!-- SCRIPT FOR GETTING IMAGES FROM FLICKER.COM USING JSONP -->
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
format: "json"
},
//RETURNED RESPONSE DATA IS LOOPED AND ONLY IMAGE IS APPENDED TO IMAGE DIV
function(data) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
});
});</script>
</body>
</html>
El código anterior ayuda a obtener imágenes de la API de Flicker. Esto utiliza el método GET para obtener imágenes usando JSONP. Se puede encontrar en detalle aquí .
