Exemplo básico de usar.ajax () com 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,
});
});
Violino: http://jsfiddle.net/R7EPt/6/
deve produzir um alerta, tanto quanto eu posso trabalhar a partir da documentação: não é (mas não está produzindo quaisquer erros também).
Obrigado.4 answers
JSONP é realmente um truque simples para superar XMLHttpRequest a mesma política de domínio. (Como você sabe, não é possível enviar AJAX (XMLHttpRequest) pedido para um domínio diferente.)
So-em vez de usar XMLHttpRequest temos de usar script HTMLl tags, Os que normalmente usa para carregar ficheiros JS, para que o JS consiga dados de outro domínio. Parece estranho?
A coisa é-acontece script tags pode ser usado de uma forma semelhante a XMLHttpRequest ! Olha para isto.
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";
Você vai acabar com um segmento script que se parece com isto depois de carregar os dados:
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
No entanto, isto é um pouco inconveniente, porque temos de obter esta matriz de script tag. Então os criadores do JSONP decidiram que isto funcionará melhor (e é):
script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";
my_callback({['some string 1', 'some data', 'whatever data']});
Veja onde está o lucro: agora temos uma chamada automática (my_callback ) que será despoletada assim que tivermos os dados. Isso é tudo o que há para saber sobre JSONP: é um callback e etiquetas de script.
Nota:
Estes são exemplos simples de Uso do JSONP, estes não são scripts prontos para produção.
Demonstração de JavaScript RAW (feed Twitter simples usar o 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>
exemplo básico de jQuery (Twitter simples 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 {[9] } significa JSON with Padding {[[9]}. (técnica muito mal nomeada porque realmente não tem nada a ver com o que a maioria das pessoas pensaria como "enchimento".)
Existe uma maneira ainda mais fácil de trabalhar com o JSONP usando o jQuery
$.getJSON("http://example.com/something.json?callback=?", function(result){
//response data are now in the result variable
alert(result);
});
O ? no fim da URL diz ao jQuery que é um pedido do JSONP em vez do JSON. jQuery registra e chama a função de callback automaticamente.
Para mais detalhes, consulte o jQuery .documentação de getJSON .
Em resposta ao OP, existem dois problemas com o seu código: você precisa definir jsonp='callback', e adicionar uma função de callback em uma variável como você não parece funcionar.
Update: quando escrevi isto, a API do Twitter estava aberta, mas eles mudaram-na E agora precisa de autenticação. Eu mudei o segundo exemplo para um exemplo de trabalho (2014Q1), mas agora usando o github.
Isto não funciona mais - como um exercício, veja se você pode substituí - lo pelo Github API:
$('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);
};
Embora o alerta()de um array como este não funcione bem... A conta " Net " do Firebug vai mostrar-te o JSON como deve ser. Outro truque prático é fazer
alert(JSON.stringify(data));
Também pode usar o jQuery .método de getJSON. Aqui está um exemplo html completo que recebe uma lista de "gists" do github. Desta forma, cria uma função de callback chamada aleatoriamente para você, Essa é a última "callback=?"no 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>
O código acima ajuda a obter imagens da API Flicker. Isto usa o método GET para obter imagens usando JSONP. Pode ser encontrada em detalhes em aqui