por - llamar funcion php desde javascript ajax
Ejemplo básico de usar.ajax() con JSONP? (4)
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 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 devolución de llamada aleatoriamente 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>
¿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.
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 devolución de llamada automáticamente.
Para obtener más detalles, consulte la documentación de jQuery.getJSON .
EDIT 2017 : ¡por favor, no use jQuery nunca más!
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 etiquetas 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 etiquetas 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í:
<script>
{[''some string 1'', ''some data'', ''whatever data'']}
</script>
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 devolución de llamada, 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 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 la producción.
Muestra RAW 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 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").
<!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 Flicker. Esto usa el método GET para obtener imágenes usando JSONP. Se puede encontrar en detalle here